{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-08",
  "title": "As link",
  "description": "Breadcrumb links that open in a new tab, with an external-link icon on the outbound crumb.",
  "dependencies": [],
  "registryDependencies": [
    "breadcrumb"
  ],
  "files": [
    {
      "path": "registry/patterns/breadcrumb/breadcrumb-08.tsx",
      "content": "import { ArrowUpRightIcon } from 'lucide-react'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb'\n\nexport function Breadcrumb08() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            render={<a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" />}\n          >\n            Docs\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            render={\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-1\"\n              />\n            }\n          >\n            Changelog\n            <ArrowUpRightIcon className=\"size-3.5\" />\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>v2.0</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/breadcrumb/breadcrumb-08.tsx"
    }
  ],
  "type": "registry:block"
}