Breadcrumb
A breadcrumb is a type of navigation that reveals the user's location on a site.
Usage
Place the breadcrumb directly underneath the header navigation to ensure it seamlessly runs across the bottom of the navigation bar.
Each subsequent component must be a list item with a link and the current location must be just a list item.
Enter the information manually for each page, or use a sitemap to dynamically set up the breadcrumb trail for each page.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-label="Breadcrumb" |
Provide a label that describes the type of navigation provided in the |
aria-current="page" |
Applied to the last list item in the set to indicate that it represents the current page |
navigation-bar\breadcrumb.hbs
<nav class="slb-breadcrumb" aria-label="Breadcrumb">
<div class="slb-breadcrumb__content">
<ol class="slb-breadcrumb__list">
<li class="slb-breadcrumb__list-item"><a class="slb-breadcrumb__link" href="#">Home</a></li>
<li class="slb-breadcrumb__list-item"><a class="slb-breadcrumb__link" href="#">About</a></li>
<li class="slb-breadcrumb__list-item" aria-current="page">Vision</li>
</ol>
</div>
</nav>
Source:
components/_breadcrumb.scss