saturation/uiLoading...
Installation
pnpm dlx shadcn@latest add https://ui.saturation.io/r/breadcrumb.jsonTailwind v4 — Source Scanning
Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:
@source "../components";This ensures all utility classes in CVA variants and data attribute selectors are included in your build.
Usage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Current</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Examples
With Dropdown
Loading...
Breadcrumb with dropdown for collapsed items.
With Icons
Loading...
Breadcrumb with icons.
Icons Only
Loading...
Icons without text labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
separator | React.ReactNode | — | Custom separator element. |