Tabsalternative
Use Tabs for flat, non-hierarchical navigationBreadcrumbs
Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.
Setup
import { Breadcrumbs } from '@fragments-sdk/ui';Examples
Default
Basic breadcrumb navigation
Loading preview...
With Icons
Breadcrumbs with icons on items
Loading preview...
Collapsed
Long breadcrumb trail collapsed with ellipsis
Loading preview...
Custom Separator
Breadcrumbs with a custom chevron separator
Loading preview...
Custom Landmark Label
Override the nav landmark label for screen readers
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Breadcrumb items (use Breadcrumbs.Item) |
separator | node | / | Custom separator between items |
maxItems | number | Not set | Maximum visible items before collapsing middle items with ellipsis |
label | string | Breadcrumb | Custom aria-label for the breadcrumb nav landmark |
Usage Guidelines
When to use
- Showing hierarchical page location (e.g., Home > Category > Product)
- Allowing quick navigation to parent pages
- Multi-level content structures like documentation or e-commerce
When not to use
- Flat navigation with no hierarchy (use Tabs or Header nav)
- Step-by-step wizards (use Stepper)
- Primary navigation (use Sidebar or Header)
Best practices
- Always include the current page as the last, non-linked item
- Keep labels short and descriptive
- Use maxItems to collapse long paths, keeping first and last visible
- The separator defaults to "/" but can be customized
- Use the label prop to customize the nav landmark name (defaults to "Breadcrumb")
Accessibility
- Uses <nav aria-label="Breadcrumb"> for landmark navigation
- Current page is marked with aria-current="page"
- Separators are hidden from screen readers with aria-hidden
- Ellipsis button has aria-label for collapsed items