Breadcrumbs
A hierarchical navigation component that shows the user's current location within the site structure. Supports clickable links with automatic separators and proper ARIA attributes.
Basic Breadcrumbs
Deep Navigation
Real-World Examples
Zika Prevention Tips
Learn effective strategies to protect yourself from Zika virus.
Notification Preferences
Manage how and when you receive alerts.
Usage Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | array | [] | Array of breadcrumb items |
| class | string | '' | Additional CSS classes |
Item Object Format
| Property | Type | Required | Description |
|---|---|---|---|
| label | string | Yes | Breadcrumb text (or use 'name') |
| href | string|null | No | Link URL (omit for current page) |
Key Features
Automatic Separators
Chevron separators automatically added between items
Current Page Indicator
Last item styled as current page with aria-current
Semantic HTML
Uses nav and ordered list for proper structure
Responsive Wrapping
Breadcrumbs wrap gracefully on smaller screens
Accessibility Features
ARIA Attributes:
- Navigation landmark with
aria-label="Breadcrumb" - Current page has
aria-current="page" - Separators have
aria-hidden="true"
Semantic Structure:
- Uses
<nav>element for navigation landmark - Ordered list
<ol>represents hierarchy - Last item is not a link (current page)
Keyboard Navigation:
- All links are keyboard accessible
- Clear focus indicators with ring offset
- Hover states provide visual feedback