Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

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