Navbar

Responsive top navigation bar with mobile hamburger toggle.

Basic Navbar

Preview
<nav class="nano-navbar" data-controller="nanoui-navbar">
  <a class="nano-navbar__brand" href="#">MyApp</a>
  <button class="nano-navbar__toggle" data-action="nanoui-navbar#toggle" aria-label="Toggle navigation">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <div class="nano-navbar__links" data-nanoui-navbar-target="menu">
    <a class="nano-navbar__link nano-navbar__link--active" href="#">Home</a>
    <a class="nano-navbar__link" href="#">Features</a>
    <a class="nano-navbar__link" href="#">Pricing</a>
  </div>
  <div class="nano-navbar__actions">
    <button class="nano-btn nano-btn--sm">Sign In</button>
  </div>
</nav>
Preview
<nav class="nano-navbar nano-navbar--sticky" data-controller="nanoui-navbar">
  <a class="nano-navbar__brand" href="#">MyApp</a>
  <!-- ... same content ... -->
</nav>

<!-- Modifier: nano-navbar--sticky keeps the navbar fixed to the top -->
<!-- Requires Stimulus controller: nanoui-navbar -->