Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Breadcrumbs
Use breadcrumbs to display a list of links to the parent pages of the current page in hierarchical order.
Breadcrumbs help users find their place within a website or web application.
To ensure the component is placed correctly set breadcrumbs in the pageConfig of the base page template.
How it works
The set of links is structured using a <ul> to provide semantic structure.
Landmarks
A <nav> element labelled “Breadcrumbs” identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
Separators
To prevent screen readers announcing the visual separators between links, they are added via CSS.
The separators are part of the visual presentation that signifies the breadcrumb trail.
This is already semantically represented by the <nav> element with its aria-label of “Breadcrumbs”. Therefore, using a display technique that is not used by screen readers prevents unnecessary distraction.
Variants
Single breadcrumb
When the component only has a single breadcrumb it will display like this.