Top bar

A <header> as a direct child of <body> is the page's top bar. Its first <a> is the brand and a <nav> holds the links.

Basic

<header>
  <a href="/"><strong>atlas</strong></a>
  <nav aria-label="Sections">
    <a href="/guide">Guide</a>
    <a href="/reference" aria-current="page">Reference</a>
    <a href="/changelog">Changelog</a>
    <button data-theme-toggle data-variant="line" data-size="sm">Dark</button>
  </nav>
</header>

aria-current="page" marks the open page with an underline.

Notes

• The bar carries its own side gutter, so a reset on <body> cannot strip the page margin.
• Under 560px the nav scrolls sideways inside itself rather than wrapping.
• A <menu> after the nav holds the controls that are buttons, like a theme toggle or an account popover.
• Add data-navbar to fold the nav behind a Menu button on phones; see Navbar.