Breadcrumbs

A breadcrumb shows a visitor's location within a site hierarchy as a horizontal trail of links. It's the simplest navigation component in Bootstrap 4 — no jQuery required, just an ordered list and a couple of classes. We'll use one to show where a hiker is inside TrailMap: Home › Trails › Pacific Northwest › the current trail.

Base Markup: .breadcrumb and .breadcrumb-item

Breadcrumbs are marked up as an ordered list, since a location in a hierarchy has meaning as a sequence. The list carries .breadcrumb; each entry is an <li class="breadcrumb-item">.

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Trails</a></li>
  <li class="breadcrumb-item active" aria-current="page">Blue Ridge Overlook</li>
</ol>
Note: the final, current-page item drops the <a> entirely — it isn't a link to itself — and instead gets .active plus aria-current="page" so assistive tech announces it as the current location.

The Separator: CSS ::before, Set via Sass

The little / between items isn't a character in your HTML — Bootstrap draws it with a CSS ::before pseudo-element on each .breadcrumb-item. In Bootstrap 4, that separator is baked in at build time from a Sass variable, $breadcrumb-divider:

// _variables.scss (Bootstrap 4 source)
$breadcrumb-divider: quote("/") !default;

To use a different separator — say, a right-pointing angle quote for TrailMap — you set this variable in your own Sass before importing Bootstrap's breadcrumb partial, then let your build step compile a fresh CSS file:

// your-custom.scss, compiled with the Sass CLI/webpack/etc.
$breadcrumb-divider: quote("\203A"); // ›
@import "node_modules/bootstrap/scss/bootstrap";
Bootstrap 4 vs Bootstrap 5: because $breadcrumb-divider is a Sass variable, changing it always requires recompiling Bootstrap's CSS — there's no way to override it by just editing your page's stylesheet. Bootstrap 5.1 later exposed the same thing as a live CSS custom property, --bs-breadcrumb-divider, which you can override with plain CSS and no rebuild at all. If you're on Bootstrap 4 and don't want to touch the Sass toolchain, the practical workaround is overriding the generated ::before content directly in your own stylesheet — more brittle, but no rebuild needed.

Full Worked Example: TrailMap Breadcrumb

The breadcrumb trail shown at the top of a trail-detail page, four levels deep.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Trails</a></li>
    <li class="breadcrumb-item"><a href="#">Pacific Northwest</a></li>
    <li class="breadcrumb-item active" aria-current="page">Blue Ridge Overlook</li>
  </ol>
</nav>

Wrapping the list in <nav aria-label="breadcrumb"> is a Bootstrap-recommended accessibility pattern — it tells screen readers this block is a navigation landmark, distinct from the page's main nav.

Next, split a long list of results across multiple pages with Pagination.