Breadcrumb

Breadcrumb shows the current page’s position inside a larger hierarchy. Each link lets the user move back to a broader level.

Use it on deeply nested pages where the surrounding navigation does not fully explain location. It is usually unnecessary for a flat site or a page that sits directly under the home page.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/breadcrumb.json

Usage

import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator
} from "@/components/ui/argv/breadcrumb"

<Breadcrumb>
    <BreadcrumbList>
        <BreadcrumbItem>
            <BreadcrumbLink href="/docs">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbPage>Button</BreadcrumbPage>
        </BreadcrumbItem>
    </BreadcrumbList>
</Breadcrumb>

Composition

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Breadcrumb renders a nav landmark named “breadcrumb.” Place the ordered trail inside BreadcrumbList, then wrap each level in a BreadcrumbItem.

Use BreadcrumbLink for ancestor pages and exactly one BreadcrumbPage for the current page. The current page receives aria-current="page" automatically and should not be another link.

BreadcrumbLink supports Base UI’s render prop for framework links. BreadcrumbSeparator displays a chevron by default but accepts custom children.

Use BreadcrumbEllipsis when the middle of a long path must be collapsed. It is presentational and includes visually hidden “More” text.

API Reference

Every component accepts className and the native props for its rendered element.

Accessibility

Keep link labels concise and recognizable. The breadcrumb should describe the hierarchy, not repeat unrelated browser history.

Separators are hidden from assistive technology, so do not include important meaning in the separator icon or character.