# Breadcrumbs · MIAN

Where you are in a hierarchy, with links back up.

- Id: `breadcrumbs` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/breadcrumbs
- Use for: breadcrumbs, where am i, category path.

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-breadcrumbs`: On a <nav>, containing an <ol>.

## Accessibility

- <nav aria-label="Breadcrumb">, an ordered list, and aria-current="page" on the last item.

## Examples

### Basic

```html
<nav class="mn-breadcrumbs" aria-label="Breadcrumb"><ol>
  <li><a href="#breadcrumbs"><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 class="mn-sr-only">Home</span></a></li>
  <li><a href="#breadcrumbs">Components</a></li>
  <li><a href="#breadcrumbs">Navigation</a></li>
  <li><span aria-current="page">Breadcrumbs</span></li>
</ol></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/breadcrumbs/source