Breadcrumbs
Use breadcrumbs to help users navigate by showing them their location in the website.
Example
Markup: components/breadcrumbs/breadcrumbs.html
<nav role="navigation" aria-label="Breadcrumbs" id="breadcrumbs">
<ol class="breadcrumbs">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">Home</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">Super Hero Signup</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">Costume Selection</a>
</li>
<li class="breadcrumbs__item">Assignment</li>
</ol>
</nav>
Source:
components/breadcrumbs/_breadcrumbs.scss, line 1