Navigation Elements: Breadcrumbs

Indicate the level of the site where a user is currently at. Arrows are added via CSS and can be switched out for other characters (e.g., colons, slashes). 


<nav class="nav nav--breadcrumbs" role="navigation" aria-label="Breadcrumbs">
    <span><a href="#">Root</a></span>
    <span><a href="#">Segment 1</a></span>
    <span><a href="#">Segment 2</a></span>
    <span><a href="#">Segment 3</a></span>
    <span class="nav--breadcrumbs__here">Here</span>
</nav>