{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/breadcrumb/breadcrumb.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\n/** Angular port of UIPKGE Breadcrumb. Parts, DOM (nav > ol > li > a/span) and class strings mirror the React source; use the attribute selectors on native elements (the asChild equivalent). */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb, [ui-breadcrumb]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.aria-label]': '\"breadcrumb\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiBreadcrumbComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb-list, [ui-breadcrumb-list]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb-list\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiBreadcrumbListComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn(\n      'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n      this.className,\n    )\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb-item, [ui-breadcrumb-item]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb-item\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiBreadcrumbItemComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('inline-flex items-center gap-1.5', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb-link, [ui-breadcrumb-link]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb-link\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.href]': 'href',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiBreadcrumbLinkComponent {\n  @Input() href?: string\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return 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      this.className,\n    )\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb-page, [ui-breadcrumb-page]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb-page\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.aria-current]': '\"page\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiBreadcrumbPageComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('text-foreground cursor-default font-normal', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb-separator, [ui-breadcrumb-separator]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb-separator\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.role]': '\"presentation\"',\n    '[attr.aria-hidden]': '\"true\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content\n    ><svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-chevron-right\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m9 18 6-6-6-6\" /></svg\n  ></ng-content>`,\n})\nexport class UiBreadcrumbSeparatorComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('list-item [&>svg,&>lucide-icon>svg]:size-3.5', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-breadcrumb-ellipsis, [ui-breadcrumb-ellipsis]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"breadcrumb-ellipsis\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content\n      ><svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-ellipsis size-4\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" /></svg></ng-content\n    ><span class=\"sr-only\">More</span>`,\n})\nexport class UiBreadcrumbEllipsisComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex size-11 items-center justify-center', this.className)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/breadcrumb/breadcrumb.component.ts"
    },
    {
      "path": "packages/registry-angular/components/breadcrumb/index.ts",
      "content": "export {\n  UiBreadcrumbComponent,\n  UiBreadcrumbEllipsisComponent,\n  UiBreadcrumbItemComponent,\n  UiBreadcrumbLinkComponent,\n  UiBreadcrumbListComponent,\n  UiBreadcrumbPageComponent,\n  UiBreadcrumbSeparatorComponent,\n} from './breadcrumb.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/breadcrumb/index.ts"
    }
  ],
  "dependencies": [],
  "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"
  ]
}