Silicon Silicon UI Kit
 Buy now

Breadcrumb

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

Bootstrap docs

Example

<!-- Basic example -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" aria-label="Home">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="#"><i class="bx bx-home-alt fs-lg"></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="bx bx-home-alt fs-lg me-1"></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