Working headers, not header screenshots#
A header is the component every page needs and the one most libraries ship as a static picture. These five are built as working navigation, with real active states, a mobile experience that was designed rather than hidden, and keyboard behaviour handled by the underlying Base UI primitives instead of reimplemented.
Five navbars, five different jobs#
- Navbar 1 (simple): logo, links, one solid call to action, and a sheet menu on mobile. Hierarchy comes from spacing and weight alone, with no accent surface except the button.
- Navbar 2 (mega menu): Product, Solutions and Resources flyouts built on shadcn/ui Navigation Menu, each item an icon, label and short description, plus an optional featured card. On mobile every flyout becomes an accordion group so no destination disappears.
- Navbar 3 (floating): transparent and full width over the hero, condensing into a rounded floating bar with a blurred background once the page scrolls. An IntersectionObserver sentinel drives the state, so it never flickers at the threshold.
- Navbar 4 (storefront): utility bar, category links, collapsing search, account menu, and a cart button whose count is real state feeding a drawer with quantity steppers, a running subtotal and an empty state.
- Navbar 5 (docs): a documentation header whose secondary row collapses into a breadcrumb on scroll, with a real ⌘K search palette, version switching and a persistent sidebar sheet — the same header our own
/docssite runs on.
Types of site header#
- Simple: a logo, a short link set and one action, where the menu fits without grouping.
- Mega menu: grouped flyouts with descriptions, once there are more destinations than a dropdown can hold legibly.
- Floating: transparent over a full-bleed hero, condensing on scroll, for a marketing page built around one image.
- Storefront: a utility bar, categories, search, an account menu and a cart, which is four jobs a marketing header never has.
- Documentation: a secondary row that collapses into a breadcrumb, with search and version switching.
When a mega menu is the right answer#
Past about seven top-level destinations, a plain menu stops being scannable and a dropdown of fifteen items is worse. A mega menu groups them under headings and gives each item a one-line description, which is what lets somebody choose without opening three of them first. Below seven, it is overhead nobody needed.
Sticky headers and the space they cost#
A sticky header keeps navigation reachable and permanently takes a strip of a phone screen. The floating variant is the compromise: full height over the hero, condensed once the page scrolls, so it costs less exactly when there is more content to read. Whatever you choose, give in-page anchor targets a scroll margin, or every jump link lands with its heading hidden behind the header.
Mobile navigation is designed, not hidden#
Every variant states its mobile pattern. Navigation collapses into a sheet with larger touch targets, links close the sheet on navigate, calls to action are pinned as full-width actions at the bottom, and grouped menus become accordions rather than being dropped from the markup entirely.
Keyboard and screen reader behaviour#
Headers use real header and nav landmarks with labels, the current page carries aria-current="page", focus rings are left intact, and overlays trap focus and close on Escape through Base UI. The storefront cart announces count changes through a polite live region instead of relying on the badge alone.
Compose the header into a full page#
Put a hero section directly below the header and a footer at the end of the page, and add an announcement banner above the header when you have something to launch. The storefront variant is built to sit on top of the storefront hero.
Header code you can actually edit#
React, TypeScript and Tailwind CSS, composed from shadcn/ui Button, Sheet, Navigation Menu, Accordion, Badge, Input and Dropdown Menu. Menu contents live in a typed data file, so the whole information architecture changes in one place.
