| Table of Contents | ||||||||
|---|---|---|---|---|---|---|---|---|
|
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
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.
| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Usage
| Tip |
|---|
Do’s
|
| Warning |
|---|
Dont’s
|
Anatomy
Breadcrumbs don’t have any variations or visual style options.Item | Component type | Content type | Notes | |
|---|---|---|---|---|
1 | Link | Text | ||
2 | Separator | Text | ||
3 |
Visual style
Overflow button | n/a | |||
4 | Overflow menu | n/a | n/a | |
- | Navigation name (not shown) | n/a | Text | |
- | Overflow button aria-label (not shown) |
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.
Behaviour
n/a
Accessibility
n/a
Related components
Table of contents
A very brief description
Sitemap links
A very brief descriptionGeneral:
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).
Overflow
Without JS:
Breadcrumbs don’t overflow and instead wrap onto the next line.
With JS:
When the number of items in the breadcrumb list exceeds the width of its parent container, or specified max width, or specified number of items, breadcrumbs should truncate displaying only the first and last navigation items and a truncation menu button (…).
The truncation menu displays all options that are no longer visible in the following ways:
Option 1
The truncation menu displays all options that are no longer visible. Leaving ‘root' and 'current page’
Option 2 - If current page is visually hidden (see visibility controls)
The truncation menu displays all options that are no longer visible. Leaving ‘root' and the current page’s 'parent page'
Items are listed with the hierarchy ordered from top (root) to bottom.
Overflows are accessed by clicking the overflow button (…) or appropriate keyboard control.
Overflows are ‘pop-overs'. They site above site content and don’t change/push/interact with any content on the page.
Tabbing
When tabbing though the list of links a user is able to tab onto the truncation menu button and activate it suing the spacebar.
When the user reaches the last item in the truncation menu, the next tab will close the list and move focus onto the next item.
Accessibility
Ensure you use an appropriate
navigationName