breadcrumb

1import * as React from "react"
2import { mergeProps } from "@base-ui/react/merge-props"
3import { useRender } from "@base-ui/react/use-render"
4import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7 
8function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
9  return (
10    <nav
11      aria-label="breadcrumb"
12      data-slot="breadcrumb"
13      className={cn(className)}
14      {...props}
15    />
16  )
17}
18 
19function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
20  return (
21    <ol
22      data-slot="breadcrumb-list"
23      className={cn(
24        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
25        className
26      )}
27      {...props}
28    />
29  )
30}
31 
32function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
33  return (
34    <li
35      data-slot="breadcrumb-item"
36      className={cn("inline-flex items-center gap-1", className)}
37      {...props}
38    />
39  )
40}
41 
42function BreadcrumbLink({
43  className,
44  render,
45  ...props
46}: useRender.ComponentProps<"a">) {
47  return useRender({
48    defaultTagName: "a",
49    props: mergeProps<"a">(
50      {
51        className: cn("font-head transition-colors hover:text-foreground", className),
52      },
53      props
54    ),
55    render,
56    state: {
57      slot: "breadcrumb-link",
58    },
59  })
60}
61 
62function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
63  return (
64    <span
65      data-slot="breadcrumb-page"
66      role="link"
67      aria-disabled="true"
68      aria-current="page"
69      className={cn("font-medium text-foreground", className)}
70      {...props}
71    />
72  )
73}
74 
75function BreadcrumbSeparator({
76  children,
77  className,
78  ...props
79}: React.ComponentProps<"li">) {
80  return (
81    <li
82      data-slot="breadcrumb-separator"
83      role="presentation"
84      aria-hidden="true"
85      className={cn("[&>svg]:size-3.5", className)}
86      {...props}
87    >
88      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
89    </li>
90  )
91}
92 
93function BreadcrumbEllipsis({
94  className,
95  ...props
96}: React.ComponentProps<"span">) {
97  return (
98    <span
99      data-slot="breadcrumb-ellipsis"
100      role="presentation"
101      aria-hidden="true"
102      className={cn(
103        "flex size-5 items-center justify-center [&>svg]:size-4",
104        className
105      )}
106      {...props}
107    >
108      <MoreHorizontalIcon />
109      <span className="sr-only">More</span>
110    </span>
111  )
112}
113 
114export {
115  Breadcrumb,
116  BreadcrumbList,
117// … truncated