Bootstrap Breadcrumb: Dividers, Styles and SEO Markup

A Bootstrap breadcrumb shows where the current page sits in your site, as a row of links such as Home / Guides / Components / Breadcrumb. It helps visitors move up a level, and with matching structured data Google can show the trail in its desktop search results. This guide covers the breadcrumb markup in Bootstrap 5.3, changing the divider to > or an icon, styling it with a background or as pills, adding icons, handling long trails on phones, accessibility, and the BreadcrumbList structured data that goes with it.

A basic breadcrumb

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

• .breadcrumb on an ordered list lays the items out in a row and removes the numbers.
• .breadcrumb-item on each item adds the / divider before every item except the first.
• The last item is the current page: give it .active and aria-current="page", and don’t make it a link.

Breadcrumbs are pure CSS, with no JavaScript. Put the breadcrumb near the top of the page, below the navbar and above the page heading.

Change the divider

The divider is set with the --bs-breadcrumb-divider CSS variable. Set it on the <nav> or the .breadcrumb, with the character in quotes:

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

Other common dividers: '›', '»', '|', and '·'. Set it once for the whole site in your CSS:

.breadcrumb {
  --bs-breadcrumb-divider: '›';
}

With Sass, set $breadcrumb-divider: quote(">"); before importing Bootstrap.

Use an icon as the divider

The variable accepts an image, so an SVG chevron works:

.breadcrumb {
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");
}

The SVG must be URL-encoded, as above, with # written as %23.

Remove the divider

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">

Style the breadcrumb

The breadcrumb has no background or padding by default. Add them with utilities:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-body-tertiary rounded-3 px-3 py-2">
    <li class="breadcrumb-item"><a class="link-body-emphasis" href="/">Home</a></li>
    <li class="breadcrumb-item"><a class="link-body-emphasis" href="/shop/">Shop</a></li>
    <li class="breadcrumb-item active" aria-current="page">Shoes</li>
  </ol>
</nav>

link-body-emphasis gives the links the text color instead of blue. Add link-underline-opacity-0 to remove the underline, or fw-semibold to make them bolder.

Or change the CSS variables:

.breadcrumb {
  --bs-breadcrumb-bg: #f1f3f5;
  --bs-breadcrumb-padding-x: 1rem;
  --bs-breadcrumb-padding-y: 0.5rem;
  --bs-breadcrumb-border-radius: 0.5rem;
  --bs-breadcrumb-item-padding-x: 0.75rem;
  --bs-breadcrumb-divider-color: #adb5bd;
  --bs-breadcrumb-item-active-color: #212529;
}

Breadcrumb with icons

Add a Bootstrap Icon to the home link, and keep a text label for screen readers:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/"><i class="bi bi-house-door" aria-hidden="true"></i><span class="visually-hidden">Home</span></a>
    </li>
    <li class="breadcrumb-item"><a href="/account/">Account</a></li>
    <li class="breadcrumb-item active" aria-current="page">Billing</li>
  </ol>
</nav>

Step-style breadcrumb with pills

For a checkout or setup flow, style the items as pills:

<nav aria-label="Checkout steps" style="--bs-breadcrumb-divider: '›';">
  <ol class="breadcrumb align-items-center">
    <li class="breadcrumb-item"><a class="badge rounded-pill text-bg-success text-decoration-none" href="/cart">1. Cart</a></li>
    <li class="breadcrumb-item"><a class="badge rounded-pill text-bg-success text-decoration-none" href="/shipping">2. Shipping</a></li>
    <li class="breadcrumb-item active" aria-current="step"><span class="badge rounded-pill text-bg-primary">3. Payment</span></li>
  </ol>
</nav>

aria-current="step" tells screen readers this is the current step rather than the current page.

Long breadcrumbs on phones

The breadcrumb wraps onto more lines when it’s too long, which is fine for short trails. For deep pages, a common pattern is a single back link to the parent on phones and the full trail from the md breakpoint up:

<nav aria-label="breadcrumb">
  <a class="d-md-none link-body-emphasis text-decoration-none" href="/guides/components/">
    <i class="bi bi-chevron-left" aria-hidden="true"></i> Components
  </a>
  <ol class="breadcrumb d-none d-md-flex">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/guides/">Guides</a></li>
    <li class="breadcrumb-item"><a href="/guides/components/">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb navigation in Bootstrap 5</li>
  </ol>
</nav>

Hiding items from the middle of the trail with d-none doesn’t work well, because the first visible item still gets a divider in front of it.

Accessibility

• Wrap the list in <nav aria-label="breadcrumb">, so screen readers announce it as breadcrumb navigation.
• Use <ol>, since the order matters.
• Mark the current page with aria-current="page".
• The dividers are added with CSS ::before, so screen readers don’t read them out.
• Make sure link and divider colors have enough contrast on your background.

Breadcrumb structured data for Google

On desktop, Google can show your breadcrumb trail in place of the full URL in search results; on mobile it now shows only the site name. Add BreadcrumbList structured data that matches the visible breadcrumb:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Guides", "item": "https://example.com/guides/" },
    { "@type": "ListItem", "position": 3, "name": "Breadcrumb" }
  ]
}
</script>

Each item gets a position, a name, and the item URL. The last item, the current page, can leave out item. Check the result with Google’s Rich Results Test.

If you generate pages from a template, build the breadcrumb and its JSON-LD from the same data so they always match.

Bootstrap 4 differences

The Bootstrap 4 markup is the same, but the divider was changed only with Sass ($breadcrumb-divider) or by overriding the ::before content. Bootstrap 5 added the --bs-breadcrumb-divider variable, and 5.2 added variables for padding, background, colors, and radius. Bootstrap 4’s default gray background and padding were removed in Bootstrap 5.

FAQ

How do I create a breadcrumb in Bootstrap 5?

Use <nav aria-label="breadcrumb"> around an <ol class="breadcrumb">, with <li class="breadcrumb-item"> for each level. Link every item except the last, and give the last one class="breadcrumb-item active" and aria-current="page".

How do I change the breadcrumb divider in Bootstrap?

Set the --bs-breadcrumb-divider CSS variable, with the character in quotes, on the <nav> or in your CSS: .breadcrumb { --bs-breadcrumb-divider: '>'; }. In Sass, set $breadcrumb-divider before importing Bootstrap. The variable also accepts an SVG image with url().

How do I remove the slash in a Bootstrap breadcrumb?

Set the divider to an empty string: style="--bs-breadcrumb-divider: '';" on the <nav> or .breadcrumb.

How do I add a background to a Bootstrap breadcrumb?

Add utilities to the .breadcrumb list, such as bg-body-tertiary rounded-3 px-3 py-2, or set --bs-breadcrumb-bg, --bs-breadcrumb-padding-x, and --bs-breadcrumb-padding-y in CSS.

Do breadcrumbs help SEO?

They help visitors and search engines understand your site’s structure, and with BreadcrumbList structured data Google can show the breadcrumb trail in desktop search results. The visible breadcrumb and the structured data should match.

Does the Bootstrap breadcrumb need JavaScript?

No. The breadcrumb is CSS only. The dividers are added with the ::before pseudo-element, and there’s nothing to initialize.