Breadcrumbs
Breadcrumbs contain a list of hyperlinks to visualize the page's location. Users can navigate to any “ancestor” pages within the hierarchy.
1. Anatomy
Aria attributes
Value | Purpose |
aria-label= “breadcrumb” | Describes the type of nav provided. |
aria-current= “page” | Applies to the last link in the set to indicate the current page. |
2. Configurations
2.1 #of items
Add page links to the component.
Please limit the #of items to less than 5 to avoid cognitive overload.
5. Keyboard experience
The keyboard focus on the hyperlinks one by one. It does not focus on the current page.
7. Resilience & responsiveness
Once the component hits the parent container’s bound, it wraps to the next line. Please note, the hyperlink itself does not wrap.
