Overview
Breadcrumbs are a type of secondary navigation. They show the path from the homepage to the current page. They help users see where they are in the website’s structure.
They do not show the steps a user took to get there — only where the page fits in the overall site hierarchy.
Visually, they are located at the top left of a page, right above the page title.
Each breadcrumb item is the name of a parent page and links back to that page. On mobile, breadcrumbs are shortened to save space.
Usage
When to use
Show breadcrumbs on all pages (except the homepage).
When not to use
- Don’t use breadcrumbs to replace the main navigation.
- Don't show breadcrumbs on the homepage.
Accessibility
Breadcrumb links must clearly describe the link destination. Do not use vague labels.
Mouse
- Users can click on a breadcrumb’s link to go to that specific page.
- Separators between page links are not interactive.
Keyboard
- Users can navigate between breadcrumb links by pressing Tab and Shift-Tab.
- Users can trigger a breadcrumb link by pressing Enter while the link has focus.