Breadcrumbs#

Breadcrumbs are used as navigational hierarchies to indicate current location.

Add a container element with the breadcrumb class. And add child elements with the breadcrumb-item class. Breadcrumb items can have a disabled class to make the breadcrumb appear inactive.

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Settings</a>
  </li>
  <li class="breadcrumb-item disabled">
    <a href="#">Change avatar</a>
  </li>
</ul>