# When are breadcrumbs useful?

[Website version](https://patterns.alexanderclaes.com/patterns/breadcrumbs/)

Updated 30 October 2026

Show where a page belongs and offer a route to its parents.

## Sources take different approaches

GOV.UK ends its breadcrumbs with the parent section of the current page. W3C APG permits a current-page item and describes its aria-current behavior. This guide already permits either approach.

**Preferred starting point:** [GOV.UK · Breadcrumbs](https://design-system.service.gov.uk/components/breadcrumbs/). Start with GOV.UK for the default trail. Including the current page is also supported by APG; use it deliberately when it improves orientation.

Compare: [W3C APG · Breadcrumb pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/). [How we choose sources](https://patterns.alexanderclaes.com/about/#sources).

## Recommendation

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

[View the example on the website](https://patterns.alexanderclaes.com/patterns/breadcrumbs/#example).

## Implementation

1. Use a labeled nav and a list of parent links, from broadest to nearest parent. An ordered list is a common choice.
2. Base a location trail on the content hierarchy, so direct visits still show useful parents.
3. 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.
4. 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?

## References

- [W3C APG · Breadcrumb pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
- [W3C APG · Breadcrumb example](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
- [GOV.UK · Breadcrumbs](https://design-system.service.gov.uk/components/breadcrumbs/)
- [W3C WAI · Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG22/Techniques/general/G65)

## Related patterns

- [Tabs or page navigation?](https://patterns.alexanderclaes.com/patterns/tabs-or-navigation.md)
- [Search, filters, or both?](https://patterns.alexanderclaes.com/patterns/search-or-filters.md)