# Dock · MIAN

A bottom navigation bar for mobile apps and compact layouts, floating or in the page.

- Id: `dock` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/dock
- Use for: bottom navigation, mobile tab bar, app dock.

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-dock`: The bar (a <nav>).
- `mn-dock-item`: A link or button with an icon and a label; aria-current="page" marks the current one.
- `mn-dock-fixed`: Float it at the bottom of the viewport.
- `mn-dock-compact`: Icons only (keep aria-labels).

## Accessibility

- Use <nav aria-label="…">. Keep visible labels where you can; with mn-dock-compact every item needs an aria-label.
- Targets are at least 48 × 48 px.

## Examples

### Dock

```html
<nav class="mn-dock" aria-label="App" style="max-width:26rem;margin:auto">
  <a class="mn-dock-item" href="#" 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><span>Home</span></a>
  <a class="mn-dock-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span>Search</span></a>
  <a class="mn-dock-item" href="#"><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><span>Inbox</span></a>
  <a class="mn-dock-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span>Profile</span></a>
</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/dock/source