- Guidelines
- React API Reference
- Blazor API Reference
Breadcrumbs provide a navigational aid that shows users their current location within a hierarchical structure and allows them to navigate back to higher-level pages.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use breadcrumbs for hierarchical navigation structures with 3+ levels. They help users understand their location and navigate upward. |
| Content | Use clear, concise page/section names. Current page should be last and visually distinct (typically non-interactive). |
| Behavior | Each breadcrumb item (except the current page) should be a clickable link to that level. Provide clear visual separators between items. |
| States | Current location should be visually distinct. Prior levels should have clear hover/focus states for interactive elements. |
| Feedback | Provide visual feedback for interactive elements (hover, focus). Ensure current page is easily identifiable. |
| Examples | Website sections, multi-step processes, product categories, or document hierarchies. |
Best Practices
- Complete Path: Show the full path from the root level to the current page.
- Concise Labels: Use short, descriptive names for each level to avoid excessive length.
- Visual Separators: Use clear visual indicators (icons, slashes, etc.) between breadcrumb items.
- Responsive Design: Adapt breadcrumbs for smaller screens—consider truncating or collapsing middle items when space is limited.
- Consistent Placement: Position breadcrumbs consistently, typically at the top of the content area below any global navigation.
Do’s and Don’ts
Do
- Show the complete hierarchical path.
- Make previous levels clickable links.
- Differentiate the current page visually.
- Keep labels concise and descriptive.
Don't
- Use breadcrumbs for flat navigation structures.
- Include unnecessary levels or details.
- Make the current page a clickable link.
- Change breadcrumb patterns across different sections.
Additional Guidance
- Psychological Impact:
- Spatial Orientation: Breadcrumbs provide users with a mental map of their location within a site or application.
- Reduced Anxiety: Clear navigation paths prevent users from feeling lost and reduce fear of exploring deeper content.
- Efficiency: Breadcrumbs allow users to quickly navigate up to higher levels without using the back button or main navigation.