Components
Breadcrumb
A breadcrumb shows the current page location inside a parent page hierarchy. It is useful on blog, detail, category, and nested content pages.
Basic structure
Bootstrap breadcrumb classes are defined in assets/css/core.css. Use an ordered list for the breadcrumb path and mark the current page with aria-current="page".
| Part | Class | Use |
|---|---|---|
| List wrapper | .breadcrumbs | Creates the inline breadcrumb list. |
| List item | .breadcrumb-item | Styles each breadcrumb item. |
| Active item | .breadcrumb-item.active | Marks the current page. |
<ol class="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Blog</a></li>
<li class="breadcrumb-item active" aria-current="page">
<span>Article title</span>
</li>
</ol>Basic structure
Tailwind breadcrumb classes are defined in src/assets/css/input.css. Use an ordered list for the breadcrumb path and mark the current page with aria-current="page".
| Part | Class | Use |
|---|---|---|
| List wrapper | .breadcrumbs | Creates the inline breadcrumb list. |
| List item | .breadcrumb-item | Styles each breadcrumb item. |
| Active item | .breadcrumb-item.active | Marks the current page. |
<ol class="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Blog</a></li>
<li class="breadcrumb-item active" aria-current="page">
<span>Article title</span>
</li>
</ol>