Breadcrumb
Navigation trail showing the user’s current location in a page hierarchy. Compound component with 7 sub-components for full customization.
tsx
Default
A basic breadcrumb trail with slash separators.
Custom Separator
Replace the default slash with a chevron icon or any custom content.
With Next.js Link
Use asChild to render as a Next.js Link for client-side navigation.
Ellipsis (Collapsed)
Collapse deep paths with BreadcrumbEllipsis. Click to reveal hidden items.