semantic pattern · Menus and navigation
Breadcrumbs
A secondary navigation trail showing the current page position within a site hierarchy, with links back to ancestor levels.
Decisive boundary
A breadcrumb trail is navigation, not a progress indicator. Use a Stepper or Progress Bar for a sequential task flow.
Definition and intent
What is a Breadcrumbs UI pattern?
Use the behavior, not the silhouette
A secondary navigation trail showing the current page position within a site hierarchy, with links back to ancestor levels. The term is used here as a semantic pattern whose role and interaction contract carry more meaning than its appearance. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.
Help users understand their position in a site structure and navigate to ancestor levels without using the back button. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.
Know when the label is wrong
The fastest way to identify a pattern is often to reject the nearest alternative. For Breadcrumbs, the boundary is: A breadcrumb trail is navigation, not a progress indicator. Use a Stepper or Progress Bar for a sequential task flow.
Do not implement it as Tab bar for primary destinations, Progress Bar for sequential steps, and Navigation Menu for the top-level site structure. If those requirements describe the real task better, use the related pattern page or the full Menus and navigation comparison before writing code.
Decision process
Decide before choosing a component
Record these requirements in plain language. A library component name is not a substitute for the contract.
Confirm the user job
Help users understand their position in a site structure and navigate to ancestor levels without using the back button.
Define opening and closing
Always visible as secondary navigation; no interaction required to reveal. Not applicable; breadcrumbs are persistent navigation, not a popup or surface.
Specify access behavior
Links follow normal document focus order; the landmark area itself is not a focus target. Each link is a standard keyboard-operable anchor; the trail itself has no composite keyboard model.
Reject the near miss
Tab bar for primary destinations, Progress Bar for sequential steps, and Navigation Menu for the top-level site structure.
Behavior contract
What must survive the build
- trigger
- Always visible as secondary navigation; no interaction required to reveal.
- dismissal
- Not applicable; breadcrumbs are persistent navigation, not a popup or surface.
- modality
- Non-modal inline navigation content.
- focus
- Links follow normal document focus order; the landmark area itself is not a focus target.
- keyboard
- Each link is a standard keyboard-operable anchor; the trail itself has no composite keyboard model.
- interactive
- Contains only navigation links, typically to ancestor pages.
- persistence
- Always visible while on the page; normally not collapsible.
- placement
- Between the primary navigation and the page heading, often near the top of the main content.
- mobile
- May show the last one or two visible segments with a truncation indicator rather than the full path.
Failure modes
Common wrong builds
- Using breadcrumbs as the only navigation.
- Replacing the page heading with a breadcrumb.
- Making every crumb the current page.
- Using non-link breadcrumb text without a keyboard path.
Observable checks
Verify the result
- The trail is labeled as a navigation landmark.
- The current page is visually distinct from ancestors.
- Each ancestor crumb is a working link.
- Truncation is handled with clear ellipsis or overflow.
- Mobile layout shows at least one parent crumb.
Coding-agent handoff
Implementation brief template
Pattern: Breadcrumbs Purpose: Help users understand their position in a site structure and navigate to ancestor levels without using the back button. Trigger: Always visible as secondary navigation; no interaction required to reveal. Dismissal behavior: Not applicable; breadcrumbs are persistent navigation, not a popup or surface. Modality: Non-modal inline navigation content. Focus behavior: Links follow normal document focus order; the landmark area itself is not a focus target. Keyboard behavior: Each link is a standard keyboard-operable anchor; the trail itself has no composite keyboard model. Interactive content: Contains only navigation links, typically to ancestor pages. Placement: Between the primary navigation and the page heading, often near the top of the main content. Mobile behavior: May show the last one or two visible segments with a truncation indicator rather than the full path. Do not implement as: Tab bar for primary destinations, Progress Bar for sequential steps, and Navigation Menu for the top-level site structure. Acceptance checks: - The trail is labeled as a navigation landmark. - The current page is visually distinct from ancestors. - Each ancestor crumb is a working link. - Truncation is handled with clear ellipsis or overflow. - Mobile layout shows at least one parent crumb.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Breadcrumbs UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Breadcrumbs in web UI?
A secondary navigation trail showing the current page position within a site hierarchy, with links back to ancestor levels. In this reference set it is a semantic pattern whose role and interaction contract carry more meaning than its appearance.
When should I use a Breadcrumbs?
Help users understand their position in a site structure and navigate to ancestor levels without using the back button. The decisive boundary to confirm is this: A breadcrumb trail is navigation, not a progress indicator. Use a Stepper or Progress Bar for a sequential task flow.
What keyboard and focus behavior does a Breadcrumbs need?
Each link is a standard keyboard-operable anchor; the trail itself has no composite keyboard model. Links follow normal document focus order; the landmark area itself is not a focus target. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Breadcrumbs behave on mobile?
May show the last one or two visible segments with a truncation indicator rather than the full path. Its modality is a separate requirement: Non-modal inline navigation content.
How do I verify a Breadcrumbs implementation?
Start with observable checks: The trail is labeled as a navigation landmark. The current page is visually distinct from ancestors. Each ancestor crumb is a working link. Then verify the remaining checks and compare the result with the linked source guidance.