More projects at alexanderclaes.com
patterns

Opinionated UI/UX guidance grounded in established sources.

When are breadcrumbs useful?

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. 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. How we choose 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

Each parent leads to a useful overview.

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

Related patterns