A breadcrumb shows the user their position in a navigation hierarchy and enables them to navigate upwards to parent pages. The breadcrumb is always a small component and should never entirely replace primary navigation.
Often with our deep hierarchies and many levels of content, it is preferable to truncate the breadcrumb as a space-saving measure. On desktop devices the breadcrumb should never wrap on to more than one line.
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text. Our preferred default font-size is 15px.
Depending on the length of the page names, our preference is that breadcrumb trails should not include the current page. For example:
/grandparent / parent /
If a page doesn’t have a title or the current page is not clear to users, it can be included in the breadcrumb trail. If the current page is included in a breadcrumb it is not an interactive link.
Breadcrumbs always left-align, usually in relation to the nearest content element like a title heading.
Because breadcrumbs are made out of a series of text links, there are two states to consider: default and active.
Default states are reserved to pages that the user is currently visiting or if the site doesn't have a direct page the user can go to.
Active states are used when the user can move to a specific page. Parent pages within the navigation hierarchy and the home page usually fall into this category.
The user can only interact with the active breadcrumbs, which usually link to the home page and/or the parent pages.
Breadcrumbs sit in the top left area of the page, usually underneath the header but above the title heading.
The chevron and diagonal line separator are used to clearly distinguish between the different page links. The home icon provides an alternative to the page link, especially in cases of extensive page links. It enables us to save a bit more space on the page.
When to use this component
- Information architecture goes more than two levels deep into the content hierarchy
- Keeps the user informed where they are currently in the navigation hierarchy without taking up too much space on the page.
When to consider a different component
- If you need to indicate progress throughout a sequence (e.g. on a form).
- Using them on products with single-level navigation creates unnecessary clutter.
Consider an alternative to wrapping. The longer the page titles are displayed in a breadcrumb, the more likely they will wrap (especially on mobile devices). Consider either truncating the title or choosing a shortened name for the page.
Always start with the page highest in the hierarchy. This way the user will be able to understand the relationship and pathway of navigation of the pages better.
Don't make the width of the breadcrumbs too small. Consider the width of the breadcrumbs to ensure users can interact with them even on smaller devices.
- Use semantic HTML to ensure that the component is properly interpreted by assistive technology.
- Provide clear and concise labels for each breadcrumb item that accurately represent the page or location.
- Use keyboard accessibility to allow users to navigate the breadcrumb with the keyboard.