breadcrumbs

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