{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "Site navigation with links and triggers that open panels of links in a shared, animated viewport.",
  "dependencies": [
    "@radix-ui/react-navigation-menu",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { createContext, useContext, type ComponentProps } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\n/** Whether the panels render in the shared viewport or under their own trigger. */\nconst NavigationMenuViewportContext = createContext(true);\n\ninterface NavigationMenuProps extends ComponentProps<typeof NavigationMenuPrimitive.Root> {\n  /**\n   * Renders every panel in one shared viewport under the list, which resizes\n   * and slides between panels. With `false` each panel opens under its own\n   * trigger instead.\n   */\n  viewport?: boolean;\n}\n\n/**\n * Site navigation with links and triggers that open panels of more links.\n * It renders a `<nav>` landmark named \"Main\" by default; pass `aria-label`\n * to name it differently, for example when it sits inside another `<nav>`\n * such as `SiteHeaderNav`. Tab and the arrow keys move between the top-level\n * items; Enter or Space opens a panel, ArrowDown moves into it, and Escape\n * closes it and returns focus to its trigger. Panels also open on hover,\n * after `delayDuration` (200ms). Mark the link to the current page with\n * `active`, which screen readers announce as \"current page\". With reduced\n * motion panels appear without sliding or zooming.\n *\n * @example\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem>\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <NavigationMenuLink href=\"/analytics\">Analytics</NavigationMenuLink>\n *         <NavigationMenuLink href=\"/billing\">Billing</NavigationMenuLink>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem>\n *       <NavigationMenuLink asChild active className={navigationMenuTriggerStyle()}>\n *         <Link href=\"/docs\">Docs</Link>\n *       </NavigationMenuLink>\n *     </NavigationMenuItem>\n *   </NavigationMenuList>\n * </NavigationMenu>\n */\nfunction NavigationMenu({ className, children, viewport = true, ...props }: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\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      <NavigationMenuViewportContext.Provider value={viewport}>\n        {children}\n      </NavigationMenuViewportContext.Provider>\n      {viewport ? <NavigationMenuViewport /> : null}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** The row of top-level items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\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  );\n}\n\n/** One top-level entry: a link, or a trigger with its panel. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: ComponentProps<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\n/** Trigger styles, for top-level links that should look like the triggers next to them. */\nconst navigationMenuTriggerStyle = cva([\n  \"group bg-background inline-flex h-9 w-max cursor-pointer items-center justify-center gap-1 rounded-md px-4 py-2 text-sm font-medium\",\n  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n  \"data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\",\n  \"data-[active]:bg-accent/50 data-[active]:text-accent-foreground\",\n  \"transition-[color,background-color,box-shadow] outline-none motion-reduce:transition-none\",\n  \"focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n]);\n\n/**\n * Opens and closes the item's panel. It is a button announced as expanded or\n * collapsed; the chevron turns over while the panel is open.\n */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), className)}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        data-slot=\"navigation-menu-trigger-icon\"\n        className=\"relative top-px size-3 group-data-[state=open]:rotate-180 motion-safe:transition-transform\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/**\n * The panel of a trigger. In the shared viewport it slides in from the side\n * of the trigger you came from (`data-motion`); without a viewport it fades\n * and zooms in under its own trigger.\n */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  const viewport = useContext(NavigationMenuViewportContext);\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 md:w-auto\",\n        viewport\n          ? [\n              \"md:absolute\",\n              // animate-in/out sit behind motion-safe: so reduced motion really turns them off.\n              \"motion-safe:data-[motion^=from-]:animate-in motion-safe:data-[motion^=from-]:fade-in\",\n              \"motion-safe:data-[motion^=to-]:animate-out motion-safe:data-[motion^=to-]:fade-out\",\n              \"motion-safe:data-[motion=from-end]:slide-in-from-right-52 motion-safe:data-[motion=from-start]:slide-in-from-left-52\",\n              \"motion-safe:data-[motion=to-end]:slide-out-to-right-52 motion-safe:data-[motion=to-start]:slide-out-to-left-52\",\n            ]\n          : [\n              \"bg-popover text-popover-foreground absolute top-full z-50 mt-1.5 overflow-hidden rounded-md border shadow-md\",\n              \"motion-safe:data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n              \"motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n            ],\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * A link in the menu. `active` marks the current page: Radix sets\n * `aria-current=\"page\"` and `data-active`. Selecting a link closes the open\n * panel. Use `asChild` to render your router's link component.\n */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-md p-2 text-sm\",\n        \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n        \"data-[active]:bg-accent/50 data-[active]:text-accent-foreground data-[active]:hover:bg-accent data-[active]:focus:bg-accent\",\n        \"transition-[color,background-color,box-shadow] outline-none motion-reduce:transition-none\",\n        \"focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A small arrow under the list that follows the open trigger. Put it right after NavigationMenuList. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        \"motion-safe:data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        \"motion-safe:data-[state=hidden]:animate-out data-[state=hidden]:fade-out\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] size-2 rotate-45 rounded-tl-[2px] shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\n/**\n * The shared surface the panels render in. NavigationMenu adds it for you\n * unless `viewport={false}`; it takes the size of the open panel from\n * `--radix-navigation-menu-viewport-width` / `-height`.\n */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      data-slot=\"navigation-menu-viewport-position\"\n      className=\"absolute top-full left-0 isolate z-50 flex justify-center\"\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-top overflow-hidden rounded-md border shadow-md md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          \"transition-[width,height] motion-reduce:transition-none\",\n          \"motion-safe:data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-90\",\n          \"motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n  type NavigationMenuProps,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}