Breadcrumb

Indicate the current page’s location within a navigational hierarchy.
<!-- Basic example -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products list</a></li>
    <li class="breadcrumb-item active" aria-current="page">Single product</li>
  </ol>
</nav>

<!-- Home icon -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb align-items-center">
    <li class="breadcrumb-item">
      <a href="#" class="d-flex" aria-label="Home">
        <i class="ci-home fs-base"></i>
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Products list</a></li>
    <li class="breadcrumb-item active" aria-current="page">Single product</li>
  </ol>
</nav>

<!-- Home icon + text -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#" class="d-flex align-items-center">
        <i class="ci-home fs-base me-2"></i>
        Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Products list</a></li>
    <li class="breadcrumb-item active" aria-current="page">Single product</li>
  </ol>
</nav>