Breadcrumb

The breadcrumb is a navigation component which can be used to indicate the current page's location within a navigational hierarchy.

Example #

A breadcrumb can be created by adding the .breadcrumb class to an ordered or unordered list with list items. The dividers are automatically added in CSS using ::before and content.

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

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

<nav aria-label="breadcrumb">
  <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 active" aria-current="page">Data</li>
  </ol>
</nav>

The .active class on the .breadcrumb-item indicates the current page.

Dividers #

The divider can be changed by modifying the local CSS custom property --bs-breadcrumb-divider. The property can also be set to '' to remove dividers altogether.

HTML

<!-- Overridden divider -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<!-- No divider -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Information

Please note, you can also embed an inlined SVG as the value of the CSS property: --bs-breadcrumb-divider: url(...). In that case, you will need to make sure to escape the reserved characters from the inlined SVG for this to work properly.

Accessibility #

Since breadcrumbs provide navigation, it's a good idea to add meaningful labels such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

See the ARIA Authoring Practices Guide Breadcrumb Pattern (opens in new tab) for more information.

Up next

Buttons

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.