Loading...
Around UI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Breadcrumb

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

Bootstrap docs 

<!-- 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">
    <li class="breadcrumb-item">
      <a href="#" aria-label="Home"><i class="ai-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="#">
        <i class="ai-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>