Breadcrumb

Indicate the current page’s location within a navigational hierarchy.

Dark (default) version

Result
HTML

<!-- Basic example -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <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>

<!-- Home icon -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-alt">
    <li class="breadcrumb-item">
      <a href="#">
        <i class="ci-home"></i>
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Light version

Result
HTML

<!-- Basic example -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-light">
    <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>

<!-- Home icon -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-alt breadcrumb-light">
    <li class="breadcrumb-item">
      <a href="#">
        <i class="ci-home"></i>
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>