| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Breadcrumbs are a secondary navigation component used to show a user's location in a hierarchical structure. They communicate the path a user has taken to the current page and offer a quick way to navigate back up the path.
Use When
The users location in a hierarchical structure is a useful piece of information to communicate.
Don’t Use When
More appropriate navigation components are available.
Never use breadcrumbs to replace the main navigation on a page.
Related/Similar Components
X
X
Key Content
Item | Type | Notes |
Page name | Link | |
Divider | Simple text | |
Overflow indicator | Button | |
Overflow list | Dropdown |
Visual Style
Breadcrumbs come in two modes: Light and Dark. They appear as a horizontal list of text links separated by a divider character.
...
Screenshot taken from Figma appears to have no focus state for the dark mode. Needs questioning.
Behaviour
General:
The current page is always the last item in the list and breadcrumbs should never display children of the current page.
Breadcrumbs should never wrap onto a new line. If the width of the breadcrumbs breaks out of the parent container (or max width) see Overflow.
TDB whether breadcrumbs adopt the max with of their parent container or have a specified max width (similar to max with of content)
...
A mechanism is needed to control the visibility of the current page. For example if the current page title is repeated as the next element in the page.
Editorial
Content editors may be given the option to define a ‘short’ version of the page title to be used in some navigational components. If this name has been defined then it should be used instead of the default page title.
Accessibility
Breadcrumbs must be keyboard friendly with the following behaviours:
Key | Interaction |
|---|---|
Tab | Move focus to next item |
Shift + Tab | Move focus to previous item |
Enter or Space | Selects item and navigates to location. If focus is on truncation menu, opens the menu. |
Up/Down Arrow | When menu is open, up and down arrow navigate through the menu items. |
ESC | When menu is open, closes the menu. |
*TDB - Discuss esc behaviour in more details
Breadcrumbs should be wrapped in a
navlandmark and marked witharia-label="breadcrumbs"Use
olto denote link hierarchyadd
aria-current='location'to the current page link.
Analytics & Data
X
X
Future Expansion
Currently, breadcrumbs only come in one style but in the future there may be a case where we allow the configuration of the divider style and/or allow icons to be used as links (for example the root link could be a home icon).
Wider Conversations that may impact this
Item: Description
Item: Description
...
Examples
...
Useful links
https://spectrum.adobe.com/page/breadcrumbs/#Usage-guidelines
...