Figma component
Show the component in Figma
Healthy
Show details
Overview
Key Features
- Item Limit: Supports displaying up to three visible items.
- Overflow Handling: Provides an overflow option using an icon that opens a dropdown menu.
- Accessibility: Fully keyboard and screen-reader accessible.
Anatomy
- Breadcrumb: Each breadcrumb item represents a step in the navigation path. The items are clickable.
- Separator: A visual divider between breadcrumb items.
- Overflow icon: When the breadcrumb path exceeds 3 items, an overflow icon is used.
- Overflow list: The overflows items are grouped into a list for space efficiency.
Look and Feel
States
States define how the component behaves and appears in different interactions:
- Default: The standard appearance when inactive
- Hover: Highlights the field when the user hovers over it
- Focus: Indicates active input with a visible focus indicator.
Display logic
Location Based
These illustrate the site’s hierarchy and show the user where they are within that hierarchy.
Last Breadcrumb Hidden
Breadcrumbs are placed below the header and navigation but above the page title. To avoid redundancy, the last breadcrumb is visually hidden while still defined in the code using the current attribute, ensuring accessibility without duplicating the page title.
Best Practice
Do
- Use breadcrumbs in applications with a hierarchical structure (e.g., multi-level pages).
- Use short, descriptive labels for each breadcrumb item.
Don't
- Include the current page title in the breadcrumbs.
- Avoid using breadcrumbs as the sole means of navigation.
- Don’t rely on breadcrumbs in flat information architectures where there is no hierarchy.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.