Overview
The Breadcrumb component provides a visual representation of a user's location within the application's hierarchy, showing the navigation path and allowing users to navigate back to previous levels.
Usage
Breadcrumbs are used to:
Show the current page's location within the navigation hierarchy
Provide navigation shortcuts to higher levels in the hierarchy
Help users understand the structure of the application
Allow quick navigation to parent or ancestor pages
Anatomy
Container: The wrapper for the breadcrumb path
Items: Link elements representing each level in the hierarchy
Separators: Visual elements (often chevrons or slashes) between breadcrumb items
Current page indicator: Visual styling for the current page (often non-interactive)
Accessibility
Have proper ARIA roles for navigation
Provide proper focus states for interactive elements
Ensure separators are properly hidden from screen readers
Support keyboard navigation