Bootstrap Breadcrumbs: Accessible Markup and Separators

Bootstrap breadcrumbs use a navigation landmark, an ordered list, and a current-page item to show a page’s place in a hierarchy. You can change the visual separator with CSS, but the separator should remain decorative so it does not clutter what assistive technologies announce.

How Bootstrap breadcrumbs work

Breadcrumbs are a secondary navigation aid: they show a route from a broader section to the page currently open. In Bootstrap, the standard pattern combines a <nav> element with the .breadcrumb class on an ordered list. Each linked ancestor is a list item with the .breadcrumb-item class, and the final item represents the current page.

A basic Bootstrap 5 example is:

<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">Breadcrumbs</li>
  </ol>
</nav>

The ordered list conveys sequence, while the navigation label identifies the purpose of the landmark. The final item is not a link: it names the destination already being viewed. Bootstrap’s .active class styles that item; aria-current="page" communicates its current-page status to assistive technology.

Accessible markup choices

Use a descriptive label on the navigation landmark, especially if the page has several navigation regions. aria-label="breadcrumb" is a common concise label; a localized equivalent is appropriate for a translated interface. The label describes the navigation, while the breadcrumb links and current item provide its contents.

• Keep the breadcrumb inside a <nav> landmark and give that landmark an accessible name.
• Use an ordered list for the hierarchy rather than styling plain text to look like one.
• Make each ancestor a real link to its corresponding location.
• Mark the current page with aria-current="page" and normally leave it unlinked.
• Do not rely on color or the separator alone to tell users which item is current.

These choices support screen-reader users without requiring a special breadcrumb role. A common misconception is that every breadcrumb must be a clickable link. The current location is different: it is the endpoint of the trail, so identifying it as current is clearer than linking to the same page again. If a site has multiple navigation landmarks, distinguish their labels—for example, “Primary” and “Breadcrumb”—rather than giving several landmarks indistinguishable names.

Default separators and custom CSS

Bootstrap’s breadcrumb separator is generated with CSS, not included as a text character between the list items. In Bootstrap 5, the relevant customization point is the --bs-breadcrumb-divider custom property. Set it on a particular breadcrumb or on a broader scope, and supply a CSS string for the desired separator:

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

You can instead use a slash or another character that suits the design:

.breadcrumb {
  --bs-breadcrumb-divider: "/";
}

For a divider that needs CSS escaping or more control, Bootstrap supports a background-image approach. For example, an encoded SVG can draw a custom mark; the exact value must be a valid CSS image URL. Keep the image decorative: it should not introduce an accessible name or duplicate the breadcrumb text. A simple text separator is usually easier to maintain and adapts well to text scaling.

Because Bootstrap applies the divider between items through CSS, changing its appearance does not require inserting extra separator elements into the HTML. Avoid placing literal “/” or “>” characters in every list item as well as using the CSS divider; doing both can produce repeated separators visually or in the accessibility tree.

Version and right-to-left considerations

Check the documentation and stylesheet for the Bootstrap version used by the project. Bootstrap 5 exposes the divider through the --bs-breadcrumb-divider custom property. Earlier Bootstrap releases use different customization patterns, so a version-specific snippet may not work unchanged in an older project. Confirm the loaded CSS version before troubleshooting a property that appears to have no effect.

Bootstrap’s breadcrumb styling also accounts for right-to-left layouts through its stylesheet. Test the trail in the languages and writing directions the site supports. A separator that looks natural in a left-to-right path may be confusing when direction changes; choose a mark that remains legible and avoid manually reversing text or adding directional characters without a clear need. The hierarchy and link order should reflect the actual navigation, not merely the visual direction of the symbols.

Common implementation problems

• The separator does not change: Check that the project uses the expected Bootstrap version, that the custom rule loads after Bootstrap, and that the property is set on the breadcrumb being displayed.
• Separators appear twice: Remove literal separator characters from the item text if CSS already draws them.
• The current item is announced as an ordinary link: Make sure it is not wrapped in an anchor and has aria-current="page".
• Screen readers give no useful landmark context: Add a clear accessible name to the <nav> element.
• The trail is too long on small screens: Consider a layout that wraps or another responsive treatment; do not remove essential link text solely to preserve a single line.

Check the result with both keyboard navigation and a screen reader when possible. Also inspect the HTML with CSS disabled: the ordered list should still communicate a sensible path, even though its visual separators disappear.

When breadcrumbs are useful

Breadcrumbs help most when pages sit within a meaningful hierarchy, such as a documentation section, product category, or nested topic. They are less useful for a flat site or as a substitute for primary navigation. The trail should describe the site’s information structure, not necessarily reproduce every click or filter a visitor used to reach the page. Keep labels concise and consistent with the destinations they identify.

For pages reached through several possible routes, choose a stable, understandable hierarchy rather than trying to show every route at once. Breadcrumbs are supplementary navigation: visitors should still be able to use the site’s main navigation, and the current page should remain clear from its heading and content.

Frequently Asked Questions

Do Bootstrap breadcrumbs need an ARIA breadcrumb role?
No special role is needed for the standard pattern. A named <nav> landmark containing an ordered list is a practical semantic structure.

Should the last breadcrumb be a link?
Usually not. Make it the current page label and add aria-current="page". This avoids an unnecessary link to the page the visitor is already viewing.

How do I change the Bootstrap breadcrumb separator?
In Bootstrap 5, set --bs-breadcrumb-divider on the breadcrumb, such as --bs-breadcrumb-divider: "/";. Ensure the relevant stylesheet is loaded and verify the Bootstrap version.

Can the separator be an icon?
Yes. A CSS background image or another decorative CSS treatment can draw an icon. Keep it out of the meaningful text so it does not distract from the breadcrumb labels.

Are breadcrumb separators read aloud?
Bootstrap’s standard separator is CSS-generated, so it is not normally part of the list’s text content. Avoid adding a second literal separator to the markup.

Related

• How to Switch Webmail Providers Without Losing Email
• Marvel Rivals Mouse Acceleration & Smoothing Fix
• Gujarati Phone Agent: First Reply Delay Explained