Breadcrumb shows users their location in the hierarchical structure of the product.
Overview
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.
Anatomy
- 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.
Demo
Open the component in Figma.
When to use
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.
When not to use
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.
Behaviors
All pages in a breadcrumb component are interactive except for the current page.
Placement
Breadcrumbs are placed at the top leading edge of the page. They sit underneath any header or top navigation, but above the page title.
Hierarchy
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.
Overflow
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.
Closed
The default state of overflow.
Open
When the overflow is selected, a menu opens showing the hidden links.
Truncation
Breadcrumbs should never wrap multiple lines or exceed five page links. Enable the overflow prop to truncate if either of these issues occur.
States
As an interactive element, the page link has the following states:
Default
The default enabled state of a page link.
Hover
The hover state is initiated when a user pauses over a page link with their cursor.
Disabled
The disabled state prevents the user from clicking a page link to navigate to a page.
Accessibility
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.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for breadcrumb.
Content guidelines
Page link
- 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.
Content accessibility
- 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.