Breadcrumb

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