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
Items: Link elements representing each level in the hierarchy
Collapsed Crumb (if applicable): Contains collapsed pages in a menu
Menu: Contains list of collapsed pages, appears on clicking collapsed crumb
Current page indicator: Visual styling for the current page (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
Responsiveness
First and Last crumbs will always be visible, rest of the crumbs can stack inside a collapsed crumb as per the available space
The entire breadcrumb component will wrap below the page title, if there is not enough space for the minimum
