{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/navigation-menu/navigation-menu.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { navigationMenuTriggerStyle } from './navigation-menu.variants'\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {\n    viewport?: boolean\n  }\n>(({ className, children, viewport = true, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu\"\n    data-viewport={viewport}\n    className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}\n    {...props}\n  >\n    {children}\n    {viewport && <NavigationMenuViewport />}\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu-list\"\n    className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Item\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu-item\"\n    className={cn('relative', className)}\n    {...props}\n  />\n))\nNavigationMenuItem.displayName = NavigationMenuPrimitive.Item.displayName\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu-trigger\"\n    className={cn(navigationMenuTriggerStyle(), 'group', className)}\n    {...props}\n  >\n    {children}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu-content\"\n    className={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      className,\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Link>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Link\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu-link\"\n    className={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      className,\n    )}\n    {...props}\n  />\n))\nNavigationMenuLink.displayName = NavigationMenuPrimitive.Link.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"navigation-menu-indicator\"\n    className={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      className,\n    )}\n    {...props}\n  >\n    <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className=\"absolute top-full left-0 isolate z-50 flex justify-center\">\n    <NavigationMenuPrimitive.Viewport\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"navigation-menu-viewport\"\n      className={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(--radix-navigation-menu-viewport-left)] mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',\n        className,\n      )}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/navigation-menu/navigation-menu.tsx"
    },
    {
      "path": "packages/registry-react/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": "~/components/ui/navigation-menu/navigation-menu.variants.ts"
    },
    {
      "path": "packages/registry-react/components/navigation-menu/index.ts",
      "content": "export {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n} from './navigation-menu'\n\nexport { navigationMenuTriggerStyle } from './navigation-menu.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/navigation-menu/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-navigation-menu",
    "class-variance-authority",
    "lucide-react"
  ],
  "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"
  ]
}