{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:ui",
  "title": "Navigation menu",
  "description": "A site navigation menu built on Base UI with triggers that open rich dropdown panels in a shared viewport, plus link items. Mirrors the shadcn navigation menu.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/navigation-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/navigation-menu.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { NavigationMenu as Nav } from \"@base-ui/react/navigation-menu\"\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({ className, ...props }: React.ComponentProps<typeof Nav.Root>) {\n  return (\n    <Nav.Root data-slot=\"navigation-menu\" className={cn(\"relative flex justify-center\", className)} {...props} />\n  )\n}\n\nfunction NavigationMenuList({ className, ...props }: React.ComponentProps<typeof Nav.List>) {\n  return <Nav.List data-slot=\"navigation-menu-list\" className={cn(\"flex items-center gap-1\", className)} {...props} />\n}\n\nfunction NavigationMenuItem(props: React.ComponentProps<typeof Nav.Item>) {\n  return <Nav.Item data-slot=\"navigation-menu-item\" {...props} />\n}\n\nfunction NavigationMenuTrigger({ className, ...props }: React.ComponentProps<typeof Nav.Trigger>) {\n  return (\n    <Nav.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(\n        \"inline-flex h-9 items-center rounded-lg px-3 text-sm font-medium text-fg outline-none\",\n        \"hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent data-[popup-open]:bg-sunken\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof Nav.Content>) {\n  return (\n    <Nav.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\"w-full p-4 sm:w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof Nav.Link>) {\n  return (\n    <Nav.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"block rounded-lg p-3 text-sm outline-none hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof Nav.Viewport>) {\n  return (\n    <Nav.Portal>\n      <Nav.Positioner sideOffset={8} className=\"z-50\">\n        <Nav.Popup className={cn(\"overflow-hidden rounded-xl border border-border bg-raised shadow-lg\", className)}>\n          <Nav.Viewport data-slot=\"navigation-menu-viewport\" {...props} />\n        </Nav.Popup>\n      </Nav.Positioner>\n    </Nav.Portal>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuViewport,\n}\n"
    }
  ]
}