{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/ui/navigation-menu.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction NavigationMenu({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Root>) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot='navigation-menu'\n      className={cn(\n        'group/navigation-menu relative flex min-w-max items-center justify-center rounded-xl bg-popover p-1 text-popover-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot='navigation-menu-list'\n      className={cn('not-prose relative flex', className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot='navigation-menu-item'\n      className={cn('relative', className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuTrigger({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot='navigation-menu-trigger'\n      className={cn(\n        'm-0 box-border flex h-10 items-center justify-center gap-1.5 rounded-lg bg-popover px-3.5 text-base leading-6 font-medium text-popover-foreground no-underline select-none hover:bg-accent focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-foreground/10 focus-visible:outline-none active:bg-accent data-popup-open:bg-accent',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuIcon({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot='navigation-menu-icon'\n      className={cn(\n        'transition-transform duration-200 ease-in-out data-popup-open:rotate-180',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <ChevronDownIcon className='size-3' />}\n    </NavigationMenuPrimitive.Icon>\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot='navigation-menu-content'\n      className={cn(\n        'h-full p-6 transition-[opacity,transform,translate] duration-(--duration) ease-(--easing) data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot='navigation-menu-link'\n      className={cn(\n        'block rounded-lg p-3 text-inherit no-underline hover:bg-accent focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-foreground/10 focus-visible:outline-none data-active:bg-accent',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuBackdrop({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Backdrop.Props) {\n  return (\n    <NavigationMenuPrimitive.Backdrop\n      data-slot='navigation-menu-backdrop'\n      className={cn(\n        'fixed inset-0 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPortal({\n  ...props\n}: NavigationMenuPrimitive.Portal.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal\n      data-slot='navigation-menu-portal'\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  sideOffset = 12,\n  style: styleProp,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  const defaultStyle = {\n    ['--duration' as string]: '0.35s',\n    ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',\n  };\n\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        data-slot='navigation-menu-positioner'\n        sideOffset={sideOffset}\n        className={cn(\n          \"box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:-top-2 data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2 data-[side=left]:before:top-0 data-[side=left]:before:-right-2 data-[side=left]:before:bottom-0 data-[side=left]:before:w-2 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:-left-2 data-[side=right]:before:w-2 data-[side=top]:before:right-0 data-[side=top]:before:-bottom-2 data-[side=top]:before:left-0 data-[side=top]:before:h-2\",\n          className\n        )}\n        style={\n          typeof styleProp === 'function'\n            ? (state: NavigationMenuPrimitive.Positioner.State) => ({\n                ...defaultStyle,\n                ...styleProp(state),\n              })\n            : { ...defaultStyle, ...styleProp }\n        }\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className='relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 dark:shadow-none dark:-outline-offset-1'>\n          <NavigationMenuArrow />\n          <NavigationMenuPrimitive.Viewport className='relative size-full overflow-hidden' />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Viewport.Props) {\n  return (\n    <NavigationMenuPrimitive.Viewport\n      data-slot='navigation-menu-viewport'\n      className={cn('relative h-full w-full overflow-hidden', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ArrowSvg(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg width='20' height='10' viewBox='0 0 20 10' fill='none' {...props}>\n      <path\n        d='M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z'\n        className='fill-popover'\n      />\n      <path\n        d='M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z'\n        className='fill-foreground/10'\n      />\n    </svg>\n  );\n}\n\nfunction NavigationMenuArrow({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Arrow.Props) {\n  return (\n    <NavigationMenuPrimitive.Arrow\n      data-slot='navigation-menu-arrow'\n      className={cn(\n        'flex transition-[left] duration-(--duration) ease-(--easing) data-[side=bottom]:-top-2 data-[side=left]:-right-3.25 data-[side=left]:rotate-90 data-[side=right]:-left-3.25 data-[side=right]:-rotate-90 data-[side=top]:-bottom-2 data-[side=top]:rotate-180',\n        className\n      )}\n      {...props}\n    >\n      <ArrowSvg />\n    </NavigationMenuPrimitive.Arrow>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuIcon,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuBackdrop,\n  NavigationMenuPortal,\n  NavigationMenuPositioner,\n  NavigationMenuViewport,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}