Design Guide – v. 9.1.0

Breadcrumb

Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.

Basic usage

Add class .breadcrumb to a containing <ol> element and nest a <a> or <span> element inside the <li> elements.

HTML
1
2
3
4
5
6
7
8

<nav>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Gadgets</a></li>
        <li><span>Gadget #1</span></li>
    </ol>
</nav>

Disable a breadcrumb

To disable a breadcrumb element, simply use a <span> element within the <li> element (will not work for last-child).

HTML
1
2
3
4
5
6
7
8

<nav>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><span>Products</span></li>
        <li><a href="#">Gadgets</a></li>
        <li><span>Gadget #1</span></li>
    </ol>
</nav>