Breadcrumbs

Overview

Breadcrumbs are created by adding a .breadcrumb class to an <ol> within a <nav> element. Each <li> within the list should have a class of .breadcrumb-item

The final list item should have an additional class of .active

For longer breadcrumb trails, use a .dropdown as one of your second list item to hold extra items within a dropdown menu.

Default

Sample Background

<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library </a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Breadcrumbs with Icons

Sample Background

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><i class="modus-icons notranslate" aria-hidden="true">dashboard</i><a href="#">Home</a></li>
    <li class="breadcrumb-item"><i class="modus-icons notranslate" aria-hidden="true">local_library</i><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page"><i class="modus-icons notranslate" aria-hidden="true">clipboard</i>Data</li>
  </ol>
</nav>

Accessible Option

For accessible underlined links add the .breadcrumb-underline modifier to the breadcrumb list.

Sample Background

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-underline mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library </a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Behaviors

For implementations with large numbers of sub-directories, make use of dropdown that appears on click of ellipses as shown in the example below

Sample Background

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-underline mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item">
      <div class="dropdown">
        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...</button>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">Link1</a>
          <a href="#" class="dropdown-item">Link2</a>
          <a href="#" class="dropdown-item">Link3</a>
        </div>
      </div>
    </li>
    <li class="breadcrumb-item"><a href="#">Link1</a></li>
    <li class="breadcrumb-item active" aria-current="page">Current Page</li>
  </ol>
</nav>