AroundUI 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="#"><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>
// Basic example
nav(aria-label="breadcrumb")
  ol.breadcrumb
    li.breadcrumb-item: a(href="#")
      | Home
    li.breadcrumb-item: a(href="#")
      | Products list
    li(aria-current="page").breadcrumb-item.active
      | Single product

// Home icon
nav(aria-label="breadcrumb")
  ol.breadcrumb
    li.breadcrumb-item
      a(href="#"): i.ai-home.fs-base
    li.breadcrumb-item: a(href="#")
      | Products list
    li(aria-current="page").breadcrumb-item.active
      | Single product

// Home icon + text
nav(aria-label="breadcrumb")
  ol.breadcrumb
    li.breadcrumb-item
      a(href="#")
        i.ai-home.fs-base.me-2
        | Home
    li.breadcrumb-item: a(href="#")
      | Products list
    li(aria-current="page").breadcrumb-item.active
      | Single product