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.

Design

  1. Home
  1. Home
  2. Data
  1. Home
  2. Normal
  3. Disabled
  4. Normal
  5. Data
				
<!-- Breadcrumbs -->
<ol class="breadcrumb">
    <li>
        <a href="urlToLink">Home</a>
    </li>
    <li>
        <a href="urlToLink">Normal</a>
    </li>
    <li class="disabled">
        <a href="" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
    <li>
        <a href="urlToLink">Normal</a>
    </li>
    <li class="active">Data</li>
</ol>