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
					


<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>