Breadcrumb Preview

A breadcrumb helps people understand and move through the hierarchy of a complex site or app. It lists at least two location names, usually links, separated by dividers.

Breadcrumbs are secondary navigation. They provide wayfinding and fast access to higher levels of the hierarchy. Don’t use breadcrumbs alone. Always combine them with other navigation elements, like top or sidebar navigation.




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.

Breadcrumb width

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.

Breacrumb width in drawers

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.

Tooltip count

In tooltips, consider a count instead of listing each item

Tooltip long text

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.

Disabled item

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.

Truncated long text

Truncate text over the character count limit

Wrapped long text

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.

Truncated long text tooltip

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.

Non-interactive file paths


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


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


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.

Nav element usage

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

Keyboard navigation

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.


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


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



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.

Shortened name

Shorten names to avoid repetition or truncation

Repeated name

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.

Section history

Don’t use breadcrumbs to track session history