{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = withDefaults(\n  defineProps<\n    NavigationMenuRootProps & {\n      class?: HTMLAttributes['class']\n      viewport?: boolean\n    }\n  >(),\n  {\n    viewport: true,\n  },\n)\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'viewport')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-slot=\"slotProps\"\n    data-uipkge\n    data-slot=\"navigation-menu\"\n    :data-viewport=\"viewport\"\n    v-bind=\"forwarded\"\n    :class=\"cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n    <NavigationMenuViewport v-if=\"viewport\" />\n  </NavigationMenuRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenu.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    data-uipkge\n    data-slot=\"navigation-menu-content\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'data-[motion^=from-]:motion-safe:animate-in data-[motion^=to-]:motion-safe:animate-out data-[motion^=from-]:motion-safe:fade-in data-[motion^=to-]:motion-safe:fade-out data-[motion=from-end]:motion-safe:slide-in-from-right-52 data-[motion=from-start]:motion-safe:slide-in-from-left-52 data-[motion=to-end]:motion-safe:slide-out-to-right-52 data-[motion=to-start]:motion-safe:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',\n        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuContent.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuIndicator.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuIndicatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuIndicator, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    data-uipkge\n    data-slot=\"navigation-menu-indicator\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'data-[state=visible]:motion-safe:animate-in data-[state=hidden]:motion-safe:animate-out data-[state=hidden]:motion-safe:fade-out data-[state=visible]:motion-safe:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuIndicator.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuItem } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <NavigationMenuItem\n    data-uipkge\n    data-slot=\"navigation-menu-item\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('relative', props.class)\"\n  >\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuItem.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuLink.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuLink\n    data-uipkge\n    data-slot=\"navigation-menu-link\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\\'text-\\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\\'size-\\'])]:size-4',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuLink.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuList.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuListProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuList, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    data-uipkge\n    data-slot=\"navigation-menu-list\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('group flex flex-1 list-none items-center justify-center gap-1', props.class)\"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuList.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { NavigationMenuTrigger, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { navigationMenuTriggerStyle } from './navigation-menu.variants'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    data-uipkge\n    data-slot=\"navigation-menu-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/NavigationMenuViewport.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NavigationMenuViewportProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuViewport, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute top-full left-0 isolate z-50 flex justify-center\">\n    <NavigationMenuViewport\n      data-uipkge\n      data-slot=\"navigation-menu-viewport\"\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center bg-popover text-popover-foreground data-[state=open]:motion-safe:animate-in data-[state=closed]:motion-safe:animate-out data-[state=closed]:motion-safe:zoom-out-95 data-[state=open]:motion-safe:zoom-in-90 relative left-[var(--reka-navigation-menu-viewport-left)] mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/NavigationMenuViewport.vue"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/navigation-menu.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',\n)\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/navigation-menu.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/navigation-menu/index.ts",
      "content": "export { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component.vue <-> index.ts circular import that broke dev SSR for Card).\nexport { navigationMenuTriggerStyle } from './navigation-menu.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/navigation-menu/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Top-of-page horizontal navigation with hover/click triggered megamenus. Use for marketing sites and product navs that need rich content — featured links, mini-cards, and submenu columns.",
  "categories": [
    "navigation"
  ]
}