{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "A Base UI navigation menu with centered popups, animated viewport sizing, and shadcn-style composition.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/base/ui/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype NavigationMenuProps = NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\"> & {\n    positionerClassName?: string;\n    /**\n     * Render the built-in positioner. Set to false when composing your own\n     * `NavigationMenuPositioner` in `children` (e.g. to change side or\n     * offsets), so two portalled positioners never mount at once.\n     */\n    positioner?: boolean;\n  };\n\nfunction NavigationMenu({\n  align = \"center\",\n  className,\n  children,\n  positionerClassName,\n  positioner = true,\n  ...props\n}: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {positioner ? (\n        <NavigationMenuPositioner\n          align={align}\n          className={positionerClassName}\n        />\n      ) : null}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"flex flex-1 list-none items-center justify-center gap-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-8 w-max items-center justify-center rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none\",\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon\n        data-slot=\"navigation-menu-trigger-icon\"\n        className=\"ml-1 inline-flex transition-transform duration-200 data-popup-open:rotate-180 motion-reduce:transition-none [&_svg]:size-3.5\"\n      >\n        <ChevronDown aria-hidden=\"true\" />\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\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 w-auto p-1 transition-[opacity,transform] duration-200 ease-out data-ending-style:translate-y-1 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:translate-y-1 data-starting-style:scale-[0.98] data-starting-style:opacity-0 motion-reduce:animate-none motion-reduce:transition-none motion-reduce:data-ending-style:translate-y-0 motion-reduce:data-ending-style:scale-100 motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:translate-y-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-starting-style:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"center\",\n  collisionPadding = 16,\n  collisionAvoidance = {\n    side: \"none\",\n    align: \"shift\",\n    fallbackAxisSide: \"none\",\n  },\n  children,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        collisionPadding={collisionPadding}\n        collisionAvoidance={collisionAvoidance}\n        data-slot=\"navigation-menu-positioner\"\n        className={cn(\n          \"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-200 ease-out data-instant:transition-none motion-reduce:transition-none\",\n          \"before:absolute before:content-[''] data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:-top-2 data-[side=bottom]:before:h-2\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? <NavigationMenuPopup />}\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\nfunction NavigationMenuPopup({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Popup.Props) {\n  return (\n    <NavigationMenuPrimitive.Popup\n      data-slot=\"navigation-menu-popup\"\n      className={cn(\n        \"relative h-(--popup-height) w-(--popup-width) max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-sm outline-none transition-[opacity,transform,width,height] duration-200 ease-out data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 motion-reduce:animate-none motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:scale-100 motion-reduce:data-starting-style:opacity-100\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Popup>\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(\n        \"relative size-full overflow-hidden motion-reduce:animate-none motion-reduce:transition-none\",\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 select-none rounded-md p-3 text-sm leading-none text-foreground no-underline outline-none transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-active:bg-muted/60 motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\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 size-3 rotate-45 border border-border bg-popover data-[side=bottom]:-translate-y-1.5 data-[side=left]:translate-x-1.5 data-[side=right]:-translate-x-1.5 data-[side=top]:translate-y-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type { NavigationMenuProps };\n\nexport {\n  NavigationMenu,\n  NavigationMenuArrow,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuPopup,\n  NavigationMenuPositioner,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-menu.tsx"
    }
  ],
  "meta": {
    "tags": [
      "navigation",
      "menu",
      "viewport",
      "links"
    ],
    "effects": [
      "viewport-resize",
      "menu-transition"
    ]
  },
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}