Breadcrumb
Examples
Anatomy
How to use
When to use
- Hierarchical Navigation: When the website has a multi-level hierarchy, helping users keep track of their location.
- Deeply Nested Content: For pages that are several levels deep, providing an easy way to navigate back.
- Complex Websites: In large websites with many sections and subsections, to enhance navigability.
- User Path Clarity: When you want to show the path the user has taken to reach the current page.
When not to use
- Single-level Websites: If your website only has a single level of navigation, breadcrumbs are unnecessary.
- Linear Processes: For processes that are linear and sequential (like a checkout process), breadcrumbs may confuse users.
- Primary Navigation Replacement: Breadcrumbs should not replace the primary navigation of your site.
- Redundant Navigation: If there are already other strong navigational aids in place that serve the same purpose.
Alternatives:
- Navigation Menus: Use a well-structured primary navigation menu.
- Sidebars: For complex websites, a sidebar navigation can also help users understand where they are.
- Step Indicators: For linear processes, step indicators or progress bars can be more effective.
Accessibility Guidelines:
- ARIA Labels: Ensure that breadcrumbs are marked up properly with ARIA labels to help screen readers understand the breadcrumb trail.
- Keyboard Navigation: Breadcrumbs should be fully accessible via keyboard navigation, allowing users to tab through each link.
- High Contrast: Ensure sufficient colour contrast between breadcrumb text and background for readability.
- Readable Text: Use a font size that is large enough to be read easily, typically at least 16px.
- Descriptive Links: Each breadcrumb link should have descriptive text to convey the link’s purpose, avoiding vague terms like "Page 1" or "Section 2".