Navbar

The navbar (.navbar) is a full-width top-level navigation bar containing a brand/logo, a primary link list, and trailing actions, with a built-in responsive collapse into a hamburger menu on narrow viewports. Its layout splits into .navbar-inner, .navbar-brand, .navbar-nav, and .navbar-actions.

<nav class="navbar navbar-contained navbar-mobile-md" aria-label="Primary">
  <div class="navbar-inner">
    <a class="navbar-brand" href="/"><span class="navbar-brand-name">Acme</span></a>
    <div class="navbar-nav">
      <ul class="navbar-links">
        <li><a class="navbar-link" href="/" aria-current="page">Home</a></li>
        <li><a class="navbar-link" href="/docs">Docs</a></li>
      </ul>
    </div>
    <div class="navbar-actions">
      <button type="button" class="btn btn-primary btn-sm"><span class="btn-label">Sign in</span></button>
    </div>
    <button type="button" class="navbar-toggle action-toggle-mobile" aria-expanded="false" aria-label="Menu">☰</button>
  </div>
  <div class="navbar-mobile-panel" hidden>
    <ul class="navbar-mobile-links">
      <li><a class="navbar-mobile-link" href="/" aria-current="page">Home</a></li>
      <li><a class="navbar-mobile-link" href="/docs">Docs</a></li>
    </ul>
  </div>
</nav>