The fixed top bar of a site — brand logo, primary navigation, key actions, and an optional search overlay. Below 810px it collapses into a two-level mobile menu.
Pass nav-links as a JSON array of
{ label, href };
primary-label /
primary-href set the CTA. (Framed here — in
production it spans the viewport and is fixed to the top.)
Add secondary-label /
secondary-href for a lower-emphasis action beside
the primary CTA — typically “Sign in”.
nav-align positions the links —
center (default),
leading, or
trailing.
Set show-search to reveal the search icon, and
provide pages to match against via the
.searchItems property (an array of
{ label, href, group }). Click the magnifier to open
the overlay.
site-wide navigation, marketing-site headers, and app top bars. Pairs with the Footer at the bottom of the page.
active-href / active-section so the current page reads as selected.show-search without supplying .searchItems.<header> (banner) with a <nav aria-label="Main"> for primary navigation.active-href gets aria-current="page".role="search" region with a combobox input and listbox results — ↓/↑ move through options, Enter follows, Esc closes.aria-expanded; section rows use aria-haspopup for the second-level panel.role="switch" with aria-checked and an “Toggle theme” label.position: fixed, give page content top padding so nothing hides behind it.