Headers, menus, footers and shells.
Navigation
Complete navigation systems with working dropdowns, mega menus, drawers and active states — each one solving a different information-architecture problem.
Showing 11 of 38 navigation — clear filters
Mega menu
A wide three-column panel with a promoted card, built as a disclosure rather than an ARIA menu.
NavbarsadvancedFeatured4 variantsMinimal navbar
Wordmark, four links, one action — with an in-flow mobile disclosure rather than a drawer.
NavbarsstarterFeatured3 variantsSaaS navbar
Product dropdown, flat secondary links, and a separated sign-in / sign-up pair.
NavbarsintermediateFeatured4 variantsCentered navbar
Three equal grid tracks keep the link group optically centred whatever the brand or actions weigh.
Navbarsstarter3 variantsCommand-driven navigation
Almost no chrome — a brand, a visible ⌘K affordance, and a palette that is the real navigation.
Navbarsadvanced3 variantsEcommerce navbar
Announcement bar, category rail, search, account and a bag whose count is in the accessible name.
Navbarsintermediate4 variantsEditorial masthead
A publication masthead: oversized serif wordmark, issue line, and a scrolling section rail.
Navbarsstarter3 variantsMobile-first tab bar
A bottom tab bar with safe-area padding, promoted to a horizontal top bar at md.
Navbarsstarter3 variantsProduct switcher
A workspace switcher in the leading position, because it changes the meaning of everything after it.
Navbarsintermediate3 variantsSplit navbar
Two link groups flanking a centred brand, for products with a real product/resources divide.
Navbarsstarter3 variantsTransparent over hero
A navbar with no background of its own, inheriting inverted ink from the hero beneath it.
Navbarsstarter3 variants