Bootstrap Breadcrumbs: Free Accessible Examples

This page shows free, accessible Bootstrap breadcrumb examples you can copy and adapt. You’ll see the correct HTML structure, the ARIA attributes Bootstrap itself recommends, and how to test keyboard and screen-reader behavior. The examples use Bootstrap 5, which is the current stable version.

What Are Breadcrumbs in Bootstrap?

Breadcrumbs are a secondary navigation scheme that shows the user’s location in a hierarchy. In Bootstrap, the .breadcrumb class creates a simple, styled list of links separated by a divider. The default divider is a forward slash (/), but you can change it with CSS or by replacing the ::before pseudo-element content.

A basic Bootstrap 5 breadcrumb looks like this:

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

The aria-label="breadcrumb" on the <nav> element identifies the navigation region as a breadcrumb trail. The aria-current="page" on the last item tells assistive technology that this is the current page. These two attributes are the core of Bootstrap’s accessible breadcrumb pattern.

Why Accessibility Matters for Breadcrumbs

Breadcrumbs are navigation, and navigation must be accessible. Screen reader users rely on landmarks and labels to understand page structure. Without the aria-label, a screen reader might announce “navigationâ€� without context, and the user won’t know if it’s the main menu, a footer, or a breadcrumb trail. The aria-current attribute prevents confusion about which link is the current page.

Keyboard users also benefit from breadcrumbs because they are just links—they are naturally focusable. There is no custom JavaScript or tabindex needed. That’s a key advantage of using Bootstrap’s markup: it’s built on semantic HTML, so it works with keyboard navigation out of the box.

Free Accessible Examples You Can Use

Here are three free, accessible breadcrumb examples. Each one is valid Bootstrap 5 and includes the required ARIA attributes.

1. Simple Hierarchical Breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/products">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Laptops</li>
  </ol>
</nav>

2. Breadcrumb with Icons (Using Bootstrap Icons)

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/"><i class="bi bi-house-door"></i> Home</a></li>
    <li class="breadcrumb-item"><a href="/blog">Blog</a></li>
    <li class="breadcrumb-item active" aria-current="page">Accessibility</li>
  </ol>
</nav>

When using icons, ensure the icon has an accessible name. The text “Homeâ€� next to the icon provides that. If you use an icon alone, add aria-hidden="true" to the icon and provide a visually hidden text label.

3. Breadcrumb with a Dropdown (Bootstrap 5.2+)

<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 dropdown">
      <a class="dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Categories</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Science</a></li>
        <li><a class="dropdown-item" href="#">History</a></li>
      </ul>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

This example uses Bootstrap’s dropdown component inside a breadcrumb item. It requires Bootstrap’s JavaScript bundle. The aria-expanded attribute is managed by Bootstrap automatically.

How to Choose the Right Breadcrumb Pattern

Not every site needs breadcrumbs. They are most useful when your content has a clear hierarchy of three or more levels. For a flat site with only two levels, breadcrumbs may be redundant. Consider these factors:

• Depth of hierarchy: If users are more than two clicks from the homepage, breadcrumbs help orientation.
• User task: If users often jump between sibling sections, breadcrumbs allow quick lateral navigation.
• Mobile view: On small screens, breadcrumbs take space. Some sites hide them below a certain breakpoint, but that can hide navigation. A common pattern is to show only the current page name and a “Backâ€� link.

Bootstrap’s breadcrumb is simple, but you can customize the divider, add icons, or even make it horizontally scrollable on mobile with a small CSS addition.

Common Problems and How to Fix Them

Here are frequent issues developers run into with Bootstrap breadcrumbs and the fixes.

• Missing ARIA label: Without aria-label="breadcrumb", screen readers announce “navigationâ€� without context. Add it to the <nav>.
• Current page not marked: If you omit aria-current="page" on the last item, screen reader users won’t know it’s the current page. Add it.
• Divider not changing: Bootstrap uses a CSS pseudo-element for the divider. To change it, override the .breadcrumb-item::before content property. For example, to use a chevron, add this CSS:

.breadcrumb-item::before {
  content: ">";
}

• Breadcrumb wraps awkwardly: On narrow screens, the breadcrumb may wrap. You can prevent wrapping with flex-wrap: nowrap and allow horizontal scroll, or hide intermediate items on small screens.
• Dropdown not working: If the dropdown in a breadcrumb doesn’t open, ensure you’ve included Bootstrap’s JavaScript bundle and that the data attributes are correct.

Testing Accessibility of Breadcrumbs

To verify your breadcrumb is accessible, you can do quick manual tests:

1. Keyboard: Tab through the breadcrumb. Each link should receive focus in order. Press Enter to activate. The dropdown (if any) should open with Enter or Space.
2. Screen reader: Use a screen reader like NVDA or VoiceOver. Navigate to the breadcrumb region. It should be announced as “breadcrumb� and the current page should be announced as “current page�.
3. Visual focus: Ensure the focus outline is visible. Bootstrap’s default focus style is a subtle box-shadow. If you customize, keep a visible indicator.

Automated tools like axe or Lighthouse can catch missing ARIA attributes, but they can’t verify the logical order or the usefulness of the breadcrumb trail.

Alternatives to Breadcrumbs

If breadcrumbs don’t fit your design, consider these alternatives:

• Progress indicator: For multi-step forms, a progress bar or step list shows where the user is in a linear process.
• Back button: On mobile, a simple “Backâ€� link to the previous page is often more intuitive.
• Sidebar navigation: For documentation or help centers, a persistent sidebar with the full hierarchy may be more useful than breadcrumbs.
• Faceted navigation: For e-commerce, filter menus on the category page are more powerful than breadcrumbs for refining results.

Breadcrumbs are a supplement, not a replacement, for primary navigation. They work best when combined with a clear menu and a well-structured page layout.

Frequently Asked Questions

Do I need to add aria-label to the nav element?

Yes. The aria-label="breadcrumb" is what makes the navigation region identifiable as a breadcrumb trail. Without it, screen reader users just hear “navigationâ€� and may not know what the list of links is for. Bootstrap’s documentation includes this attribute, so it’s part of the expected pattern.

Can I use a different divider, like a chevron?

Yes. The divider is controlled by CSS. Bootstrap uses a ::before pseudo-element with content "/". You can override it with your own CSS, for example .breadcrumb-item::before { content: ">"; }. Be aware that the divider is purely visual and is hidden from screen readers by default.

Should the current page be a link?

No. The current page should not be a link. It should be a plain text element with the class active and the attribute aria-current="page". This prevents confusion and avoids a link that points to the same page.

Are breadcrumbs necessary for accessibility?

No, breadcrumbs are not required by WCAG. However, if you include them, they must be accessible. That means using the correct ARIA attributes and ensuring keyboard operability. The WCAG guidelines don’t mandate breadcrumbs, but they do require that all navigation is perceivable and operable.

Can I use breadcrumbs on mobile?

Yes, but be mindful of space. A common pattern is to show only the current page name and a “Backâ€� link on small screens, or to allow horizontal scrolling. You can use Bootstrap’s responsive utilities to hide certain items on mobile, but ensure that the remaining navigation is still understandable.

What is the difference between Bootstrap 4 and Bootstrap 5 breadcrumbs?

In Bootstrap 4, breadcrumbs used <nav class="breadcrumb"> and <a class="breadcrumb-item">. Bootstrap 5 changed to the current pattern with <ol class="breadcrumb"> and <li class="breadcrumb-item">. The ARIA attributes are the same. If you’re upgrading, you’ll need to update the markup.

Related

• Wordle Hard Mode: Rules, Tips & How to Turn It On
• Green Screen Backgrounds: How They Work & How to Use Them
• Where to Watch Combat Robotics Competitions