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>

Eyebrow

Pagination