Breadcrumbs

Breadcrumbs are a series of links that help understand user’s location in a hierarchy.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • To visualise a user’s location in a hierarchy and allow them to navigate to a chosen page in that hierarchy
  • In page headers (PageHeaderPrimary and PageHeaderSecondary) in Level 1 Pages and Level 2 Pages

When not to use

  • Any area of the interface that is not PageHeaderPrimary or PageHeaderSecondary
  • When the user is at the first level of a hierarchy, e.g., Projects

Best practices

Do

Do display Breadcrumbs when the user is 1–3 levels deep in a hierarchy, e.g., on a Project Dashboard.

Don't

Don't display Breadcrumbs if the user's current context is the first level of a hierarchy, and the user cannot navigate backwards in that hierarchy, e.g., Projects.