Version 1.0.0

Breadcrumbs

Breadcrumbs show hierarchy and navigational context for a user’s location within an application.

Breadcrumbs showing root label My Computer, truncation menu icon, Estimates and Drafts. Drafts breadcrumb item in active state.Breadcrumbs showing root label My Computer, truncation menu icon, Estimates and Drafts. Drafts breadcrumb item in active state.

Anatomy#


Image illustrating through labels the component parts of Breadcrumbs including its truncated menu, breadcrumbs list, breadcrumbs item, separator, and breadcrumbs title.

Options#


Key example of basic Breadcrumbs three layers deep, with items Home, Trend, March 2019 Assets

Default#

By default, breadcrumbs are displayed inline with the hierarchy shown in reading order.

Key example of multiline breadcrumbs with items Home, Trendy, March 2019 Assets. March 2019 Assets shown as page title.

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.

Key example of compact breadcrumbs with items Home, Trendy, March 2019 Assets

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.

Key example of truncated breadcrumbs with root context displayed. Items Home, truncation menu icon, Trend, March Assets. Home is the root item.

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#


Key example of overflow breadcrumbs truncated into menu, with truncation menu, Sub Item 3 and March 2019 Assets displayed. Items Home, Sub Item 1, Sub Item 2, Sub Item 3, and March 2019 Assets shown within the menu.

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.

Key example of drag and drop into breadcrumbs, with items Home, Trend, and March 2019 Assets. Cursor dragging item My Document over drop target of breadcrumbs item Trend.

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.

Key example showing correct usage of breadcrumbs to display hierarchy with items Genre, Comedy, Twelfth Night.

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.

Key example showing incorrect usage of breadcrumbs with filters. Items All Categories and Recent. Recent is shown as dropdown menu with items Recent, Featured, Downloaded. Recent is in selected state.

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.

Key example showing incorrect usage of breadcrumbs with indentation. Breadcrumbs truncation menu and items Sub Item and March 2019 Assets shown. Truncation menu in open state displaying options Home, Sub Item 1, Sub Item 2, March 2019 Assets all consecutively indented. March 2019 in selected state.

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.

Key example showing correct usage of truncating breadcrumbs. Shows truncation menu and item labelled A comparative study of artificial, where artificial is truncated with ellipsis.

Truncate labels with an ellipsis.

Key example showing incorrect usage of wrapping breadcrumbs. Shows truncation menu and item labelled A comparative study of artificial neural networks using, where label is shown wrapping two lines.

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.

Key example showing correct usage of tooltips to show breadcrumb items with truncated label. Label truncated with ellipsis, tooltip displaying entire label.

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.

Key example showing correct usage of truncation menu. Breadcrumb items hidden within truncation menu, last item Downloaded Screenshots and Assets shown.

Place breadcrumbs in the truncation menu to display long labels.

Key example showing incorrect usage of truncation. Truncation menu and three breadcrumb items shown, each label truncated with ellipsis.

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).

Key example showing correct usage of drag and drop in the context of asset management. Cursor moving My Document over breadcrumb item Print Ready.

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.

Key example showing correct usage of displaying an appropriate number of breadcrumb items. Truncation menu shown with three breadcrumb items Trend, Winter, Assets.

Only expose the relevant amount of items.

Key example showing incorrect usage of displaying appropriate number of breadcrumb items. Truncation menu shown with six breadcrumb items Files, Team, In Progress, Trend, Winter, Assets.

Don’t display too many breadcrumb items at once.

Icons in breadcrumbs#

Don't use icons within breadcrumbs. Since breadcrumbs are horizontally distributed, icons disrupt the rhythm and readability of the list.

Key example showing incorrect usage of icons in breadcrumbs. House icon, label Home, truncation menu icon, folder icon, label Trend, folder icon, label Assets.

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.

Key example showing correct usage of breadcrumbs for hierarchical navigation. Breadcrumb items Help, User Guide. Vertical tabs below breadcrumbs with labels Character styles, Object styles, Work with styles.

Use alternate navigation for traversing a hierarchy.

Key example showing incorrect usage of breadcrumbs for hierarchical and lateral navigation. Breadcrumb items Help, User Guide and dropdown for last item. Dropdown open with options Character styles, Object styles, Work with styles. Object styles is selected.

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.

Key example showing correct usage of mobile header navigation.

Rely on mobile header navigation.

Key example showing incorrect usage of breadcrumbs in mobile app. Mobile header navigation shown with breadcrumbs below. Truncation menu and items Sub Item, Trend.

Don’t use breadcrumbs for a mobile context.

Internationalization#


Key example of breadcrumbs in RTL languages. Arabic breadcrumb items listed from right to left.

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#


KEYINTERACTION
TabMoves focus to next item.
Shift + TabMoves focus to the previous item.
Enter or SpaceSelects item and navigates to that location. If focus is on menu, opens the menu.
Up/Down ArrowWhen menu is open, up and down arrow navigate through the menu items.

Changelog#


DateNumberNotes
Apr 17, 20201.0.0
  • This component has been added to the website
  • Corrected selected text color in menu

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

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).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

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.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.