Breadcrumb
A breadcrumb is a secondary navigation showing the website hierarchy.
Component meta
Component identifier
- component-breadcrumbs
Tags
- Global
Design version
- 2023-01-04
Design principles
- Everyday first
Guidelines
Short description
We use breadcrumbs to display site hierarchy (rather than navigation path) and to increase findability of parent pages.
Breadcrumbs help users navigate upward in the hierarchy and typically help with back-movement also. They also help with context when navigation is otherwise out of sight (for example in a mobile view).
Breadcrumbs have been proven to reduce bounce rates for search-users, when they are able to quickly find related pages.
When and how to use it
Use for sites/applications that have a substantial amount of pages present deeper down in site structures.
Behaviour
Desktop
The full path may not take up more than one row in the layout. If the path is too long the path is truncated after the root element (i.e. Home ... > Loans > Home > Interest ).
Mobile
For mobile views we only display the link to the parent page, as the full path tends to take too much space.
Desktop
Mobile
Writing
-
Accessibility
Review
Result from the latest accessibility review of the component (Chlorophyll+React): 2024-07-30
- Contrast: ok
- Colour-blindness: ok
- Code + aria: ok
- Touch + keyboard: ok
- Dark-mode: n/a
- Focus: ok
- Reader: ok
Specification
- Details: Specification in Figma
- Instruction: How to access Figma