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




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.


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.



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

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

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




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.



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.


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


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.


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



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).


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.


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