Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Breadcrumb composes Base UI's useRender and mergeProps so each link can
render as the router's own anchor. The current page carries
aria-current='page', separators default to a Tabler chevron, and every part
marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/breadcrumbExample
breadcrumb-example.tsx
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
const BreadcrumbExample = () => (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<a href='/' />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
className='-m-1.5 text-muted-foreground'
size='icon-sm'
variant='ghost'
/>
}
>
<BreadcrumbEllipsis />
</DropdownMenuTrigger>
<DropdownMenuContent align='start'>
<DropdownMenuItem render={<a href='/docs' />}>
Docs
</DropdownMenuItem>
<DropdownMenuItem render={<a href='/docs/zen/components' />}>
Components
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink render={<a href='/docs/zen/components' />}>
Components
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
export default BreadcrumbExample;
Usage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
const BreadcrumbDemo = () => (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href='/'>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Components</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);