Bootstrap docs

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

Top