Breadcrumbs

Breadcrumbs are a list of navigation links helping users see the structure of the page they're currently on and click back to higher levels.

Breadcrumbs display the site structure of the parents of the current page. All pages in the tree above the current page are clickable links. The current page is not a link and is styled differently to communicate that.

Responsive

On desktop, the breadcrumbs show the full path to this page. On mobile, the breadcrumbs only show one parent above, with a left pointing arrow, indicating you are going back one page.

Specs

• Font: Smallest body copy

• Color: Primary 100 for links, Gray 100 for non-links, Grays 60 for chevron icons

• Icons: Material Design icons - Chevron right, Chevron left

Inspect navigation components in public site components in Figma