@aelig/breadcrumb
Breadcrumb
Add
pnpm dlx shadcn@latest add @aelig/breadcrumbA composable breadcrumb navigation primitive.
Preview
Usage
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function ProjectBreadcrumb() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/projects">Projects</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>AELIG Registry</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}Variants and options
BreadcrumbLink
Use with asChild for Next.js Link integration.
BreadcrumbPage
Marks the current page.
BreadcrumbEllipsis
Shows collapsed breadcrumb items.