{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/breadcrumb/breadcrumb.tsx",
      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nconst Breadcrumb = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<'nav'>>(\n  ({ className, ...props }, ref) => (\n    <nav\n      ref={ref}\n      aria-label=\"breadcrumb\"\n      data-uipkge=\"\"\n      data-slot=\"breadcrumb\"\n      className={className}\n      {...props}\n    />\n  ),\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => (\n    <ol\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"breadcrumb-list\"\n      className={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)}\n      {...props}\n    />\n  ),\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"breadcrumb-item\"\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  ),\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** Render the child element as the link (merging props/styles) instead of\n   *  emitting an <a> — the React equivalent of reka-ui's as-child. */\n  asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n    return (\n      <Comp\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"breadcrumb-link\"\n        className={cn(\n          'hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn('text-foreground cursor-default font-normal', className)}\n      {...props}\n    />\n  ),\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentPropsWithoutRef<'li'>) => (\n  <li\n    data-uipkge=\"\"\n    data-slot=\"breadcrumb-separator\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn('[&>svg]:size-3.5', className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\nconst BreadcrumbEllipsis = ({ children, className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (\n  <span\n    data-uipkge=\"\"\n    data-slot=\"breadcrumb-ellipsis\"\n    className={cn('flex size-11 items-center justify-center', className)}\n    {...props}\n  >\n    {children ?? <MoreHorizontal className=\"size-4\" aria-hidden=\"true\" />}\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/breadcrumb/breadcrumb.tsx"
    },
    {
      "path": "packages/registry-react/components/breadcrumb/index.ts",
      "content": "export {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  type BreadcrumbLinkProps,\n} from './breadcrumb'\n",
      "type": "registry:ui",
      "target": "~/components/ui/breadcrumb/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-slot",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.",
  "categories": [
    "navigation"
  ]
}