Breadcrumb

Breadcrumbs show the path of the current page within the app.

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: March 20, 2024

Overview

Breadcrumbs are used to provide the user with a high level overview of the current page's location within a hierarchy, and allow them to navigate back to any point in that hierarchy. They should be used sparingly, and only when a user is placed within a resources, such as a template, campaign, or tertiary page.

Design

Structure

🟢 Breadcrumb / :hover=False

🟢 Breadcrumb / :hover=False

🟢 Breadcrumb / :hover=True

🟢 Breadcrumb / :hover=True

Guidelines

Breadcrumbs should be placed at the top of a page, above any other content. The breadcrumb should link back to the index of the resource that it's contained in.

🟢 Page header / Campaign

Example of a page header inside the campaign or template creation flow

Use cases

 

Do's and Dont's

  • don't change the icon
  • don't change the content structure
  • don't adjust the styles of the component

DO

DON'T

'< Campaigns'

'← See all campaigns'

 

Content

  • Breadcrumbs use a chevron left and reference the title of the previous page
  • Breadcrumbs should not include additional verbiage such as "back to", "view all", or "go to".

 

For more specifics on Breadcrumbs, please review the Page header guidelines.

Accessibility

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy