Breadcrumb
Overview
Use the .bsk-breadcrumb class with a list of navigation items to indicate the current page’s location within a
hierarchy.
Each navigation item must use an <a> element, except for the last item.
For assistive technologies, all navigation elements should use a role=navigation attribute on an element which wraps
around the element using the .bsk-nav class.
Variants
Default breadcrumb
<nav role="navigation">
<ol class="bsk-breadcrumb">
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 2</a></li>
<li class="bsk-active"><span class="bsk-visually-hidden">(current)</span>Level 3</li>
</ol>
</nav>States
Active item
Add the .bsk-active class to the drop-down menu item currently active, to highlight where the end user is in the site.
Make sure to include a <span class="bsk-visually-hidden">(current)</span> element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.
<nav role="navigation">
<ol class="bsk-breadcrumb">
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 2</a></li>
<li class="bsk-active"><span class="bsk-visually-hidden">(current)</span>Level 3</li>
</ol>
</nav>