Navigation
Breadcrumb
Breadcrumbs are a secondary navigation aid showing a user's location in a website's hierarchy, appearing as a trail of links (e.g., Home > Category > Subcategory > Current Page) to help users understand where they are and easily backtrack to previous levels.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Root element is a <nav> landmark with aria-label="Breadcrumb"
- Items rendered as an ordered list <ol> for screen reader enumeration
- Current page item uses aria-current="page"
- Overflow ellipsis has aria-label="More items" for assistive technology
- Divider icons are hidden from assistive technology via aria-hidden
- Visited links styled distinctly to convey browser history context
- Focus ring applied to all link items (3px, #4a2bc2)
When to use this component
✓Do's
- •The page sits three or more levels deep in the site hierarchy
- •Users arrive directly from search results or an external link and need orientation
- •The journey spans several categories and users may want to step back a level
- •You need a compact, secondary wayfinding aid that does not compete with the primary nav
✗Don'ts
- •The site is flat or only one level deep, breadcrumbs add noise without value
- •It would be the only navigation on the page, use Navbar or Mega Menu as the primary route
- •The user is inside a linear task such as a multi-step form, use Stepper instead
- •You are tempted to show the user's click history, breadcrumbs reflect hierarchy, not history
Do's and Don'ts
✓ Do's
Use a consistent chevron breadcrumb with a home icon on multi-level pages. Always mark the current page with aria-current="page" and no hyperlink.
✗ Don'ts
Don't use a breadcrumb for flat, single-level navigation. A single-item trail adds no wayfinding value and confuses screen reader users.