Breadcrumb

Purpose

Breadcrumbs help users understand where they are within the site hierarchy and navigate back to parent sections without using the browser’s back button.

Usage Guidance

• Use breadcrumbs on pages that are 2 or more levels deep
• Do not use breadcrumbs as a replacement for primary navigation
• The current page is the last item and should not be a link
• Keep breadcrumb labels short and consistent with page titles

Accessibility Considerations

• Wrap the breadcrumb in a <nav> element with aria-label="Breadcrumb"
• Use an ordered list <ol> because breadcrumbs imply sequence
• Mark the current page item with aria-current="page"
• Separators between items should be visual only (aria-hidden="true" or CSS-generated)

Keyboard Support

Breadcrumb links are standard links and follow standard keyboard behavior:

• Tab moves focus to the next link
• Enter activates the focused link

Screen Reader Behavior

The <nav aria-label="Breadcrumb"> landmark allows users to navigate directly to the breadcrumb. Screen readers announce it as “Breadcrumb navigation.” The current page is announced with “current page” context.

ARIA Requirements

• aria-label="Breadcrumb" on the <nav> wrapper
• aria-current="page" on the last (current page) item

Common Mistakes

• Using a <div> instead of <nav> for the wrapper
• Making the current page item a link (it should be text only)
• Using aria-hidden="true" on visible separator characters that would be confusing if hidden
• Using CSS pseudo-content separators and then also placing separator content in HTML

Live Example

Code Example

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/section/">Section</a>
    </li>
    <li class="breadcrumb__item" aria-current="page">
      Current Page
    </li>
  </ol>
</nav>

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0; font-size: 0.875rem;
}
.breadcrumb__item { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "›"; color: #7f8c8d;
  /* aria-hidden is not needed; screen readers ignore CSS content */
}
[aria-current="page"] { color: #2c3e50; font-weight: 500; }