Usage
Breadcrumbs are used as a secondary navigation that indicates the position of a page in its application hierarchy. A breadcrumb should show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.
Do:
Use breadcrumbs as a secondary navigation in interfaces that have a lot of content with more than two levels of hierarchy.
Don’t :
- Use breadcrumbs as the main navigation.
- Use breadcrumbs if the hierarchy contains only one level.
- Use breadcrumbs to guide the user through a multistep process (instead us a progress indicator component)
Placement
Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, and above the page title.
Types
Location-based breadcrumb
These illustrate the site’s hierarchy and show the user where they are within that hierarchy.
Path-based breadcrumb
These show the actual steps the user took to get to the current page, rather than reflecting the site’s information architecture. Path-based breadcrumbs are always dynamically generated.
Anatomy and content
Anatomy
1 – Icon
The home icon is an IconButton that directs the user towards the Homepage of the Product.
2 – Separator
Separators are non-interactive icons that are placed between each page link to clearly distinguish them.
3 – Text: page links
Page links directs users towards the appropriate page. The last link corresponds to the current page and should remain interactive.
Breadcrumbs variants
Icon
Icon + Text
Text only
Behaviour and interaction
Text links behaviour should be the same as the standalone link component. Separators are not interactive.
Limited space
When space becomes limited, use an ellipsis IconButton and a menu to truncate the breadcrumbs. The first and last two page links should be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line.
Responsiveness and density
If there is insufficient horizontal space, the links in the breadcrumb trail collapse into a dropdown menu
- The first link in the breadcrumb (the point of origin) collapses first, followed by the next link in the hierarchy.
- The last element in the breadcrumb is always visible, and should never collapse into the dropdown menu.
- The last element is truncated if the horizontal space is insufficient.