Breadcrumb
Path trail showing where the current page sits.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/breadcrumb.jsonUsage
import {
Breadcrumb, BreadcrumbList, BreadcrumbItem,
BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>With a router, pass its Link through: <BreadcrumbLink render={<Link href="/" />}>
isn't needed; BreadcrumbLink is a plain a, so swap the element or wrap your
Link with its classes.
Accessibility
navlandmark labeled "Breadcrumb"; the current page carriesaria-current="page".- Separators are
aria-hidden; use BreadcrumbEllipsis when collapsing long trails.