Header navigation sections

Site headers whose menus open lists, columns, feature cards, blog posts or video tutorials, under the button or across the page, in a plain or floating bar.

Last updated

Each example is a block: a Navbar with NavDropdown menus. A menu opens under its button or across the page; on phones it becomes a row that expands inside the menu. The floating versions sit the bar on a rounded pill.

npx @ava-ui/apogee add header-navigation/dropdown-simple

Copy is props

Every block in this family takes the same content props (NavigationContent in sections/_shared/navigation.ts), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy.

  • brand: The site name beside the logo.

  • links: The bar’s entries in order: a link { label, href } or a menu { label, groups }.

  • primaryAction: The solid button.

  • secondaryAction: The outline button.

  • Pass null to hide an optional part, such as description={null}.

  • Some blocks add props of their own; the top of each block’s file lists them.

Dropdown simpleA bar whose menus open a short list of links with icons.
Dropdown simple with footerA bar whose menus open a short list of links with an “All resources” link under it.
Dropdown simple two columnsA bar whose menus open ten links in two columns.
Dropdown simple two columns with footerA bar whose menus open two headed columns over a sign-up strip.
Floating two columns with links and footerA floating bar whose menus open an intro, quick links and two columns over two buttons.
Dropdown feature cardA bar whose menus open links beside a card about a new release.
Dropdown two columns with links and footerA bar whose menus open an intro, quick links and two columns over two buttons.
Dropdown featured postsA bar whose menus open company links beside the latest blog posts.
Floating feature cardA floating bar whose menus open links beside a card about a new release.
Floating simple with footerA floating bar whose menus open a short list of links with an “All resources” link.
Two columns with sidebarA bar whose menus open across the page: two columns beside video tutorials.
Three columns with sidebarA bar whose menus open across the page: three columns beside a release card.
Four columns with footerA bar whose menus open across the page: four columns over a sign-up strip.
Columns with linksA bar whose menus open across the page: three columns beside a list of quick links.
Floating four columns slim with footerA floating bar whose menus open one row of four links over a sign-up strip.
Four columns slim with footerA bar whose menus open across the page: one row of four links over a sign-up strip.
Blog posts with footerA bar whose menus open across the page: nine blog posts over two buttons.
Blog posts with sidebarA bar whose menus open across the page: blog categories beside six posts.
Floating two columns with sidebarA floating bar whose menus open two columns beside video tutorials, over two buttons.
Floating blog posts with footerA floating bar whose menus open nine blog posts over two buttons.

Related

NavbarA responsive site header that collapses its links into a mobile panel below the md breakpoint.
NavDropdownA Navbar item that opens a panel of links; a popover under the button or across the header on desktop, a row that expands in the phone menu.
NavLinkA navigation link that auto-detects and styles the current route, with prefix matching, external links and a collapsible NavGroup.