Page Comparison

Page Properties

Component type

Navigation?

Document status

Status

colour	RedYellow
title	DRAFTIN PROGRESS

Design source (in Figma)

Author

Nick Harris

Responsible

Milestone

4

...

...

Screenshot taken from Figma appears to have no focus state for the dark mode. Needs questioning.

Behaviour

The current page is always the last item in the list and breadcrumbs should never display children of the current page unless it’s proximate to the page title (see visibility controls).
Breadcrumbs should never wrap onto a new line. If the width of the breadcrumbs breaks out of the parent container (or max width), breadcrumbs should adopt the overflow behaviour (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)

...

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.

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).
Extending breadcrumbs for structured data as used by search engines to categorise information from the page in search results: https://developers.google.com/search/docs/advanced/structured-data/breadcrumb