Navbar
A top bar with brand, links and actions. Sticky and translucent; collapses behind a menu button on small screens.
Responsive
<header class="mn-navbar mn-navbar-collapse" style="border:1px solid var(--mn-border);border-radius:var(--mn-radius-box)">
<a class="mn-navbar-brand" href="#navbar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5Z"/><path d="m3 13 9 5 9-5"/></svg> Acme</a>
<nav aria-label="Main"><ul class="mn-navbar-nav">
<li><a class="mn-navbar-link" href="#navbar" aria-current="page">Dashboard</a></li>
<li><a class="mn-navbar-link" href="#navbar">Projects</a></li>
<li><a class="mn-navbar-link" href="#navbar">Team</a></li>
</ul></nav>
<div class="mn-navbar-end">
<button class="mn-btn mn-btn-ghost mn-btn-icon" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg></button>
<span class="mn-avatar mn-avatar-sm mn-primary">AP</span>
<button class="mn-btn mn-btn-ghost mn-btn-icon mn-navbar-toggle" aria-label="Menu" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/navbar.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-navbar | Bar. |
| mn-navbar-sticky · mn-navbar-collapse | Stick to top · collapse links on mobile. |
| mn-navbar-brand · mn-navbar-nav · mn-navbar-link · mn-navbar-end | Parts. |
| mn-navbar-toggle | Mobile menu button; mian.js toggles it. |
Accessibility
- Wrap links in <nav aria-label>. Mark the current page with aria-current="page". The toggle updates aria-expanded.