Components
Breadcrumb
A navigation trail showing the user's location in the app.
Breadcrumb renders a navigation trail that shows the path to the current page, with separators between items.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/breadcrumb.jsonUsage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
export default function Example() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Current</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}Examples
Default
With ellipsis
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Breadcrumbdata-slot="breadcrumb" | <nav>HTML | — |
BreadcrumbListdata-slot="breadcrumb-list" | <ol>HTML | — |
BreadcrumbItemdata-slot="breadcrumb-item" | <li>HTML | — |
BreadcrumbLinkdata-slot="breadcrumb-link" | <a>HTML | — |
BreadcrumbPagedata-slot="breadcrumb-page" | <span>HTML | — |
BreadcrumbSeparatordata-slot="breadcrumb-separator" | <li>HTML | — |
BreadcrumbEllipsisdata-slot="breadcrumb-ellipsis" | <span>HTML | — |
Changelog
Full Breadcrumb historyLast updated on