Breadcrumb

Breadcrumb

A breadcrumb shows the current page's position in the site hierarchy: an ordered list of .breadcrumb-item elements inside <nav aria-label="breadcrumb">, with .active and aria-current="page" on the last item. Bootstrap 2,007 draws the separators in a ::before pseudo-element from the --bs-breadcrumb-divider custom property, which you can override inline without recompiling Sass 22,539 .

Default and custom breadcrumb dividersHTMLLive

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<nav class="px-3 pt-3" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/books/">Books</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
  </ol>
</nav>
<nav class="px-3" aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
  <ol class="breadcrumb bg-body-tertiary rounded p-2">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Account</li>
  </ol>
</nav>

Browser output of Listing 3.18 — Browser output of 18

Set the divider to '' to remove it. Pair the visible trail with BreadcrumbList structured data for search engines (Search Engine Optimization).

MENU