Components
Breadcrumb
A breadcrumb component
Preview
Loading...
import Link from "next/link";import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/registry/axon/ui/breadcrumb";import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/registry/axon/ui/dropdown-menu";export default function BreadcrumbDemo() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink asChild> <Link href="/">Home</Link> </BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <DropdownMenu> <DropdownMenuTrigger className="flex items-center gap-1"> <BreadcrumbEllipsis className="size-4" /> <span className="sr-only">Toggle menu</span> </DropdownMenuTrigger> <DropdownMenuContent align="start"> <DropdownMenuItem>Documentation</DropdownMenuItem> <DropdownMenuItem>Themes</DropdownMenuItem> <DropdownMenuItem>GitHub</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink asChild> <Link href="/docs/components">Components</Link> </BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> );}Installation
CLI
npx shadcn@latest add @emberui/breadcrumbyarn shadcn@latest add @emberui/breadcrumbpnpm dlx shadcn@latest add @emberui/breadcrumbbunx --bun shadcn@latest add @emberui/breadcrumbReference
This component is based on the shadcn/ui Breadcrumb component.