Breadcrumb Preview

Resources

Behavior

Breadcrumb width and overflow

Keep in mind the available space in your layout when determining the width of your breadcrumbs. Breadcrumbs will never wrap, but they may scroll horizontally if not constrained.

It’s safe to keep breadcrumbs between 30% and 50% of the overall surface width. This ensures people have enough space to derive context from the breadcrumbs, while also accommodating 400% zoom.

In some cases, breadcrumbs can span the entire width of their containers. Reserve this behavior for secondary content surfaces, like drawers. Use your best judgement when determining breadcrumb width and stay consistent within an experience.

When the maximum width is exceeded, the breadcrumb will collapse into an overflow menu, starting with the second item. This makes navigating upward easy and helps people maintain their current context. The first and last items are always visible.

For the best experience, include a tooltip on hover to give people an indication of the overflow items without having to open the menu.

Show a tooltip on hover or focus over the overflow trigger. Overflow menu appears on selection.

If there are many items in the overflow menu, consider a tooltip that tells people how many items there are instead of listing each breadcrumb item in a very long tooltip.

In tooltips, consider a count instead of listing each item

Long static text in the tooltip is difficult to scan

Disabled items

Use a disabled breadcrumb item to indicate a step in the hierarchy with no associated landing page, such as a category or top-level menu item.

Remember, breadcrumbs help people understand the hierarchy of an app at-a-glance. To create equitable experiences for everyone, make sure that disabled breadcrumb items are focusable with the disabledFocusable prop set to true and have an aria-label that lets screen readers know the full hierarchy.

Truncating breadcrumb items

By default, an interactive breadcrumb item label truncates when that name is longer than 30 characters, including spaces. Add a tooltip to display the full breadcrumb item name. The tooltip itself also has a default limit of 80 characters (including spaces), after which it will truncate.

You can set a different maximum character count for each of these, but we recommend enforcing a length limit of some kind. Truncation applies to item names at any level.

Truncate text over the character count limit

Do not wrap long item names

Be sure to also provide a tooltip on hover or focus of any truncated breadcrumb item that shows the entire link name.

Expand on truncated breadcrumb items in a tooltip

Non-interactive file paths

If you need to communicate a file path that provides context but no navigation, use a text string following the non-interactive file path pattern.

The non-interactive file path is a text-only variant that’s purely informational. It’s best used for file paths in a task flow where people can’t navigate or wouldn’t want to leave their current context.

The divider can be either a chevron or a forward-slash. Include a space on either side of the divider to differentiate it from a conventional file path without spaces.

Layout

1. Divider creates a visual delineation between breadcrumb items.
2. Current item visually indicates the current location.

Dividers

A divider is placed between each breadcrumb item. Dividers aren’t interactive, don’t receive focus, and are ignored by assistive technology.

Accessibility

Most aria labels are built into the links that form the breadcrumb. However, because the current page is non-interactive, add aria-current=Pagename to the last item in the breadcrumb.

Use <nav> landmark

To make the breadcrumbs accessible to users navigating the page using landmarks, use the nav element to wrap your markup. Use aria-label to label this landmark.

The end developer might call out the aria-label here depending on the experience.

Keyboard focus goes to the first interactive element within the container. Depending on the experience, either arrows or Tab key can be used to navigate the items in the breadcrumb.

Use <ol> to indicate hierarchy

In order to make the set of links structured as a hierarchy, use an ordered list tag.

Add aria-current to selected link on the breadcrumb

Make sure to add the aria-current to the last link (the selected page).

Reflow

At 400% zoom and in small viewports, shorten the trail to show only the last level.

Content

Keep it short

By default, breadcrumb items will truncate after 80 characters, so make sure each name is short, specific, scannable, and easy to read. If an item truncates, always show the name in a tooltip. The first item in the breadcrumb is always the home page or root folder and the last, the current location.

Ideally, each breadcrumb item will match a page title exactly. However, it’s OK to shorten page names to avoid repetition and truncation as long as it’s still easy to understand. Shortened names should only use approved feature or product names and remain clear and specific.

Shorten names to avoid repetition or truncation

Repetition makes the breadcrumb harder to scan

Show hierarchy, not history

Show the hierarchical structure of a site, not the history of pages traversed in a particular session, which may vary. If there are multiple ways to get to the same page, show the most obvious and common path in the breadcrumb.

Don’t use breadcrumbs to track session history