Displays the path to the current resource using a hierarchy of links.
Loading demo: breadcrumb-real-world
npx sdaia-ui@latest add breadcrumb
import { Breadcrumb } from "@/components/ui/breadcrumb"<Breadcrumb levels={3} />Use `levels={2}` for a two-level breadcrumb path.
Loading demo: breadcrumb-two-levels
The default three-level breadcrumb.
Loading demo: breadcrumb-three-levels
Use `levels={4}` for deeper navigation hierarchies.
Loading demo: breadcrumb-four-levels
Use `levels="5+"` to collapse intermediate steps with an ellipsis.
Loading demo: breadcrumb-collapsed
Use `divider="Slash"` to replace the default chevron with a slash separator.
Loading demo: breadcrumb-slash
Props for the Breadcrumb component.
Prop | Type | Default | Required |
|---|---|---|---|
items | BreadcrumbItem[] | - | required |
divider | 'chevron' | 'slash' | 'chevron' | optional |
homeIcon | ReactNode | - | optional |
chevronIcon | ReactNode | - | optional |