9 articles
Header
Header layouts, sticky and transparent headers, logo settings, mega menus, top bars, and side panel navigation.
Header TypesHeader Types Canvas ships a single, flexible header component driven entirely by classes on the element. By combining a base type class with…Sticky HeaderSticky Header By default the Canvas header sticks to the top of the viewport once you scroll past it. This is handled by the module ( ), which adds…Header SizesHeader Sizes Canvas provides preset header heights plus a fully custom option. Height is controlled by the CSS variable, which the size classes remap…Mega MenuMega Menu The Canvas mega menu turns a top-level menu item into a full multi-column dropdown. It reuses Bootstrap 5's grid ( / ) inside a panel, so…Menu StylesMenu Styles The primary menu supports several built-in visual styles and behaviours through modifier classes on the element. The base markup stays…Mobile MenusMobile Menus Below the expand breakpoint, the primary menu collapses behind a hamburger trigger. Canvas provides the trigger button plus a couple of…Page Sub MenuPage Sub-Menu The page menu ( ) is a secondary navigation bar, typically placed just below the main header. It is ideal for product pages, long…Dots Sub MenuDots Sub-Menu The dots menu is a compact, collapsed version of the page menu ( ). It shows as a small dotted pill fixed to the side of the screen and…Helper ClassesHelper Classes Canvas ships a large set of utility (helper) classes on top of Bootstrap 5's own utilities. These cover colours, spacing, hover…