Navbar

Wrap a nav in <header class="navbar">. The first list holds the brand. The list with popover holds the links, and the .nav-toggle button opens it on small screens.

Mobile and desktop

The navbar measures its own nav, not the screen. When the nav is narrower than 48rem, the links hide behind the menu button and open as a full width panel under the bar. That is why the example above shows the menu button here: the preview is narrower than 48rem. Resize the window to see both layouts on this site's own navbar.

Tapping outside the panel or pressing Esc closes it. A link to another page closes it by loading that page. A link to a section of the same page leaves it open, so close it in its click handler with menu.hidePopover().

Sticky

.sticky keeps the bar at the top of the screen while the page scrolls, the way this site's navbar works. On phones with a notch the bar also fills the area under the status bar.

<header class="navbar sticky">...</header>

Colors

A color class fills the bar. Links switch to the bar's text color.

Current page and icon buttons

aria-current="page" marks the link of the page you are on. A button with aria-label and no class, such as a theme toggle, is drawn as a plain icon.

Variables