Navbar

Sticky application bar with a scroll-driven shadow.

Source: src/stylus/components/navbar.styl

Default

.navbar is a sticky container: it pins to the top and animates its shadow with animation-timeline: scroll(). It does not lay out its own contents — compose them with the layout and .gap-* utilities, as here. (.nav is a different component: the vertical list used by the off-canvas menu, not a horizontal bar.)

Acme Docs API 
<div class="navbar">
  <div class="flex flex-middle flex-between padding-md">
    <strong>Acme</strong>
    <span class="flex flex-middle gap-md">
      <a href="#navbar">Docs</a>
      <a href="#navbar">API</a>
    </span>
  </div>
</div>