<nav class="breadcrumb" role="navigation" aria-label="Breadcrumb">
<ol class="breadcrumb__list">
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link">Home</a>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link">Brands</a>
</li>
<li class="breadcrumb__item" aria-current="page">Lee</li>
</ol>
</nav>
| Selector |
|
Description |
role="navigation" |
Required |
On .breadcrumb. For a11y |
aria-label="Breadcrumb" |
Required |
On .breadcrumb. For a11y. A translatable string. So for the Dutch this can be aria-label="kruimelpad". |
aria-current="page" |
Required |
On .breadcrumb__item. For a11y. A token with value: page. |
On dark backgrounds
<nav class="breadcrumb breadcrumb--light" role="navigation" aria-label="Breadcrumb">
...
</nav>
| Selector |
|
Description |
.breadcrumb--light |
Required |
Modifier. Changes the font color to a lighter one. |