Breadcrumb
Shows where this page sits, with links back up.
Usage
CSS draws the separator between each li. The current
page is a span with aria-current="page".
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Orders</a></li>
<li><span aria-current="page">#100482</span></li>
</ol>
</nav>Attributes
| Attribute / element | Values | Description |
|---|---|---|
.breadcrumb |
nav |
Add aria-label="Breadcrumb" |
ol > li |
child | One step each. The separator is added for you. |
a |
in li |
Link to a parent page. Gray, darker on hover. |
aria-current |
page |
On the last span: the current page |