Breadcrumb

📖 2 min read•Last updated: 9/26/2026

A navigational aid that shows the page’s position in the hierarchy. Mark up with nav and aria-label="breadcrumb".

📋 Complete Guide Contents

Breadcrumbs: The Navigation Trail Users Actually Follow

Breadcrumbs are navigational aids that show users their current location within a website's hierarchy and provide a path back to previous levels. Named after the Hansel and Gretel fairy tale, breadcrumbs help users understand where they are and how they got there.

For accessibility, breadcrumbs serve multiple critical functions. They provide context for screen reader users who may have jumped directly to a page via search or external links. They offer keyboard users a quick way to navigate back through the site hierarchy without using the back button. And they help users with cognitive disabilities understand the relationship between different sections of your site.

Well-implemented breadcrumbs use semantic HTML (typically a `

Breadcrumb Best Practices for Accessibility

Effective breadcrumb implementation requires attention to both visual design and accessibility requirements:

Semantic Structure: Use a `

` element with `aria-label="Breadcrumb"` to identify the navigation landmark. Screen readers will announce this as "Breadcrumb navigation."

Current Page Indication: Mark the current page with `aria-current="page"` rather than making it a clickable link. This tells screen reader users they've reached their destination.

Descriptive Links: Each breadcrumb link should clearly indicate the section or page it represents. Avoid cryptic abbreviations that don't make sense out of context.

Keyboard Navigation: Ensure all breadcrumb links are keyboard accessible and provide clear focus indicators.

Visual Design: Use consistent separators (commonly ">" or "/") and ensure adequate color contrast for all breadcrumb elements.

Mobile Considerations: On mobile devices, breadcrumbs may need to be truncated or redesigned to fit smaller screens while maintaining accessibility.