Top Nav
Top Nav is the page header: a brand, the main links, and account actions. Its links collapse into a native popover menu on narrow screens, with no JavaScript.
Public web API
One root hook on a <header>, with a brand link, a named <nav>, and an actions slot.
<header data-bitsy-top-nav data-bitsy-sticky>
<a data-bitsy-top-nav-brand href="/">Atlas</a>
<nav aria-label="Main">
<button data-bitsy-button data-bitsy-top-nav-toggle type="button"
commandfor="main-links" command="toggle-popover" aria-label="Menu">…</button>
<ul data-bitsy-top-nav-links popover id="main-links">
<li><a href="/" aria-current="page">Overview</a></li>
<li><a href="/projects">Projects</a></li>
</ul>
</nav>
<div data-bitsy-top-nav-actions>…</div>
</header>- Mark the current link with
aria-current="page". There is no active class. - Keep one list of links. The same
<ul popover>shows inline when wide and as a panel when narrow. - Always set
aria-label="Main"on the<nav>and a text name on the brand link.
Variants
A logo-only brand with a hidden text name, and a restyled bar using only hooks.
Narrow screens
Resize the window below 48rem. The links hide and the menu button opens them as a panel under the bar. Escape and an outside click close it.
Foundation versus Bit
The foundation has no header bar layout, current-link style, or narrow-screen collapse. data-bitsy-top-nav adds those, ships no JavaScript, and defines only --bitsy-top-nav-* hooks.