Usage #
Examples #
Basic #
Shows the current location within a navigational hierarchy.
Route #
A breadcrumb can be used with routing libraries to navigate between pages.
Custom Separator #
A breadcrumb allows customization of the separator between items using the separator template.
Ellipsis #
An ellipsis can be used to indicate hidden breadcrumb items.
Custom Item #
Custom content can be placed inside the items using the item template.
Accessibility #
Screen Reader
Breadcrumb uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the list item separators have aria-hidden to be able to ignored by the screen readers. If the last link represents the current route, aria-current is added with "page" as the value.
Keyboard Support
No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.