Bootstrap Breadcrumbs

Breadcrumbs indicate the current page location within a navigational hierarchy. Bootstrap styles them with the .breadcrumb class. Separators are added automatically via CSS using the ::before pseudo-element.

Custom Separator

Override the default / separator by setting the --bs-breadcrumb-divider CSS custom property on the .breadcrumb or a parent element, or via Sass at build time.

Example

<!-- Basic breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
  </ol>
</nav>

<!-- Custom separator with CSS variable -->
<nav aria-label="breadcrumb"
     style="--bs-breadcrumb-divider: '>';">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active">Page</li>
  </ol>
</nav>

HTML

Full Editor

Pro Tip

Always wrap breadcrumbs in a <nav aria-label="breadcrumb"> and mark the current page with aria-current="page" for screen reader users.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned