shadcn.io is an independent project built on shadcn/ui
The trail reads Home, Components, then Breadcrumb as the current page. A slash icon sits between the crumbs. The last crumb is not a link.
Use it in a file browser, a repository, or docs where people think in paths. A bullet is quieter for a site trail. Top-level sections belong in a Navigation Menu. In React, Base UI does not read the URL.
Installation
Anatomy
Usage
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon aria-hidden="true" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/components" />}>
Components
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon aria-hidden="true" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>FAQ
How is the slash drawn?
A SlashIcon is the child of BreadcrumbSeparator, in place of the default chevron. The separator is hidden from assistive tech.
How is the trail announced?
Breadcrumb renders a nav labeled breadcrumb around an ordered list, so screen readers announce a breadcrumb landmark and the number of items. Home and Components are read as links.
How big is the slash?
The separator styles size its icon, the same as the default chevron, so the slash lines up with the text. Add a size class to the icon to change it.
Does the slash work right to left?
The trail reads from the right in a right-to-left layout. A slash doesn't point, so unlike the chevron it needs no flipping.
API Reference
Breadcrumb
No extra props in this demo. The rest is on the Breadcrumb page.
