Breadcrumbs
Navigation component that shows the current page location within a hierarchical structure, helping users understand where they are and navigate back.
Basic Usage
Separators
Chevron (Default)
Slash
Dot
Sizes
Small
Medium (Default)
Large
With Icons
Truncation with maxItems
Full Path (7 items)
Truncated to 5 items
Shows first item, ellipsis, then last 4 items
Truncated to 4 items
Shows first item, ellipsis, then last 3 items
Truncated to 3 items
Shows first item, ellipsis, then last 2 items
Props
| Name | Type | Default | Description |
|---|---|---|---|
items* | BreadcrumbItem[] | - | Array of breadcrumb items to display |
separator | 'chevron' | 'slash' | 'dot' | 'chevron' | Separator icon between items |
size | 'sm' | 'md' | 'lg' | 'md' | Size of breadcrumbs |
maxItems | number | - | Maximum items to show (min: 2). Truncates with ellipsis if exceeded |
className | string | - | Additional CSS classes |
BreadcrumbItem Type
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | Display text for the breadcrumb |
href | string | - | Link URL. If omitted, item is not clickable (current page) |
icon | ReactNode | - | Optional icon to display before label |
Usage Guidelines
When to use
- •For hierarchical navigation showing the path to the current page
- •In applications with deep navigation structures (e.g., e-commerce categories)
- •When users need to navigate back to parent pages quickly
- •To provide context about the current location in the site structure
Best practices
- •Keep labels concise and clear - avoid overly long text
- •The last item should always be the current page (no href)
- •Use maxItems for deep hierarchies to prevent overflow
- •Place breadcrumbs near the top of the page, above the main heading
- •Use consistent separator styles throughout your application
Accessibility
- •Uses semantic HTML with nav and ol elements
- •Includes aria-label="breadcrumb" on navigation landmark
- •Current page marked with aria-current="page"
- •Separators have aria-hidden="true" to avoid screen reader clutter
- •Keyboard accessible with visible focus indicators
Do's and Don'ts
✓ Do
- •Use breadcrumbs for hierarchical navigation with 3+ levels
- •Keep labels short and descriptive
- •Make the current page (last item) non-clickable
- •Use maxItems to truncate very long paths
- •Place breadcrumbs near the top of the page
✗ Don't
- •Don't use breadcrumbs for single-level navigation
- •Don't make the current page clickable
- •Don't use overly long labels that wrap to multiple lines
- •Don't mix different separator styles on the same page
- •Don't show breadcrumbs that don't match the actual page hierarchy