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

Multi-level example

Breadcrumbs support any depth. The last item uses aria-current="page" and is rendered as a <span> (not a link) to indicate the current location.

<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>
  <a href="/design-system/content/">Content</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span aria-current="page">Breadcrumb</span>
</nav>

The aria-current="page" attribute signals to assistive technology that this is the current page. It also receives distinct styling — primary text colour and medium font weight — so sighted users can identify the active page at a glance.

Accessibility

• 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

Usage rules

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

CSS reference

This section documents how the component is built. For usage, see the sections above.

Styling

Selectors