# 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. URL: https://apogee.avaui.dev/docs/header-navigation-sections Last updated: 2026-10-20 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 October 20, 2026 Each example is a block: a [Navbar](https://apogee.avaui.dev/docs/navbar) with [NavDropdown](https://apogee.avaui.dev/docs/nav-dropdown) 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. ```sh 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. [ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple.dark.webp) Dropdown simpleA bar whose menus open a short list of links with icons. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-simple)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple-with-footer.dark.webp) Dropdown simple with footerA bar whose menus open a short list of links with an “All resources” link under it. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-simple-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple-two-columns.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple-two-columns.dark.webp) Dropdown simple two columnsA bar whose menus open ten links in two columns. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-simple-two-columns)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple-two-columns-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-simple-two-columns-with-footer.dark.webp) Dropdown simple two columns with footerA bar whose menus open two headed columns over a sign-up strip. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-simple-two-columns-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-two-col-with-links-and-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-two-col-with-links-and-footer.dark.webp) Floating two columns with links and footerA floating bar whose menus open an intro, quick links and two columns over two buttons. ](https://apogee.avaui.dev/docs/header-navigation-sections/floating-two-col-with-links-and-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-feature-card.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-feature-card.dark.webp) Dropdown feature cardA bar whose menus open links beside a card about a new release. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-feature-card)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-two-cols-with-links-and-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-two-cols-with-links-and-footer.dark.webp) Dropdown two columns with links and footerA bar whose menus open an intro, quick links and two columns over two buttons. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-two-cols-with-links-and-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-featured-posts.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__dropdown-featured-posts.dark.webp) Dropdown featured postsA bar whose menus open company links beside the latest blog posts. ](https://apogee.avaui.dev/docs/header-navigation-sections/dropdown-featured-posts)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-feature-card.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-feature-card.dark.webp) Floating feature cardA floating bar whose menus open links beside a card about a new release. ](https://apogee.avaui.dev/docs/header-navigation-sections/floating-feature-card)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-simple-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-simple-with-footer.dark.webp) Floating simple with footerA floating bar whose menus open a short list of links with an “All resources” link. ](https://apogee.avaui.dev/docs/header-navigation-sections/floating-simple-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__two-col-with-sidebar.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__two-col-with-sidebar.dark.webp) Two columns with sidebarA bar whose menus open across the page: two columns beside video tutorials. ](https://apogee.avaui.dev/docs/header-navigation-sections/two-col-with-sidebar)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__three-col-with-sidebar.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__three-col-with-sidebar.dark.webp) Three columns with sidebarA bar whose menus open across the page: three columns beside a release card. ](https://apogee.avaui.dev/docs/header-navigation-sections/three-col-with-sidebar)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__four-col-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__four-col-with-footer.dark.webp) Four columns with footerA bar whose menus open across the page: four columns over a sign-up strip. ](https://apogee.avaui.dev/docs/header-navigation-sections/four-col-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__two-col-with-links.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__two-col-with-links.dark.webp) Columns with linksA bar whose menus open across the page: three columns beside a list of quick links. ](https://apogee.avaui.dev/docs/header-navigation-sections/two-col-with-links)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-four-col-slim-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-four-col-slim-with-footer.dark.webp) Floating four columns slim with footerA floating bar whose menus open one row of four links over a sign-up strip. ](https://apogee.avaui.dev/docs/header-navigation-sections/floating-four-col-slim-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__four-col-slim-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__four-col-slim-with-footer.dark.webp) Four columns slim with footerA bar whose menus open across the page: one row of four links over a sign-up strip. ](https://apogee.avaui.dev/docs/header-navigation-sections/four-col-slim-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__blog-posts-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__blog-posts-with-footer.dark.webp) Blog posts with footerA bar whose menus open across the page: nine blog posts over two buttons. ](https://apogee.avaui.dev/docs/header-navigation-sections/blog-posts-with-footer)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__blog-posts-with-sidebar.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__blog-posts-with-sidebar.dark.webp) Blog posts with sidebarA bar whose menus open across the page: blog categories beside six posts. ](https://apogee.avaui.dev/docs/header-navigation-sections/blog-posts-with-sidebar)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-two-col-with-sidebar.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-two-col-with-sidebar.dark.webp) Floating two columns with sidebarA floating bar whose menus open two columns beside video tutorials, over two buttons. ](https://apogee.avaui.dev/docs/header-navigation-sections/floating-two-col-with-sidebar)[ ![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-blog-posts-with-footer.light.webp)![](https://apogee.avaui.dev/thumbs/header-navigation-sections__floating-blog-posts-with-footer.dark.webp) Floating blog posts with footerA floating bar whose menus open nine blog posts over two buttons. ](https://apogee.avaui.dev/docs/header-navigation-sections/floating-blog-posts-with-footer) ## Related [ NavbarA responsive site header that collapses its links into a mobile panel below the md breakpoint. ](https://apogee.avaui.dev/docs/navbar)[ 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. ](https://apogee.avaui.dev/docs/nav-dropdown)[ NavLinkA navigation link that auto-detects and styles the current route, with prefix matching, external links and a collapsible NavGroup. ](https://apogee.avaui.dev/docs/nav-link)