Breadcrumbs
A standard navigation element that helps users orient themselves and move through the different levels of a website.
Dos
Show the current position within the website's hierarchical structure (rather than the user's session history)
Don'ts
Don’t use for shallow websites with 2 or fewer levels
Don’t use as a substitute for the main navigation bar
Variations
Accessibility
Keyboard Accessible
Users can navigate through focusable content, each item in the breadcrumbs component is a link. Using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ key to activate. WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order
Enhanced Tap Targets
The breadcrumb component has adequate white space around the entire breadcrumb structure and in between each breadcrumb to ensure clear tap targets and prevent users from missing or accidentally clicking other breadcrumbs. WCAG 2.5.5: Tap Targets
Swipe Behavior
If breadcrumbs wrap to multiple lines, the component is designed for the user to be able to use swipe behavior for navigation to help navigate more easily through multi-line breadcrumbs by providing a larger and more manageable interactive area. WCAG 2.5.5: Target Size
Hover and Focus State
The breadcrumb links have distinctive styling for both hover and focus states, providing visual cues that the element is interactive. WCAG 1.4.13: Content on hover or focus
Color Contrast
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability WCAG 1.4.3: Contrast (minimum)
Titles
Consider using short titles for each breadcrumb WCAG 2.4.6: Headings and Labels
Layout
Guidelines
- Include the current page as the last item in the breadcrumb trail except for articles or events.
- The final breadcrumb, when representing the current page, should not be a link.
- Consider using a short title for the breadcrumb title, if this is an option in your CMS.