Navbar

Top navigation bar with brand, links, actions, and mobile hamburger.

Default navbar

The navbar is a flexible top-bar with a brand, nav links, and an optional actions slot.

<nav class="na-navbar">
  <div class="na-navbar-inner">
    <a href="/" class="na-navbar-brand">Brand</a>
    <div class="na-navbar-nav">
      <a href="/" class="na-navbar-link na-active">Home</a>
      <a href="/components" class="na-navbar-link">Docs</a>
    </div>
    <div class="na-navbar-spacer"></div>
    <div class="na-navbar-actions">
      <a href="/signup" class="na-button na-button-primary na-button-s">Sign up</a>
    </div>
  </div>
</nav>

Dark navbar

<nav class="na-navbar na-navbar-dark">
  ...
</nav>

Sticky navbar

<!-- Sticky to viewport top on scroll -->
<nav class="na-navbar na-navbar-sticky">
  ...
</nav>

Class reference

Class	Description
`na-navbar`	Base navbar wrapper
`na-navbar-inner`	Flex row container (width-constrained)
`na-navbar-brand`	Brand/logo link
`na-navbar-nav`	Horizontal nav link list
`na-navbar-link`	Individual nav link
`na-navbar-spacer`	Pushes actions to the right (`flex:1`)
`na-navbar-actions`	Right-side slot (buttons, avatars…)
`na-navbar-toggle`	Mobile hamburger button
`na-navbar-sticky`	position:sticky; top:0
`na-navbar-transparent`	No background
`na-navbar-dark`	Dark surface
`na-active`	Active link state