# Sidebar · MIAN

Vertical application navigation with groups, icons and badges.

- Id: `sidebar` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/sidebar
- Use for: app sidebar, side navigation, admin menu, docs navigation.

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

## Classes

- `mn-sidebar`: On a <nav>.
- `mn-sidebar-group · mn-sidebar-heading · mn-sidebar-link`: Parts. aria-current="page" marks the active link.

## Accessibility

- Give the <nav> an aria-label. Group headings are text; if they collapse, use <details>.

## Examples

### App sidebar

```html
<nav class="mn-sidebar" aria-label="App" style="max-width:15rem">
  <div class="mn-sidebar-group">
    <a class="mn-sidebar-link" href="#sidebar" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8"/><path d="M5 10v10h14V10"/></svg> Dashboard</a>
    <a class="mn-sidebar-link" href="#sidebar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13h5l1.5 2h5L16 13h5"/><path d="M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z"/></svg> Inbox <span class="mn-badge mn-badge-sm">4</span></a>
    <a class="mn-sidebar-link" href="#sidebar"><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 20V10M10 20V4M16 20v-7M22 20H2"/></svg> Reports</a>
  </div>
  <div class="mn-sidebar-group">
    <div class="mn-sidebar-heading">Workspace</div>
    <a class="mn-sidebar-link" href="#sidebar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7M18 13.5a6.5 6.5 0 0 1 3.5 6.5"/></svg> Team</a>
    <a class="mn-sidebar-link" href="#sidebar"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --> Settings</a>
  </div>
</nav>
```

## Source

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