Skip to content
Airframe

Navbar

Main navigation bar for site-wide navigation. Brand on the start edge, links in af-navbar-nav, trailing controls in af-navbar-actions.

<nav class="af-navbar" aria-label="Site">
  <a href="#" class="af-navbar-brand">Brand</a>
  <ul class="af-navbar-nav">
    <li>
      <a href="#" aria-current="page">Home</a>
    </li>
    <li>
      <a href="#">Docs</a>
    </li>
    <li>
      <a href="#">Blog</a>
    </li>
  </ul>
  <div class="af-navbar-actions">
    <button type="button" class="af-btn af-is-sm">Sign in</button>
  </div>
</nav>

Markup

Section titled “Markup”

af-navbar is a flex row. Wrap a container when the bar should align with page content — the bar drops its own inline padding in that case.

Actions

Section titled “Actions”

af-navbar-actions is the trailing cluster (sign in, search, account). It sits on the end edge (margin-inline-start: auto). The example above already includes it.

Sticky

Section titled “Sticky”

af-is-sticky sets position: sticky; top: 0 and --af-z-sticky. The bar already has an opaque surface.

<nav class="af-navbar af-is-sticky">
  <a href="#" class="af-navbar-brand">Brand</a>
  <ul class="af-navbar-nav">
    <li>
      <a href="#">Home</a>
    </li>
  </ul>
</nav>

Mobile

Section titled “Mobile”

When the navbar contains Nav Collapse, af-navbar-nav hides below md (768px) and the collapse control hides from md up. Put the toggle in af-navbar-actions. af-is-compact keeps the hamburger chrome at any width. af-is-overlay on the collapse fills the viewport below the bar.

<nav class="af-navbar af-is-compact">
  <a href="#" class="af-navbar-brand">Brand</a>
  <ul class="af-navbar-nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Docs</a>
    </li>
  </ul>
  <div class="af-navbar-actions">
    <details class="af-nav-collapse">
      <summary class="af-btn af-is-sm">Menu</summary>
      <nav aria-label="Site">
        <ul>
          <li>
            <a href="#" aria-current="page">Home</a>
          </li>
          <li>
            <a href="#">Docs</a>
          </li>
        </ul>
      </nav>
    </details>
  </div>
</nav>

Without a collapse control, the inline nav stays visible on small screens.

Section titled “Related”