Breadcrumb

Breadcrumbs show the user's location within a site hierarchy. The component uses native <nav> with aria-label for accessibility.

Basic usage

<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="/">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <a href="/design-system/">Design System</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span aria-current="page">Breadcrumb</span>
</nav>

Structure

Accessibility notes

• Always wrap in a <nav> element with aria-label="Breadcrumb"
• The current page uses aria-current="page" and is not a link
• Separators use aria-hidden="true" so screen readers skip them
• Links are focusable with standard keyboard navigation

Do / Don't

Do:

• Use breadcrumbs on pages with clear hierarchical structure
• Mark the current page with aria-current="page"

Don't:

• Don't use breadcrumbs on single-level pages (e.g. homepage)
• Don't make the current page a clickable link