shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/breadcrumb.jsonnpx shadcn@latest add https://kit.dev/r/radix/breadcrumb.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/breadcrumb.jsonyarn shadcn@latest add https://kit.dev/r/radix/breadcrumb.jsonInstall the following dependencies:
bun add radix-ui lucide-reactnpm install radix-ui lucide-reactpnpm add radix-ui lucide-reactyarn add radix-ui lucide-reactCopy and paste the following code into your project.
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import { Slot } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";
export const Breadcrumb = (props: React.ComponentProps<"nav">) => {
const { className, ...rest } = props;
return (
<nav
aria-label="breadcrumb"
className={cn("cn-breadcrumb", className)}
data-slot="breadcrumb"
{...rest}
/>
);
};
Update the import paths to match your project setup.
Usage
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
Menu,
MenuContent,
MenuGroup,
MenuItem,
MenuTrigger,
} from "@/components/ui/menu";<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<a href="#">Home</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<Menu positioning={{ placement: "bottom-start" }}>
<MenuTrigger asChild>
<Button size="icon-sm" variant="ghost">
<BreadcrumbEllipsis />
<span className="sr-only">Toggle menu</span>
</Button>
</MenuTrigger>
<MenuContent>
<MenuGroup>
<MenuItem value="documentation">Documentation</MenuItem>
<MenuItem value="themes">Themes</MenuItem>
<MenuItem value="github">GitHub</MenuItem>
</MenuGroup>
</MenuContent>
</Menu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<a href="#">Components</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
ArrowDown | Move down. |
ArrowUp | Move up. |
ArrowLeft | Move left. |
ArrowRight | Move right. |
Home | Go to the start. |
End | Go to the end. |
Demos
Basic
A basic breadcrumb with a home link and a components link.
Separator
Use a custom component as children for BreadcrumbSeparator to create a custom separator.
Dropdown
Compose BreadcrumbItem with Menu to create a dropdown in the breadcrumb.
Ellipsis
BreadcrumbEllipsis shows a collapsed state when the breadcrumb is too long.
Link
Use asChild on BreadcrumbLink with a custom link from your routing library.
Rtl
Right-to-left breadcrumb. See the RTL configuration guide for document direction.
API Reference
Breadcrumb
PropType
AttributeType
BreadcrumbList
PropType
AttributeType
BreadcrumbItem
PropType
AttributeType
BreadcrumbLink
PropType
AttributeType
BreadcrumbPage
PropType
AttributeType
BreadcrumbSeparator
PropType
AttributeType
BreadcrumbEllipsis
PropType
AttributeType