Breadcrumbs

The Breadcrumbs component provides a clear horizontal navigation trail showing the current page's position within a website's hierarchy. It supports a standard simple line layout and a premium chevron-arrow layout with step badges and icons.

Default Style

Arrow Style

<!-- 1. Default Style Breadcrumbs -->
<ul class="breadcrumbs">
    <li class="page-item"><a href="#">🏠 Home</a></li>
    <li class="page-item"><a href="#">Library</a></li>
    <li class="page-item"><a href="#">Data</a></li>
    <li class="page-item active"><a>Bootstrap</a></li>
</ul>

<!-- 2. Arrow Style Breadcrumbs -->
<ul class="breadcrumbs arrow">
    <li class="page-item">
        <a href="#"><span class="step-num">1</span> 🏠 Home</a>
    </li>
    <li class="page-item">
        <a href="#"><span class="step-num">2</span> Library</a>
    </li>
    <li class="page-item">
        <a href="#"><span class="step-num">3</span> Data</a>
    </li>
    <li class="page-item active">
        <a><span class="step-num">4</span> Bootstrap</a>
    </li>
</ul>

Structure & Styling

The breadcrumb wrapper uses an unordered list element with class breadcrumbs.
Each navigation step is defined as an <li class="page-item"> containing an anchor tag.
Apply the class active to the last list item to highlight the current page. Active items disable pointer events automatically.
Add class arrow to the breadcrumbs list to enable overlapping arrow indicators.
Use a child span with class step-num to add circular numbers within the Arrow list items.