Spectrum
Breadcrumbs
Breadcrumbs show hierarchy and navigational context for a user’s location within an app.
Table of contents#
Anatomy#
Options#
Default#
By default, breadcrumbs are displayed inline with the hierarchy shown in reading order.
Multiline#
The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location.
Compact#
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.
With root 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.
Behaviors#
Overflow#
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.
Drag and drop#
Breadcrumbs can have optional behavior to allow for drag and drop functionality. This behavior allows for easy reorganization of assets within a hierarchical structure.
Usage guidelines#
Use breadcrumbs to show hierarchy#
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.
Use breadcrumbs for hierarchical navigation#
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.
Don't indent menu items#
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.
Don’t wrap breadcrumb list 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.
Tooltips#
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.
Truncation and overflow#
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#
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.
Don’t show too many breadcrumbs at once#
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.
Icons in breadcrumbs#
Don't use icons within the labels for breadcrumbs. Since breadcrumb labels are horizontally distributed, icons disrupt the rhythm and readability of the list.
Don't use icons in breadcrumbs.
Don’t modify breadcrumbs for lateral navigation#
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.
Mobile breadcrumbs #
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.
Internationalization#
RTL#
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.
Keyboard interactions#
| Key | Interaction |
|---|---|
| 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. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 06, 2022 | 2.0.0 |
|
| Apr 17, 2020 | 1.0.0 |
|
Design checklist#
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
All color themes
Works properly across all four color themes (lightest, light, dark, darkest).
All platform scales
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Accessible contrast for text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Content design
UI language and information design considerations have been incorporated into component design.
Defined options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Defined behaviors
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI kit
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
Generated UI kit
Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.
In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.
Bottom navigation (Android)