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.
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.
![Breadcrumb width](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb1.DFK5cKZm_2bBY2q.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb18.D-EgSRBN_A7FpO.png)
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.
![Tooltip](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb2.D9NSd7Ob_2p5pK6.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb3.BnRZKLkv_BA4dD.png)
In tooltips, consider a count instead of listing each item
![Tooltip long text](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb4.qGgM5MNT_Z1KVoFT.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb5.RpYnSqK4_19iDS8.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb6.DV_Sl2vH_zg4cL.png)
Truncate text over the character count limit
![Wrapped long text](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb7.BwIo3Gpe_Z2pXbNV.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb8.CruJWWVW_1wL2Cl.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb9.BjWRIz_w_SBuvv.png)
Layout
![Layout](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb10.BDZGk9NI_ZVBM1w.png)
- Divider creates a visual delineation between breadcrumb items.
- 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.
![Nav element usage](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb14.H4MpmJGl_ZmGUFl.png)
The end developer might call out the aria-label here depending on the experience.
![Keyboard navigation](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb15.Dx_-PjHi_kFSau.png)
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.
![Hierarchy](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb16.Lr8-Fs01_TQq1G.png)
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.
![Reflow](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb17.Dkn2z_i8_Z14Qv8z.png)
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.
![Shortened name](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb11.BesTTIwb_WjthX.png)
Shorten names to avoid repetition or truncation
![Repeated name](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb12.DQeUGTFV_24j97o.png)
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](https://fluent2websitecdn.azureedge.net/cdn/breadcrumb13.Clz2t883_19a1vi.png)
Don’t use breadcrumbs to track session history