# Navbar · MIAN

A top bar with brand, links and actions. Sticky and translucent; collapses behind a menu button on small screens.

- Id: `navbar` · Category: Navigation · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/navbar
- Use for: app top bar, navigation bar, sticky header.
- Alternatives: site-header.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### Responsive

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/navbar/source