| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Item | Type | Notes |
1. Page name | Link | |
2. Divider | Simple text | |
3. Overflow indicator | Button | |
4. Overflow list | Dropdown |
...
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 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)
...
When tabbing though the list of links a user is able to tab into the truncation menu as if it were the next item in the list.
When the user reaches the last item in the list, the next tab will close the list and move focus onto the next item.
Level control:
A mechanism is needed to control the number of breadcrumb items to display.
...
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. |
|
|
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.
...