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>
Sticky Navbar
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 -->