Breadcrumb

1import * as React from "react"
2import { mergeProps } from "@base-ui/react/merge-props"
3import { useRender } from "@base-ui/react/use-render"
4 
5import { cn } from "@/lib/utils"
6import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
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("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-normal 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 ?? (
89        <ChevronRightIcon />
90      )}
91    </li>
92  )
93}
94 
95function BreadcrumbEllipsis({
96  className,
97  ...props
98}: React.ComponentProps<"span">) {
99  return (
100    <span
101      data-slot="breadcrumb-ellipsis"
102      role="presentation"
103      aria-hidden="true"
104      className={cn(
105        "flex size-5 items-center justify-center [&>svg]:size-4",
106        className
107      )}
108      {...props}
109    >
110      <MoreHorizontalIcon
111      />
112      <span className="sr-only">More</span>
113    </span>
114  )
115}
116 
117export {
118  Breadcrumb,
119  BreadcrumbList,
120// … truncated