Breadcrumb
A trail of links back up the workspace hierarchy, ending in the current page.
Install
pnpm dlx shadcn@latest add @namche/breadcrumbUsage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/workspaces">Workspace</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Sirdar</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>BreadcrumbLink renders a plain <a> through Base UI's render prop, so it
picks up the design tokens' bare-anchor styling rather than naming its own
colour — pass render when you need it wired to next/link instead of a
bare href. Drop a BreadcrumbEllipsis in place of a BreadcrumbItem to
collapse a long trail, and use BreadcrumbPage for the current, non-linking
segment.