Breadcrumb

1import { MoreHorizontal } from 'lucide-react';
2import { ComponentProps } from 'react';
3 
4import { Body2, Label2 } from '@/components/ui/typography';
5import { cn } from '@/lib/utils';
6 
7/* UX4G breadcrumb: divider "/", divider-color neutral-500, active-color neutral, link-color neutral-500 */
8 
9/** Root navigation container for breadcrumb trails. */
10function Breadcrumb({ ...props }: ComponentProps<'nav'>) {
11  return <nav aria-label='breadcrumb' {...props} />;
12}
13 
14/** Ordered list container for breadcrumb items. */
15function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>) {
16  return (
17    <ol
18      className={cn(
19        'mb-4 flex list-none flex-wrap items-center gap-2 p-0 wrap-break-word',
20        className,
21      )}
22      {...props}
23    />
24  );
25}
26 
27/** Individual breadcrumb item wrapper. */
28function BreadcrumbItem({ className, ...props }: ComponentProps<'li'>) {
29  return <li className={cn('inline-flex items-center gap-2', className)} {...props} />;
30}
31 
32/** Link element for navigable breadcrumb items. */
33function BreadcrumbLink({ className, children, ...props }: ComponentProps<'a'>) {
34  return (
35    <a
36      className={cn(
37        'hover:text-neutral text-neutral-500 no-underline transition-colors',
38        className,
39      )}
40      {...props}
41    >
42      <Body2>{children}</Body2>
43    </a>
44  );
45}
46 
47/** Non-interactive element for the current page in breadcrumb. */
48function BreadcrumbPage({ className, children, ...props }: ComponentProps<'p'>) {
49  return (
50    <Body2 aria-current='page' className={cn('text-neutral font-medium', className)} {...props}>
51      {children}
52    </Body2>
53  );
54}
55 
56/** Visual separator between breadcrumb items. */
57function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<'li'>) {
58  return (
59    <li
60      role='presentation'
61      aria-hidden='true'
62      className={cn('text-neutral-500 [&>svg]:size-3.5', className)}
63      {...props}
64    >
65      {children ?? <Body2>/</Body2>}
66    </li>
67  );
68}
69 
70/** Ellipsis indicator for collapsed breadcrumb items. */
71function BreadcrumbEllipsis({ className, ...props }: ComponentProps<'div'>) {
72  return (
73    <div
74      role='presentation'
75      aria-hidden='true'
76      className={cn('flex size-9 items-center justify-center text-neutral-500', className)}
77      {...props}
78    >
79      <MoreHorizontal className='size-4' />
80      <Label2 className='sr-only'>More</Label2>
81    </div>
82  );
83}
84 
85export {
86  Breadcrumb,
87  BreadcrumbList,
88  BreadcrumbItem,
89  BreadcrumbLink,
90// … truncated