Components
Breadcrumb
The path from the site root to the current page.
Loading...
Installation
npx shadcn@latest add @fujin/breadcrumbUsage
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Invoices</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Every part is plain HTML, so the trail renders in a Server Component.
BreadcrumbLink uses Base UI's useRender, which skips its hooks on the
server.
Collapsed levels
BreadcrumbEllipsis is only a marker. Put it inside a menu trigger and list
the hidden levels in the menu, so they stay reachable.
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger aria-label="Show hidden levels">
<BreadcrumbEllipsis />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem render={<Link href="/docs" />}>
Documentation
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>What's different from shadcn/ui
renderreplacesasChildonBreadcrumbLink, same asbutton.BreadcrumbPageis a plain<span aria-current="page">. shadcn also addsrole="link" aria-disabled="true", which announces a link that isn't one.BreadcrumbEllipsisis notaria-hidden, so its "More" text is read.- Links are at least 24px tall and get a solid focus ring.
API Reference
Prop
Type
BreadcrumbLink uses Base UI's
useRender.