Breadcrumb shows users their location in the hierarchical structure of the product.
A breadcrumb is a secondary navigational element that supports wayfinding within the information architecture and allows users to navigate to pages preceding their current location.
- Page link: Directs users to a parent-level page.
- Separator: Distinguishes between page links.
- Overflow: Indicates hidden pages stored in a dropdown.
- Current page: Non-interactive; informs users of the current page.
Open the component in Figma.
Use breadcrumbs in these scenarios:
- When you have a large amount of content organized in a hierarchy of more than two levels.
- When you only have a small space to provide context for the user’s place in the navigation hierarchy.
Don’t use breadcrumbs in these scenarios:
- When you need primary navigation. Breadcrumbs are secondary and should never replace the primary navigation.
- When you have fewer than two levels of hierarchy because they create unnecessary clutter.
All pages in a breadcrumb component are interactive except for the current page.
Breadcrumbs are placed at the top leading edge of the page. They sit underneath any header or top navigation, but above the page title.
Breadcrumbs should start with the root of the hierarchy.
If the root is the home page — and the primary navigation links to home — the breadcrumb should exclude the home page and start one level deeper in the hierarchy. This is editable in code. In the breadcrumb, this is always shown as the home icon.
Breadcrumbs should always end with the current page.
When there are more than five levels of hierarchy or the breadcrumb wraps, page links between the first and last are truncated with an ellipsis to indicate there is more information. When a user clicks the ellipsis, the truncated items are shown in a menu.
The overflow ellipsis should be placed between the first item and the current page.
The default state of overflow.
When the overflow is selected, a menu opens showing the hidden links.
Breadcrumbs should never wrap multiple lines or exceed five page links. Enable the overflow prop to truncate if either of these issues occur.
As an interactive element, the page link has the following states:
The default enabled state of a page link.
The hover state is initiated when a user pauses over a page link with their cursor.
The disabled state prevents the user from clicking a page link to navigate to a page.
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
- Each page link should clearly reflect the location or entity it links to.
- Be as concise as possible, ideally one to three words.
- Capitalize each page link in title case. For example, Home > Directory > Profile Sources.
- Start with the highest level parent page and sequentially show the information architecture as the breadcrumb trail progresses.
- Each page link in the breadcrumb will be read by screen readers.
If the breadcrumb truncates, the ellipsis should be tagged with the label More breadcrumbs.