Breadcrumbs help users identify a user’s location in a hierarchy via a linear pathway. Users can navigate backward to a chosen page via the link element.
Anatomy
Anatomy summary lists and describes all the elements that exist within a component (including other components nested within).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Icon |
Back arrow icon placed before the first link to help communicate backward navigation. |
Yes |
|
2. Link |
Standalone link that navigates to another page within the hierarchy. Breadcrumbs are a maximum of three levels of links. |
No |
|
3. Divider |
Visual divider to separate links. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Component dependencies
This component is internally dependent on the following components:
Help and support