Breadcrumb

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { ChevronRight, MoreHorizontal } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6 
7function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
8  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
9}
10 
11function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
12  return <ol data-slot="breadcrumb-list" className={cn("flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground sm:gap-2.5", className)} {...props} />
13}
14 
15function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
16  return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />
17}
18 
19function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) {
20  const Comp = asChild ? Slot : "a"
21  return <Comp data-slot="breadcrumb-link" className={cn("rounded-md outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/45", className)} {...props} />
22}
23 
24function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
25  return <span aria-current="page" aria-disabled="true" data-slot="breadcrumb-page" className={cn("font-semibold text-foreground", className)} {...props} />
26}
27 
28function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
29  return <li aria-hidden="true" data-slot="breadcrumb-separator" className={cn("text-foreground/25 [&>svg]:size-3.5", className)} {...props}>{children ?? <ChevronRight />}</li>
30}
31 
32function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
33  return <span aria-hidden="true" data-slot="breadcrumb-ellipsis" className={cn("grid size-8 place-items-center rounded-lg bg-foreground/[.045]", className)} {...props}><MoreHorizontal className="size-4" /><span className="sr-only">More</span></span>
34}
35 
36export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator }