{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "A collection of links and menus for website navigation.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/arrow-svg"
  ],
  "files": [
    {
      "path": "registry/ui/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction NavigationMenuRoot({\n  className,\n  ...props\n}: BaseNavigationMenu.Root.Props) {\n  return (\n    <BaseNavigationMenu.Root\n      className={cn(\"relative\", className)}\n      data-slot=\"navigation-menu\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: BaseNavigationMenu.List.Props) {\n  return (\n    <BaseNavigationMenu.List\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className,\n      )}\n      data-slot=\"navigation-menu-list\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: BaseNavigationMenu.Item.Props) {\n  return (\n    <BaseNavigationMenu.Item\n      className={cn(\"relative\", className)}\n      data-slot=\"navigation-menu-item\"\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva([\n  \"group inline-flex h-9 w-max items-center justify-center gap-1\",\n  \"rounded-md bg-background px-4 py-2\",\n  \"text-sm font-medium\",\n  \"outline-none transition-[color,box-shadow]\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  \"focus:bg-accent focus:text-accent-foreground\",\n  \"focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1\",\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  \"data-[popup-open]:bg-accent/50 data-[popup-open]:text-accent-foreground\",\n  \"data-[popup-open]:hover:bg-accent data-[popup-open]:focus:bg-accent\",\n]);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  showIcon = true,\n  ...props\n}: BaseNavigationMenu.Trigger.Props & {\n  showIcon?: boolean;\n}) {\n  return (\n    <BaseNavigationMenu.Trigger\n      className={cn(navigationMenuTriggerStyle(), className)}\n      data-slot=\"navigation-menu-trigger\"\n      {...props}\n    >\n      {children}\n      {showIcon && (\n        <NavigationMenuIcon>\n          <ChevronDownIcon className=\"text-muted-foreground size-4 transition-transform duration-300 ease-in-out top-[1px] ml-1 group-data-[popup-open]:rotate-180\" />\n        </NavigationMenuIcon>\n      )}\n    </BaseNavigationMenu.Trigger>\n  );\n}\n\nfunction NavigationMenuIcon({\n  className,\n  ...props\n}: BaseNavigationMenu.Icon.Props) {\n  return (\n    <BaseNavigationMenu.Icon\n      className={cn(\"transition-transform duration-200 ease-out\", className)}\n      data-slot=\"navigation-menu-icon\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: BaseNavigationMenu.Content.Props) {\n  return (\n    <BaseNavigationMenu.Content\n      className={cn(\n        \"w-full p-2 md:w-auto\",\n        \"animate-fade\",\n        \"data-[starting-style]:data-[activation-direction=left]:translate-x-[-20%]\",\n        \"data-[starting-style]:data-[activation-direction=right]:translate-x-[20%]\",\n        \"data-[ending-style]:data-[activation-direction=left]:translate-x-[20%]\",\n        \"data-[ending-style]:data-[activation-direction=right]:translate-x-[-20%]\",\n        className,\n      )}\n      data-slot=\"navigation-menu-content\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: BaseNavigationMenu.Link.Props) {\n  return (\n    <BaseNavigationMenu.Link\n      className={cn(\n        \"flex flex-col gap-1 rounded-md p-2 text-sm\",\n        \"outline-none transition-all\",\n        \"[&_svg:not([class*='text-'])]:text-muted-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        \"hover:bg-accent hover:text-accent-foreground\",\n        \"focus:bg-accent focus:text-accent-foreground\",\n        \"focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1\",\n        \"data-[active]:bg-accent/50 data-[active]:text-accent-foreground\",\n        \"data-[active]:hover:bg-accent data-[active]:focus:bg-accent\",\n        className,\n      )}\n      data-slot=\"navigation-menu-link\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPortal(props: BaseNavigationMenu.Portal.Props) {\n  return (\n    <BaseNavigationMenu.Portal data-slot=\"navigation-menu-portal\" {...props} />\n  );\n}\n\nfunction NavigationMenuBackdrop({\n  className,\n  ...props\n}: BaseNavigationMenu.Backdrop.Props) {\n  return (\n    <BaseNavigationMenu.Backdrop\n      className={cn(\"fixed inset-0 bg-black/50 animate-fade\", className)}\n      data-slot=\"navigation-menu-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  children,\n  ...props\n}: BaseNavigationMenu.Positioner.Props) {\n  return (\n    <BaseNavigationMenu.Positioner\n      className={cn(\n        \"h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]\",\n        \"transition-[top,left,right,bottom]\",\n        \"data-[instant]:transition-none\",\n        \"before:absolute before:content-['']\",\n        \"data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5\",\n        className,\n      )}\n      data-slot=\"navigation-menu-positioner\"\n      {...props}\n    >\n      {children}\n    </BaseNavigationMenu.Positioner>\n  );\n}\n\nfunction NavigationMenuPopup(props: BaseNavigationMenu.Popup.Props) {\n  return (\n    <BaseNavigationMenu.Popup\n      className={cn(\n        \"h-[var(--popup-height)] w-[var(--popup-width)] xs:w-[var(--popup-width)]\",\n        \"animate-fade\",\n      )}\n      data-slot=\"navigation-menu-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuArrow({ className }: BaseNavigationMenu.Arrow.Props) {\n  return (\n    <BaseNavigationMenu.Arrow\n      className={cn(\n        \"duration-[var(--duration)] ease-[var(--easing)]\",\n        \"data-[side=bottom]:top-[-9px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        className,\n      )}\n      data-slot=\"navigation-menu-arrow\"\n    >\n      <ArrowSvg />\n    </BaseNavigationMenu.Arrow>\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: BaseNavigationMenu.Viewport.Props) {\n  return (\n    <BaseNavigationMenu.Viewport\n      className={cn(\"relative h-full w-full overflow-hidden\", className)}\n      data-slot=\"navigation-menu-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenu({\n  className,\n  children,\n  orientation = \"horizontal\",\n  showArrow = false,\n  ...props\n}: BaseNavigationMenu.Root.Props & {\n  showArrow?: boolean;\n}) {\n  return (\n    <NavigationMenuRoot\n      className=\"flex flex-1 items-center justify-center\"\n      orientation={orientation}\n      {...props}\n    >\n      {children}\n      <BaseNavigationMenu.Portal>\n        <NavigationMenuPositioner\n          collisionAvoidance={{ side: \"none\" }}\n          collisionPadding={{ bottom: 5, left: 20, right: 20, top: 5 }}\n          sideOffset={10}\n        >\n          <NavigationMenuPopup\n            className={cn(\n              \"relative bg-popover text-popover-foreground rounded-md\",\n              \"overlay-outline\",\n              className,\n            )}\n          >\n            {showArrow && (\n              <NavigationMenuArrow className=\"flex transition-[left]\" />\n            )}\n            <NavigationMenuViewport />\n          </NavigationMenuPopup>\n        </NavigationMenuPositioner>\n      </BaseNavigationMenu.Portal>\n    </NavigationMenuRoot>\n  );\n}\n\nexport {\n  NavigationMenuRoot,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuViewport,\n  NavigationMenuArrow,\n  NavigationMenuBackdrop,\n  NavigationMenuIcon,\n  NavigationMenuPositioner,\n  NavigationMenuPortal,\n  NavigationMenuPopup,\n  navigationMenuTriggerStyle,\n  // Composite component\n  NavigationMenu,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}