Breadcrumb

import { Breadcrumb } from '@/components/ui/breadcrumb'
import { DemoRow, DemoStage } from './_kit'

export default function BreadcrumbDemo() {
  return (
    <DemoStage>
      <DemoRow label="Standard">
        <Breadcrumb
          items={[
            { label: 'Foundry', href: '/' },
            { label: 'Components', href: '/components' },
            { label: 'Breadcrumb' },
          ]}
        />
      </DemoRow>

      <DemoRow label="Deep trail, collapsed">
        <Breadcrumb
          maxItems={4}
          items={[
            { label: 'Foundry', href: '/' },
            { label: 'Starters', href: '/starters' },
            { label: 'Ecommerce', href: '/starters/ecommerce' },
            { label: 'Shop', href: '/starters/ecommerce/shop' },
            { label: 'Outerwear', href: '/starters/ecommerce/category/outerwear' },
            { label: 'Field Shell Jacket' },
          ]}
        />
      </DemoRow>

      <DemoRow label="Two levels">
        <Breadcrumb items={[{ label: 'Docs', href: '/docs' }, { label: 'Design tokens' }]} />
      </DemoRow>
    </DemoStage>
  )
}

import Link from 'next/link'
import { ChevronRight } from 'lucide-react'
import { cn } from '@/lib/cn'

/**
 * Breadcrumb
 *
 * A `<nav>` wrapping an ordered list. The final crumb is not a link and
 * carries `aria-current="page"`, and the separators are decorative text inside
 * `aria-hidden` spans so a screen reader reads "Components, Button" rather
 * than "Components chevron Button".
 *
 * On narrow screens the trail scrolls horizontally instead of wrapping into an
 * unreadable stack.
 */
export interface Crumb {
  label: string
  href?: string
}

export interface BreadcrumbProps {
  items: Crumb[]
  className?: string
  /** Collapses the middle of very deep trails behind an ellipsis. */
  maxItems?: number
}

export function Breadcrumb({ items, className, maxItems }: BreadcrumbProps) {
  const shouldCollapse = maxItems !== undefined && items.length > maxItems
  const visible: Array<Crumb | 'ellipsis'> = shouldCollapse
    ? [items[0] as Crumb, 'ellipsis', ...items.slice(items.length - (maxItems - 1))]
    : items

  return (
    <nav aria-label="Breadcrumb" className={cn('min-w-0', className)}>
      <ol className="hide-scrollbar flex items-center gap-1 overflow-x-auto text-xs whitespace-nowrap">
        {visible.map((item, index) => {
          const isLast = index === visible.length - 1
          return (
            <li
              key={typeof item === 'string' ? `ellipsis-${index}` : `${item.label}-${index}`}
              className="flex items-center gap-1"
            >
              {index > 0 ? (
                <ChevronRight className="size-3 shrink-0 text-ink-subtle" aria-hidden="true" />
              ) : null}
              {item === 'ellipsis' ? (
                <span className="px-1 text-ink-subtle" aria-hidden="true">
                  …
                </span>
              ) : isLast || !item.href ? (
                <span
                  className={cn('font-medium', isLast ? 'text-ink' : 'text-ink-muted')}
                  aria-current={isLast ? 'page' : undefined}
                >
                  {item.label}
                </span>
              ) : (
                <Link
                  href={item.href}
                  className="rounded-xs text-ink-muted transition-colors duration-150 hover:text-ink"
                >
                  {item.label}
                </Link>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}