Design
Web component
Is documented
Status
Healthy
Figma component
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
- displaying the current location of the state or page on top header.
- breadcrumb intend to be used as a navigation item in a product.
- indicating the page is coming from a certain direction.
Don't use when
- if the upper (parent) page comes from an external source.
- there is no relative context between states or pages.
Structure
- Breadcrumb trail
- Truncated menu icon
- Separator icon
- Overflow menu
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.
Do
Hide the pages/states that in-between using overflow menu.
Don’t
When there are multiple trails, they should not break into two lines, even on responsive layout changes.
Transition
While pressing each trail in the breadcrumb uses an ease transition only on hover.