Breadcrumbs
Uses
- Helps users backtrack or jump to higher-level pages.
- Shows the path from the homepage through categories to the specific item.
- Helps users navigate multiple levels of pages or categories effectively.
Value to user
- Provides orientation and quick navigation in deep structures.
- Location Awareness: Users immediately understand their current page within the site structure.
- Easy Backtracking: Users can click on previous links in the trail to quickly return to parent pages.
- Secondary Navigation: Breadcrumbs offer a different path than the primary navigation menu, increasing usability on sites with many pages.
- Contextual Information: The breadcrumb trail provides context for the current page and helps users find previously visited pages.
- Better User Experience: By making navigation more intuitive and efficient, breadcrumbs contribute to an overall better user experience.
Best practices
- Show the full path clearly and in order.
- Make each step clickable.
- Keep labels short and meaningful.
- Use symbols to clearly seperate individual links in the breadcrumb trail.
- Place breadcrumbs consistently, typically at the top left-hand of the page, below the header, and above the page title.
- Show the full path on a single line. On mobile, the breadcrumbs can collapse to drop down menu, or similar device.
- Truncate very long breadcrumb trails by providing a clear control for expanding the hidden path sections
- Where required, truncation should be applied to the beginning of the breadcrumb trail. i.e,. the point furthest from the users current location.
Accessibility notes
- Use semantic “nav” with aria-label=”breadcrumb”.
- Ensure sufficient contrast between links.
Examples
Default
Content page
All breadcrumbs
Can’t find what you’re looking for? Get in touch