Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
By default, breadcrumbs are displayed inline with the hierarchy shown in reading order.
The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location.
When needing to optimize for functional space, the compact option is useful for reducing the height of the breadcrumbs while still maintaining the proper user context.
Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into the menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful.
Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display.
The truncation menu displays all options within a breadcrumb. Items are listed with the hierarchy ordered from top (root) to bottom and include the currently selected item.
Breadcrumbs can have optional behavior to allow for drag and drop functionality. This behavior allows for easy reorganization of assets within a hierarchical structure.
Breadcrumbs need a consistent hierarchical structure because they create a path for discovery and context for a user’s current location.
Use breadcrumbs to communicate hierarchical relationships.
Breadcrumbs should be a form of navigating a linear hierarchy. They should not be used for any other interactions, such as displaying filters.
Don’t use breadcrumbs as filters.
The truncation menu should display all available options within the hierarchy where a user is located — not as indented. Doing this provides context for the directionality of how the menu is being displayed. Adding indentation to the menu items does not add value to understanding the hierarchy, and it can actually decrease the readability of the menu options.
Don’t indent menu items.
When list items are truncated into a menu but the label text is still too large for the horizontal space, truncate the text with an ellipsis. By default, truncation should occur at the end of the title. If your users need to see the end of truncated titles, truncating the middle of the title is acceptable.
Truncate labels with an ellipsis.
Don’t wrap breadcrumb labels.
When the breadcrumb title is truncated, a tooltip should display the full title when the user hovers, keyboard focuses, or single-taps on mobile.
Display truncated items in a tooltip.
Prioritize using the truncation menu when breadcrumb labels are long. Never truncate more than one breadcrumb label. If the current location has a long label, all items can be truncated into the menu.
Truncation should be avoided by way of the breadcrumbs overflow behavior, although in some cases the final breadcrumb title may truncate with an ellipsis.
Place breadcrumbs in the truncation menu to display long labels.
Don't truncate multiple labels at once.
Drag and drop should only be used in appropriate use cases, such as within asset management. This feature allows for users to modify the placement of assets and folders without the need for other UI mechanisms (e.g., tree view).
Use drag and drop for asset management use cases.
Be mindful of your user’s cognitive load and truncate breadcrumbs appropriately. Displaying too many levels can be overwhelming. By displaying only 4 items in the hierarchy (including the root item, if you are displaying it), users will quickly understand context while still having easy access to any truncated options. Truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display.
Only expose the relevant amount of items.
Don’t display too many breadcrumb items at once.
Don't use icons within breadcrumbs. Since breadcrumbs are horizontally distributed, icons disrupt the rhythm and readability of the list.
Don't use icons in breadcrumbs.
Breadcrumbs are a way for traveling up a hierarchical navigation and should not be mixed with controls intended for lateral or non-hierarchical navigation.
Use alternate navigation for traversing a hierarchy.
Don’t modify breadcrumbs for navigating within a single layer of hierarchy.
Breadcrumbs in a mobile web application conform to Spectrum’s scale system by enlarging by a certain amount. They are a responsive alteration of the existing web component, for smaller screens.
In native mobile applications, users rely more heavily on native header bars for indication of their location and for the ability to travel back up the hierarchy one level at a time.
Rely on mobile header navigation.
Don’t use breadcrumbs for a mobile context.
For right-to-left languages, breadcrumbs should be right aligned, with the order of hierarchy mirrored. The root should be farthest right, and the user’s current location farthest left. The breadcrumb separator icon should also be mirrored and point to the left.
|Tab||Moves focus to next item.|
|Shift + Tab||Moves focus to the previous item.|
|Enter or Space||Selects item and navigates to that location. If focus is on menu, opens the menu.|
|Up/Down Arrow||When menu is open, up and down arrow navigate through the menu items.|
|Apr 17, 2020||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.