Breadcrumbs
Where you are in a hierarchy, with links back up.
Basic
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/breadcrumbs.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-breadcrumbs | On a <nav>, containing an <ol>. |
Accessibility
- <nav aria-label="Breadcrumb">, an ordered list, and aria-current="page" on the last item.