Navbar

data-navbar on the page's top bar folds the nav behind a Menu button under 560px. Above that width it is an ordinary top bar.

Basic

<header data-navbar>
  <a href="/">Desk</a>
  <nav aria-label="Pages">
    <a href="/" aria-current="page">Overview</a>
    <a href="/mail">Mail</a>
    <a href="/code">Code</a>
    <a href="/calendar">Calendar</a>
  </nav>
  <menu>
    <li><button data-theme-toggle data-variant="line" data-size="sm">Dark</button></li>
  </menu>
</header>

Narrow the window past 560px and a Menu button appears after the brand; Escape closes the nav and returns focus to the button.

Notes

• s72.js builds the button, gives the nav an id if it has none, and keeps aria-expanded and aria-controls in step.
• The breakpoint is the same 560px the stylesheet uses, so the button and the layout never disagree.
• The folded nav stacks its links down the page rather than scrolling sideways.
• Without the script the nav stays open, so the links are never lost.