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> <a href="path-to-page/home.html">Home</a> </li> <li> <a href="path-to-page/normal.html">Normal</a> </li> <li class="disabled"> <a href="path-to-page/disabled.html" tabindex="-1" aria-disabled="true"> Disabled </a> </li> <li> <a href="path-to-page/normal.html">Normal</a> </li> <li class="active">Data</li> </ol>