Breadcrumb

The breadcrumb component is used to show users the path of the current page in relation to the overall site hierarchy.

Status

Status

Healthy

Figma component

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

The breadcrumb component is used to show users the path of the current page in relation to the overall site hierarchy. This path is created based on the page's taxonomical context.

Users can easily navigate to parent or child pages using the breadcrumb trail.

Principles

Use when

  1. displaying the current location of the state or page on top header.
  2. breadcrumb intend to be used as a navigation item in a product.
  3. indicating the page is coming from a certain direction.

Don't use when

  1. if the upper state (parent) comes from an external source.
  2. there is no relative context between states or pages.

 

Structure

Default breadcrumb (above), mutiple (?) breadcrumb (below)

Default breadcrumb (above), mutiple (?) breadcrumb (below)

  1. Breadcrumb trail
  2. Truncated menu
  3. Separator
  4. Overflow menu (optional)

Properties

Types

Default

The default type is used to indicate the user's current page location and display the previous path for navigation within the system.

Multiple (?)

It can be used as the primary navigation in cases where there is no other navigation (side bar) existing in the system/product.

Size

Default

The default size should be used when needed to display the user's current page and the source they came from, and use it as the primary location element.

Small

The small size can be used to display the stages of a table or content's attribute within an index. However, it should never be used as the primary navigation element

Attribute

Overflow menu (boolean)

In most cases, it is necessary to collapse the trail labels into an overflow menu if there are more than four steps or states.

Positioning

Breadcrumbs should always be located at the top of the layout, on the left of the top header.

Behavior

Interaction

When a breadcrumb trail is in an active state, indicating the current page, the text should be non-clickable.

If there is a previous source (parent) for the page the user is currently on, the trails are clickable and each one directs to the relevant page (in the same page).

Indexing

A breadcrumb displays a maximum of 3 breadcrumb trails at once. If the user is on a page that has more than 3 steps or pages, the breadcrumb should hide the intermediary states or pages that are not the first, second last, or last. These hidden states/pages should be accessible through an overflow menu.

Transition

While pressing each trail in the breadcrumb uses an ease transition only on hover.