Breadcrumb

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