Breadcrumb
A trail of links for the current page.
Overview
Breadcrumb is a navigation landmark. Links are anchors. The current page is text with aria-current="page". The list wraps instead of widening the page.
Preview
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add breadcrumbUsage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
export function DocsTrail() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/introduction">Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Card</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}Examples
Documentation
Earlier steps are links. The page you are on is text.
Collapsed trail
BreadcrumbEllipsis stands in for the skipped levels. The dots are hidden from assistive technology, and the word More is available.
Custom separator
Pass an icon into BreadcrumbSeparator. The separator stays decorative.
In practice
An account settings trail sits above a small profile form so the location and the work stay together.
Profile
Public name, bio, and contact.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
href | string | — | Passed to BreadcrumbLink. The current page is not a link. |
className | string | — | Merged onto the part with cn. |
Accessibility
The root is nav labelled breadcrumb. Separators are hidden from assistive technology. The ellipsis exposes the word More and hides the dots.