Breadcrumb components

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Default breadcrumb
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
  1. Home
  2. Library
  3. Programming
  4. Active
 <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item"><a href="#">Programming</a></li>
    <li class="breadcrumb-item active">Active</li>
</ol>
Use custom divider
Dividers are automatically added in CSS through ::after and content.
They can be changed by modifying a local CSS custom property --breadcrumb-divider if needed.
  1. Home
  2. Library
  3. Programming
  4. Active
 <ol  style="--breadcrumb-divider: '/'" class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item"><a href="#">Programming</a></li>
    <li class="breadcrumb-item active">Active</li>
</ol>
Combine with card component
Alternatively, you can also use the breadcrumb components with other components like cards to have a solid background.
  1. Home
  2. Library
  3. Programming
  4. Active
 <div class="card rounded-lg">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">
                <ion-icon name="home"></ion-icon>
                Home
            </a>
        </li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item"><a href="#">Programming</a></li>
        <li class="breadcrumb-item active">Active</li>
    </ol>
</div>