How to build an accessible Breadcrumb in React

Wrapped in <nav> with an aria-label and the current page marked aria-current="page"; ancestor entries are real links so keyboard users can jump up the hierarchy

When to use a Breadcrumb

• Showing the user where the current page sits in a navigation hierarchy
• Providing one-click navigation back to ancestor pages
• Collapsing deep trails to keep the trail compact (maxVisible)

When not to use it

• Paging through data records — use Pagination
• Switching between sibling views — use Tabs

Keyboard interactions

Role navigation, verified at WCAG 2.2-AA.

• Tab
• Enter

Common mistakes

Avoid: Using Breadcrumb to step through pages 1, 2, 3 of a dataset

Prefer: <Pagination> for paged data

Breadcrumb models hierarchy depth, not sequential position in a list

Example

<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/docs' }, { label: 'Breadcrumb' }]} />

See the full Breadcrumb reference →