Copy of [COMPONENT] overview v. 0.1

Component type	Navigation?
Document status	DRAFT
Design source (in Figma)	https://www.figma.com/file/0kGNJaC3xZ66WElO5TWvX3/Chameleon-System-(Phase-2)?node-id=2340%3A49319
Author	Nick Harris
Responsible

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.

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)

Overflow - TDB:

When the number of items in the breadcrumb list exceeds the width of its parent container, or specified max with, or specified number of items, breadcrumbs should truncate displaying only the first and list navigation items and a truncation menu button (…).
The truncation menu displays all options that are no longer visible. Items are listed with the hierarchy ordered from top (root) to bottom.

Level control:

A mechanism is needed to control the number of breadcrumb items to display.

Visibility controls:

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 nav landmark and marked with aria-label="breadcrumbs"
Use ol to denote link hierarchy
add 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).