Breadcrumbs component

[leonid]

A Breadcrumbs component is a UI element that helps users navigate through a hierarchy of pages or sections. Here are the key features a Breadcrumbs component should have:

1. Hierarchy Representation: Display the hierarchical path from the current page to the root.
2. Links: Each breadcrumb item should be a clickable link that navigates to the corresponding page or section.
3. Current Page Indicator: Highlight the current page or section to indicate the user's current position.
4. Separator: Customizable separator between breadcrumb items (e.g., /, >, |).
5. Overflow Handling: Handle long breadcrumb paths by collapsing intermediate items or providing a dropdown for overflow items.
6. Accessibility: Ensure the breadcrumbs are accessible with proper ARIA attributes and keyboard navigation.
7. Custom Styling: Ability to customize the appearance through CSS classes or styles.
8. Responsive Design: Adaptable to different screen sizes and orientations.
9. Dynamic Updates: Ability to dynamically update the breadcrumb items based on navigation changes.
10. Event Handling: Emit events for user interactions such as click on breadcrumb items.
11. Icons: Option to include icons alongside breadcrumb items for better visual representation.
12. Tooltips: Option to show tooltips for breadcrumb items, especially useful for truncated or collapsed items.

These features ensure that the Breadcrumbs component is versatile, user-friendly, and accessible.

Design

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=515-5313&m=dev

To be implemented

• Vue component with basic logic
• Styles and extension points as css properties
• Vitepress documentation: feature description, examples and api documentation
• Unit tests for component and its composition
• Storybook demos and documentation

Implemtation notes

• breadcrumb item states should be configurable
• active path/route can be represented as active route