shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/breadcrumb.jsonnpx shadcn@latest add https://kit.dev/r/aria/breadcrumb.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/breadcrumb.jsonyarn shadcn@latest add https://kit.dev/r/aria/breadcrumb.jsonInstall the following dependencies:
bun add react-aria-components lucide-reactnpm install react-aria-components lucide-reactpnpm add react-aria-components lucide-reactyarn add react-aria-components lucide-reactCopy and paste the following code into your project.
"use client";
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import type React from "react";
import {
Breadcrumb as BreadcrumbPrimitive,
type BreadcrumbProps,
Breadcrumbs as BreadcrumbsPrimitive,
type BreadcrumbsProps,
composeRenderProps,
Link as LinkPrimitive,
type LinkProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";
export const Breadcrumb = (props: React.ComponentProps<"nav">) => {
const { className, ...rest } = props;
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
BreadcrumbEllipsis
PropType
AttributeType