Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Loading preview…
1
<Breadcrumb2
divider="chevron"3
items={[4
{ label: 'Dashboard', href: '#' },5
{ label: 'Account', href: '#' },Installation
npx sdaia-ui@latest add breadcrumb
Usage
import { Breadcrumb } from "@/components/ui/breadcrumb"<Breadcrumb levels={3} />Examples
Two Levels
Use `levels={2}` for a two-level breadcrumb path.
Loading preview…
1
<Breadcrumb2
levels={2}3
/>Three Levels
The default three-level breadcrumb.
Loading preview…
1
<Breadcrumb2
levels={3}3
/>Four Levels
Use `levels={4}` for deeper navigation hierarchies.
Loading preview…
1
<Breadcrumb2
levels={4}3
/>Collapsed
Use `levels="5+"` to collapse intermediate steps with an ellipsis.
Loading preview…
1
<Breadcrumb2
levels="5+"3
/>Slash Divider
Use `divider="Slash"` to replace the default chevron with a slash separator.
Loading preview…
1
<Breadcrumb2
divider="Slash"3
/>API Reference
BreadcrumbProps
Props for the Breadcrumb component.
Prop | Type | Default | Required |
|---|---|---|---|
items | BreadcrumbItem[] | - | required |
divider | 'chevron' | 'slash' | 'chevron' | optional |
homeIcon | ReactNode | - | optional |
chevronIcon | ReactNode | - | optional |