Key Points
- Breadcrumbs are mainly used as navigational and orientation aid that allows the user to understand the structure and hierarchy of websites and applications
- The current page should be displayed as the last item in the breadcrumb or as a clear page heading below.
- The current page should always be shown in the breadcrumb or page title
- The home link is represented by a home icon button
- Breadcrumbs should sit above the page title when they are used.
Usage
So the user is aware the the current page should be shown either as:
- the last item in the breadcrumb
- the page title.
Structure
The usual structure of breadcrumbs must include:
- Last item should always be the current page
- First item should always be the homepage with a link to return to it. It will be represented by a home icon
- Middle pages should be linked to the corresponding pages
Middle pages can be shortened to a truncated link if there is not enough space. We strongly recommend at least showing the immediately higher level to the current page
Hierarchy
The breadcrumb hierarchy should always show the user where they are in the journey. Starting from the home icon and then displaying a text link for each level in the hierarchy.
Truncation
When a text link is longer than 12 characters it should be truncated, allowing more of the breadcrumb to be displayed to the user. The full label should be available as a title tag so that it can be displayed to the user on hover or via a screen reader.
File Links
Roadmap
- How should breadcrumbs be used alongside titles and steppers?
- How to display the full label to the user when text is truncated?
- What is the UI for breadcrumbs on mobile. Ideation for this has begun in this file.