Use breadcrumbs when parent links help users navigate a meaningful hierarchy.
Problem
Users arrive deep in a content hierarchy.
Use breadcrumbs when
- A documentation page belongs to a topic within a larger library.
- Search engines often bring users directly to deep pages.
Avoid breadcrumbs when
- A flat site with no useful parent-child structure.
- Showing progress through a linear form or transaction; use a progress indicator for steps.
Example
Each parent leads to a useful overview.
Implementation
- Use a labeled nav and a list of parent links, from broadest to nearest parent. An ordered list is a common choice.
- Base a location trail on the content hierarchy, so direct visits still show useful parents.
- The current page may be omitted or shown as text. If it is linked, add aria-current="page"; the attribute is optional on non-link text. Make links visually identifiable.
- Use native link keyboard behavior. Let labels wrap on narrow screens and hide decorative separators from assistive technology.
Tradeoffs
Breadcrumbs add orientation but cannot rescue a confusing hierarchy. Evaluate whether they add useful routes alongside existing navigation; they are not required on every site.
Verification
Do parent links lead to useful overviews, including after a direct visit? Can users identify and follow them with a keyboard at narrow widths?