{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/breadcrumb/Breadcrumb.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" data-uipkge data-slot=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/Breadcrumb.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/BreadcrumbEllipsis.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    data-uipkge\n    data-slot=\"breadcrumb-ellipsis\"\n    :class=\"cn('flex size-11 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"size-4\" aria-hidden=\"true\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/BreadcrumbEllipsis.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/BreadcrumbItem.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li data-uipkge data-slot=\"breadcrumb-item\" :class=\"cn('inline-flex items-center gap-1.5', props.class)\">\n    <slot />\n  </li>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/BreadcrumbItem.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/BreadcrumbLink.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    data-uipkge\n    data-slot=\"breadcrumb-link\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"\n      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        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/BreadcrumbLink.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/BreadcrumbList.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    data-uipkge\n    data-slot=\"breadcrumb-list\"\n    :class=\"cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/BreadcrumbList.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/BreadcrumbPage.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    data-uipkge\n    data-slot=\"breadcrumb-page\"\n    aria-current=\"page\"\n    :class=\"cn('text-foreground cursor-default font-normal', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/BreadcrumbPage.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/BreadcrumbSeparator.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-uipkge\n    data-slot=\"breadcrumb-separator\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/BreadcrumbSeparator.vue"
    },
    {
      "path": "packages/registry-vue/components/breadcrumb/index.ts",
      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/breadcrumb/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next",
    "reka-ui"
  ],
  "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"
  ]
}