Breadcrumbs

Breadcrumbs are a navigation pattern that helps a user understand the hierarchy of content and navigate back through it if needed.

 

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

Anatomy

The anatomy of the breadcrumbs differs depending on the use case. The most complex one is the dissected in the image below.

  1. Link with icon. In this instance the Home icon in the color-brand-400.
  2. Arrow. In this instance the Chevron right 1.5 icon in the color-brand-400.
  3. More indicator. In this instance the text ....
  4. Link. In this instance the color-brand-400.
  5. Current page. In this instance the color-grey-400.