Skip to main content
UI Patterns

Breadcrumb

Use nav with aria-label='Breadcrumb', an ordered list, and aria-current='page' on the last item. Separators should be decorative (CSS or aria-hidden). Helps orientation for all users.

In plain terms

The 'you are here' trail near the top of a page — mark it up so screen readers announce it as navigation.

Why this matters

Breadcrumbs help everyone understand where they are in a site's hierarchy — but only screen-reader users benefit if they're marked up as navigation with the current page identified.

How to detect

Quick check

Check the breadcrumb sits in a <nav aria-label='Breadcrumb'> with an ordered list and aria-current='page' on the last item. Separators should be CSS or aria-hidden, not read aloud.