Breadcrumbs

Breadcrumbs are used to indicate the current page's location within a navigational hierarchy. Read more about breadcrumbs and information architecture in the UX Guidelines.

Use when:

The user shall be able to see where they have been and easily navigate back to previous displayed windows/pages.

<ol class="breadcrumb">
    <li class="active">Home</li>
</ol>
<ol class="breadcrumb">
    <li><a href="#!">Home</a></li>
    <li class="active">Data</li>
</ol>
<ol class="breadcrumb">
    <li><a href="#!">Home</a></li>
    <li><a href="#!">Normal</a></li>
    <li class="disabled"><a href="#!" tabindex="-1" aria-disabled="true">Disabled</a></li>
    <li><a href="#!">Normal</a></li>
    <li class="active">Data</li>
</ol>