Breadcrumbs

What are Breadcrumbs

Breadcrumbs are a form of navigation that helps users view and backtrack efficiently through page hierarchies.

Usage

Breadcrumbs provide the user context of what page they came from when they are viewing nested content.

When to use Breadcrumbs

• When there are 2 or more pages in the hierarchy
• When it's beneficial to inform users where they are
• When users need a quick and efficient way to navigate back to previous pages

Why do we use Breadcrumbs

• Quick, efficient, and straightforward navigation within the application
• Fast navigation: one-click access to get to a previous page

Anatomy

For a more detailed breakdown of spacing and sizing, view the design specs.

Breadcrumbs can contain the following elements:

1. Icon: use left chevron at the beginning of the breadcrumb to indicate that the user will be taken back a page
2. Link: a text link to the previous page

States

See text link documentation for details about states.

Layout

Breadcrumbs alignment:

• Position Breadcrumbs at top left corner of the page, above page titles
• Appear 30px below the Topbar and 20px above the page title;

Best Practices

Only use left chevrons

Use only left chevrons as separators.

Responsive Layout

• Breadcrumbs on mobile should follow the same pattern and only show the previous page with a chevron to the left.
• Breadcrumbs titles on mobile will truncate after 30 characters with an ellipsis at the end