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 
7const Breadcrumb = React.forwardRef<
8  HTMLElement,
9  React.ComponentPropsWithoutRef<"nav"> & {
10    separator?: React.ReactNode
11  }
12>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
13Breadcrumb.displayName = "Breadcrumb"
14 
15const BreadcrumbList = React.forwardRef<
16  HTMLOListElement,
17  React.ComponentPropsWithoutRef<"ol">
18>(({ className, ...props }, ref) => (
19  <ol
20    ref={ref}
21    className={cn(
22      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
23      className
24    )}
25    {...props}
26  />
27))
28BreadcrumbList.displayName = "BreadcrumbList"
29 
30const BreadcrumbItem = React.forwardRef<
31  HTMLLIElement,
32  React.ComponentPropsWithoutRef<"li">
33>(({ className, ...props }, ref) => (
34  <li
35    ref={ref}
36    className={cn("inline-flex items-center gap-1.5", className)}
37    {...props}
38  />
39))
40BreadcrumbItem.displayName = "BreadcrumbItem"
41 
42const BreadcrumbLink = React.forwardRef<
43  HTMLAnchorElement,
44  React.ComponentPropsWithoutRef<"a"> & {
45    asChild?: boolean
46  }
47>(({ asChild, className, ...props }, ref) => {
48  const Comp = asChild ? Slot : "a"
49 
50  return (
51    <Comp
52      ref={ref}
53      className={cn("transition-colors hover:text-foreground", className)}
54      {...props}
55    />
56  )
57})
58BreadcrumbLink.displayName = "BreadcrumbLink"
59 
60const BreadcrumbPage = React.forwardRef<
61  HTMLSpanElement,
62  React.ComponentPropsWithoutRef<"span">
63>(({ className, ...props }, ref) => (
64  <span
65    ref={ref}
66    role="link"
67    aria-disabled="true"
68    aria-current="page"
69    className={cn("font-normal text-foreground", className)}
70    {...props}
71  />
72))
73BreadcrumbPage.displayName = "BreadcrumbPage"
74 
75const BreadcrumbSeparator = ({
76  children,
77  className,
78  ...props
79}: React.ComponentProps<"li">) => (
80  <li
81    role="presentation"
82    aria-hidden="true"
83    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
84    {...props}
85  >
86    {children ?? <ChevronRight />}
87  </li>
88)
89BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
90 
91const BreadcrumbEllipsis = ({
92  className,
93  ...props
94}: React.ComponentProps<"span">) => (
95  <span
96    role="presentation"
97    aria-hidden="true"
98    className={cn("flex h-9 w-9 items-center justify-center", className)}
99    {...props}
100  >
101    <MoreHorizontal className="h-4 w-4" />
102// … truncated