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 }) {
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 }) {
20	return (
21		<ol
22			data-slot="breadcrumb-list"
23			className={cn(
24				"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words",
25				className,
26			)}
27			{...props}
28		/>
29	);
30}
31 
32function BreadcrumbItem({ className = "", ...props }) {
33	return (
34		<li
35			data-slot="breadcrumb-item"
36			className={cn("gap-1 inline-flex items-center", className)}
37			{...props}
38		/>
39	);
40}
41 
42function BreadcrumbLink({ className = "", render = undefined, ...props }) {
43	return useRender({
44		defaultTagName: "a",
45		props: mergeProps(
46			{
47				className: cn("hover:text-foreground transition-colors", className),
48			},
49			props,
50		),
51		render,
52		state: {
53			slot: "breadcrumb-link",
54		},
55	});
56}
57 
58function BreadcrumbPage({ className = "", ...props }) {
59	return (
60		<span
61			data-slot="breadcrumb-page"
62			role="link"
63			aria-disabled="true"
64			aria-current="page"
65			className={cn("text-foreground font-normal", className)}
66			{...props}
67		/>
68	);
69}
70 
71function BreadcrumbSeparator({ children = null, className = "", ...props }) {
72	return (
73		<li
74			data-slot="breadcrumb-separator"
75			role="presentation"
76			aria-hidden="true"
77			className={cn("[&>svg]:size-3.5", className)}
78			{...props}
79		>
80			{children ?? <ChevronRightIcon />}
81		</li>
82	);
83}
84 
85function BreadcrumbEllipsis({ className = "", ...props }) {
86	return (
87		<span
88			data-slot="breadcrumb-ellipsis"
89			role="presentation"
90			aria-hidden="true"
91			className={cn(
92				"size-4 [&>svg]:size-3.5 flex items-center justify-center",
93				className,
94			)}
95			{...props}
96		>
97			<MoreHorizontalIcon />
98			<span className="sr-only">More</span>
99		</span>
100	);
101}
102 
103Breadcrumb.displayName = "Breadcrumb";
104BreadcrumbList.displayName = "BreadcrumbList";
105BreadcrumbItem.displayName = "BreadcrumbItem";
106BreadcrumbLink.displayName = "BreadcrumbLink";
107BreadcrumbPage.displayName = "BreadcrumbPage";
108BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
109BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
110 
111export {
112	Breadcrumb,
113	BreadcrumbList,
114	BreadcrumbItem,
115// … truncated