Breadcrumbs

A breadcrumb is a simple, purely-CSS trail of links showing a visitor where the current page sits inside a site's hierarchy — no JavaScript is involved anywhere in this component. Bootstrap 5 also introduces a genuinely new customization point here that didn't exist in earlier versions: the separator between items is controlled by a CSS custom property, so you can restyle it without touching any pseudo-element CSS yourself. We'll use it to build a breadcrumb for a TrailMap trail detail page.

1. The Basic .breadcrumb Markup

Breadcrumbs are an ordered list (<ol>, since order matters) with the .breadcrumb class, where each step is a .breadcrumb-item. 

<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>

Wrapping the list in a <nav aria-label="breadcrumb"> tells assistive technology this whole block is a navigation landmark, not just a random list.

2. The .active Current-Page Item

The last item — the page the visitor is actually on — is never a link. It gets .breadcrumb-item.active (styled as muted, non-interactive text) plus aria-current="page", which tells screen readers explicitly that this is the current location, not just visually grey text. 

<!-- Correct: the current page is NOT a link -->
<li class="breadcrumb-item active" aria-current="page">Eagle Peak Trail</li>
Note: Every item before the last one SHOULD be a real link the user can click to go back up the hierarchy — that's the entire point of a breadcrumb trail.

3. Bootstrap 5's Custom Separator: --bs-breadcrumb-divider

In older Bootstrap versions, changing the "/" separator between breadcrumb items meant overriding a content rule on a ::before pseudo-element in your own CSS. Bootstrap 5 exposes that same value as a CSS custom property, --bs-breadcrumb-divider, so you can override it inline on the list itself — a small change, but a real Bootstrap-5-only feature. 

<!-- Default divider is "/" -->
<ol class="breadcrumb">...</ol>

<!-- Custom divider: a right-pointing angle quote -->
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '»';">...</ol>

<!-- Custom divider: none at all -->
<ol class="breadcrumb" style="--bs-breadcrumb-divider: none;">...</ol>

Or set it once in your own stylesheet so every breadcrumb on the site picks it up:

.breadcrumb {
  --bs-breadcrumb-divider: '»';
}
Tip: Because it's a plain CSS variable, you can also change it responsively or per-theme with a media query or a class toggle — no Sass recompile needed for a simple divider swap.

4. Worked Example — TrailMap Breadcrumb

The breadcrumb for the Eagle Peak Trail detail page: Home › Trails › Eagle Peak Trail, using the custom angle-quote divider from above. 

<nav aria-label="breadcrumb">
  <ol class="breadcrumb" style="--bs-breadcrumb-divider: '»';">
    <li class="breadcrumb-item"><a href="trailmap-home.php">Home</a></li>
    <li class="breadcrumb-item"><a href="trails.php">Trails</a></li>
    <li class="breadcrumb-item active" aria-current="page">Eagle Peak Trail</li>
  </ol>
</nav>

"Home" and "Trails" are clickable links that take a hiker back up the hierarchy; "Eagle Peak Trail" is plain text marked .active, since that's the page currently being viewed.

Next up: Pagination — splitting a long trail listing into pages, with the same list-of-items pattern you just used here.