Breadcrumb
Displays the path to the current resource using a hierarchy of links.
tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
export function BreadcrumbDemo() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="/components">Components</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> )}
Installation
CLI
bash
npx fivui add breadcrumb
Manual
Copy and paste the following code into your project.
bash
npm install @radix-ui/react-slot
components/ui/breadcrumb.tsx
import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ComponentType<{ className?: string }> }>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)Breadcrumb.displayName = "Breadcrumb"
const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(({ className, ...props }, ref) => ( <ol ref={ref} className={cn( "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className )} {...props} />))BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(({ className, ...props }, ref) => ( <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />))BreadcrumbItem.displayName = "BreadcrumbItem"
const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }>(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a"
return ( <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} /> )})BreadcrumbLink.displayName = "BreadcrumbLink"
const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(({ className, ...props }, ref) => ( <span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props} />))BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({ children, className, ...props}: React.ComponentProps<"li">) => ( <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props} > {children ?? <ChevronRight />} </li>)BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
const BreadcrumbEllipsis = ({ className, ...props}: React.ComponentProps<"span">) => ( <span role="presentation" aria-hidden="true" className={cn("flex h-9 w-9 items-center justify-center", className)} {...props} > <MoreHorizontal className="h-4 w-4" /> <span className="sr-only">More</span> </span>)BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis,}
Usage
tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
tsx
<Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Components</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList></Breadcrumb>
Examples
Default
tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
export function BreadcrumbDemo() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="/components">Components</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> )}
Custom Separator
tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
export function BreadcrumbWithCustomSeparator() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator> <span>/</span> </BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbLink href="/components">Components</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator> <span>/</span> </BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> )}
With Ellipsis
tsx
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
export function BreadcrumbWithEllipsis() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbEllipsis /> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="/components">Components</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> )}
API Reference
Breadcrumb Components
Component | Description |
---|---|
Breadcrumb | The root breadcrumb navigation component |
BreadcrumbList | The ordered list containing breadcrumb items |
BreadcrumbItem | A single breadcrumb item container |
BreadcrumbLink | A clickable breadcrumb link |
BreadcrumbPage | The current page breadcrumb (non-clickable) |
BreadcrumbSeparator | The separator between breadcrumb items |
BreadcrumbEllipsis | An ellipsis to indicate collapsed breadcrumb items |
BreadcrumbLink supports the asChild
prop for composition with other components.
External Documentation
For more information about breadcrumbs and accessibility, refer to the external documentation.