Breadcrumbs display as horizontal link lists separated by symbols, helping users understand their website location at a glance.
Breadcrumbs work as secondary navigation aids showing users their current location and providing easy navigation back through parent pages.
Websites with deep hierarchical structures or complex navigation paths benefit most from breadcrumbs.
When to use
Use Breadcrumbs to show users their location within a website's structure and help easy navigation.
Common scenarios include:
Websites have multiple hierarchical levels (categories, sub-categories)
Large or complex sites where users land on deep pages from search engines
Systems rely on nested file or document organization (file explorers, project management tools)
E-commerce stores use layered product categories
When to avoid
Single-level websites have flat structure
Landing pages or homepages don't need them
Small websites use simple navigation
Hierarchy already shows through other navigation elements
Single-page applications use modal-based navigation
Implementation workflow
Confirm the pattern matches the problem and constraints before copying the example.
Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation.
Apply accessibility, performance, and interaction guardrails before layering visual polish.
Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.
Accessibility guardrails
Do's ✅
Use <nav> with aria-label="Breadcrumb" for landmark navigation
