{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Breadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/breadcrumb.tsx",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { ChevronRightIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Crumb = { label: string; href?: string }\n\ntype BreadcrumbProps = {\n  items?: Crumb[]\n  className?: string\n}\n\nconst SAMPLE_ITEMS: Crumb[] = [\n  { label: \"Lumen\", href: \"#\" },\n  { label: \"Customers\", href: \"#\" },\n  { label: \"Northwind\", href: \"#\" },\n  { label: \"INV-2041\" },\n]\n\n/** A navigation trail of links with chevron separators; the last item is the current page. */\nfunction Breadcrumb({ items = SAMPLE_ITEMS, className }: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" className={cn(\"flex items-center gap-1 text-sm\", className)}>\n      {items.map((item, i) => (\n        <React.Fragment key={i}>\n          {i > 0 ? <ChevronRightIcon className=\"size-3.5 text-fg-subtle\" /> : null}\n          {i === items.length - 1 ? (\n            <span aria-current=\"page\" className=\"font-medium text-fg\">{item.label}</span>\n          ) : (\n            <a href={item.href ?? \"#\"} className=\"text-fg-muted transition-[color] duration-[70ms] hover:text-fg\">{item.label}</a>\n          )}\n        </React.Fragment>\n      ))}\n    </nav>\n  )\n}\nexport { Breadcrumb }\nexport type { BreadcrumbProps, Crumb as BreadcrumbItem }\n"
    }
  ]
}