{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumbs",
  "type": "registry:ui",
  "title": "Breadcrumbs",
  "description": "Where you are, as a path you can climb: levels above in ink2, the current in ink, engraved chevrons between; a new level arrives from the right on the settle spring; long paths fold the middle into a menu.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/breadcrumbs/breadcrumbs.tsx",
      "type": "registry:ui",
      "target": "components/metalui/breadcrumbs/breadcrumbs.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Menu, MenuItem } from '../menu/menu';\n\n/* ─────────────────────────────────────────────────────────\n * BREADCRUMBS, where you are, as a path you can climb\n *\n *   levels    the levels above in ui type and ink2 (ink on hover); the current one in ink, not a\n *             link (aria-current=\"page\"); small engraved chevrons between, in ink3\n *   deeper    a new last crumb arrives one grid step from the right on the settle spring as it\n *             fades in (only changes move; the first render is still)\n *   up        the path simply shortens\n *   long      keeps the first level and the last two; the middle folds into a quiet key that opens\n *             a menu of the hidden levels\n *   focus     the green ring on each link\n * Reduce Motion: the new crumb fades in without travel.\n * ───────────────────────────────────────────────────────── */\n\nexport interface Crumb {\n  /** Stable id for the level (its path works). */\n  id: string;\n  label: string;\n  href?: string;\n}\n\nexport interface BreadcrumbsProps {\n  items: Crumb[];\n  /** More levels than this fold the middle into a menu (4). */\n  max?: number;\n  /** Render a level's link yourself (a router's link); gets the crumb and the props to spread. */\n  renderLink?: (item: Crumb, props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { className: string; children: React.ReactNode }) => React.ReactElement;\n  /** Called when a folded level is chosen from the menu. */\n  onNavigate?: (item: Crumb) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst NAV = 'mu-breadcrumbs';\nconst LIST = 'm-0 p-0 list-none flex flex-wrap items-center gap-breadcrumbs-gap type-ui';\nconst ITEM = 'mu-breadcrumb inline-flex items-center gap-breadcrumbs-gap data-arrive:breadcrumb-arrive';\nconst LINK = 'mu-breadcrumb-link text-ink2 no-underline outline-none transition-colors duration-settle hover:text-ink focus-visible:focus-ring';\nconst CURRENT = 'mu-breadcrumb-current text-ink';\nconst SEP = 'mu-breadcrumb-sep size-breadcrumbs-sep-size flex-none text-ink3';\nconst FOLD = 'mu-breadcrumb-fold inline-grid place-items-center h-breadcrumbs-fold-height px-breadcrumbs-fold-pad rounded-breadcrumbs-fold-radius border-0 bg-transparent text-ink2 cursor-pointer outline-none hover:recipe-row-list-hover hover:text-ink focus-visible:focus-ring data-popup-open:recipe-row-list-hover';\n\nfunction Sep() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 10 10\" className={SEP} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.3} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M3.75 2 6.75 5l-3 3\" />\n    </svg>\n  );\n}\n\n/** Where you are, as a path you can climb. The last item is the current page. */\nexport function Breadcrumbs({ items, max = 4, renderLink, onNavigate, className, ...aria }: BreadcrumbsProps) {\n  // Only changes move: remember which levels were already on screen.\n  const seen = React.useRef<Set<string> | null>(null);\n  const first = seen.current == null;\n  const shown = new Set(seen.current ?? []);\n  React.useEffect(() => { seen.current = new Set(items.map((i) => i.id)); });\n\n  const folded = items.length > max ? items.slice(1, items.length - 2) : [];\n  const visible = folded.length ? [items[0], null, ...items.slice(-2)] : items;\n  const link = (item: Crumb) => {\n    const props = { href: item.href, className: LINK, children: item.label };\n    return renderLink ? renderLink(item, props) : <a {...props} />;\n  };\n\n  return (\n    <nav aria-label={aria['aria-label'] ?? 'Breadcrumb'} className={className ? `${NAV} ${className}` : NAV}>\n      <ol className={LIST}>\n        {visible.map((item, i) => {\n          const last = i === visible.length - 1;\n          if (item == null) {\n            return (\n              <li key=\"fold\" className={ITEM}>\n                <Menu trigger={<button type=\"button\" aria-label={`${folded.length} more levels`} className={FOLD}>…</button>}>\n                  {folded.map((f) => <MenuItem key={f.id} onSelect={() => onNavigate?.(f)}>{f.label}</MenuItem>)}\n                </Menu>\n                <Sep />\n              </li>\n            );\n          }\n          const arrive = !first && !shown.has(item.id);\n          return (\n            <li key={item.id} className={ITEM} data-arrive={arrive ? '' : undefined}>\n              {last ? <span aria-current=\"page\" className={CURRENT}>{item.label}</span> : link(item)}\n              {!last && <Sep />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/breadcrumbs.md. SwiftUI: MetalBreadcrumbs in the MetalUI Swift package."
}