Navigation

Breadcrumb

A secondary navigation trail showing the user's location within a site hierarchy.

Last verified against WCAG 2.2 and WAI-ARIA APG 1.2 on 2026-07-02.

Implementation

There's only one right way to build a breadcrumb: a labeled <nav> landmark wrapping an <ol> of real links, with the current page marked by aria-current="page". Semantic HTML already covers this completely — there's no ARIA widget to reach for, so the native and custom approaches are identical.

breadcrumb-pattern.tsx

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops">Laptops</a></li>
    <li aria-current="page">ThinkPad X1</li>
  </ol>
</nav>

/* Semantic HTML already covers this pattern completely — the "native" and
   "custom" implementations are the same markup. Separators (/, chevrons)
   are CSS content or aria-hidden icons, never text nodes in the DOM. */

Live demo

Required roles, states & properties

Required roles, states, and properties
Element	Attribute	Why
<nav>	aria-label="Breadcrumb"	Gives this landmark a distinguishing accessible name so it appears as "Breadcrumb navigation" in a screen reader's landmark list, separate from the site's main nav.
<ol>	Native ordered list	Communicates that the trail is an ordered sequence of steps from site root to current page, and gives AT users a position count (e.g. "1 of 4").
Last <li> (current page)	aria-current="page"	Identifies which crumb represents the page the user is currently on — announced as "current page."
Separator glyph/icon	aria-hidden="true"	Hides the purely decorative visual separator (/, chevron) from assistive tech so it isn't read aloud between every crumb.

Keyboard interaction model

Keyboard interaction model
Key	Behavior
`Tab / Shift+Tab`	Moves focus through each breadcrumb link in document order — no custom key handling is needed or expected.
`Enter`	Activates the focused link and navigates to that page.

Focus management rules

No custom focus management is required — the browser's native Tab order through the links is correct as-is.
The current page is not a focus stop unless it remains a real link; when rendered as plain text it is correctly skipped.
Activating a crumb link navigates the page normally, so focus naturally resets to the top of the destination document.

WCAG 2.2 success criteria mapping

WCAG 2.2 success criteria that apply to this component
SC	Name	Level	Why it applies
1.3.1	Info and Relationships	A	Structure and relationships conveyed visually are also programmatically determinable.
2.4.3	Focus Order	A	Focusable components receive focus in an order that preserves meaning and operability.
2.4.6	Headings and Labels	AA	Headings and labels describe topic or purpose.
4.1.2	Name, Role, Value	A	For all UI components, name, role, and value are programmatically determinable; states and changes are announced.

Find what you need, instantly