{
  "schemaVersion": 1,
  "name": "navigation-menu",
  "useFor": "Use for a site's main navigation when some entries open a panel of related links (Product, Developers). Give each link in a panel a title and a NavigationMenuLinkDescription. Set tray for the header's glass tray, and active on the current page's link.",
  "constraints": [
    "Actions in the menu (use a dropdown menu)",
    "Panels with more than eight links",
    "Nesting panels"
  ],
  "documentation": "",
  "source": "opencommerce-agentcard-web src/app/globals.css (.nav-tray, .nav-link)",
  "exports": [
    "NavigationMenu",
    "NavigationMenuContent",
    "NavigationMenuIndicator",
    "NavigationMenuItem",
    "NavigationMenuLink",
    "NavigationMenuLinkDescription",
    "NavigationMenuList",
    "NavigationMenuTrigger",
    "NavigationMenuViewport",
    "navigationMenuTriggerStyle"
  ],
  "client": true,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/navigation-menu",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/navigation-menu.md",
  "examples": [
    {
      "path": "examples/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuLinkDescription,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\n\nconst PRODUCT = [\n  { title: \"Search\", href: \"#search\", line: \"Find products across every store.\" },\n  { title: \"Checkout\", href: \"#checkout\", line: \"Buy with the agent's card in one call.\" },\n  { title: \"Orders\", href: \"#orders\", line: \"Track shipping and returns.\" },\n  { title: \"Monitoring\", href: \"#monitoring\", line: \"Live status for 4,000 merchants.\" },\n];\nconst DEVELOPERS = [\n  { title: \"Quickstart\", href: \"#quickstart\", line: \"Your agent's first purchase in five minutes.\" },\n  { title: \"SDK\", href: \"#sdk\", line: \"TypeScript and Python clients.\" },\n  { title: \"API reference\", href: \"#api\", line: \"Every endpoint and its errors.\" },\n];\n\nfunction Links({ items }: { items: { title: string; href: string; line: string }[] }) {\n  return (\n    <ul className=\"grid w-[min(32rem,calc(100vw-3rem))] gap-0.5 sm:grid-cols-2\">\n      {items.map((item) => (\n        <li key={item.title}>\n          <NavigationMenuLink href={item.href}>\n            {item.title}\n            <NavigationMenuLinkDescription>{item.line}</NavigationMenuLinkDescription>\n          </NavigationMenuLink>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction Nav({ tray = false, defaultValue }: { tray?: boolean; defaultValue?: string }) {\n  return (\n    <NavigationMenu tray={tray} defaultValue={defaultValue}>\n      <NavigationMenuList>\n        <NavigationMenuItem value=\"product\">\n          <NavigationMenuTrigger>Product</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <Links items={PRODUCT} />\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem value=\"developers\">\n          <NavigationMenuTrigger>Developers</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <Links items={DEVELOPERS} />\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink href=\"#pricing\" active className={navigationMenuTriggerStyle()}>\n            Pricing\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"max-sm:hidden\">\n          <NavigationMenuLink href=\"#faq\" className={navigationMenuTriggerStyle()}>\n            FAQ\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n\nexport function Site() {\n  return (\n    <div className=\"flex h-80 items-start justify-center\">\n      <Nav tray />\n    </div>\n  );\n}\n\nexport function Plain() {\n  return (\n    <div className=\"flex h-80 items-start justify-center\">\n      <Nav />\n    </div>\n  );\n}\n\nexport function Open() {\n  return (\n    <div className=\"flex h-80 items-start justify-center\">\n      <Nav tray defaultValue=\"product\" />\n    </div>\n  );\n}\n",
      "exports": [
        "Site",
        "Plain",
        "Open"
      ],
      "requires": [
        "navigation-menu"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/navigation-menu/Site"
        },
        {
          "name": "Plain",
          "url": "https://opencommerce-ds.vercel.app/preview/navigation-menu/Plain"
        },
        {
          "name": "Open",
          "url": "https://opencommerce-ds.vercel.app/preview/navigation-menu/Open"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Navigation Menu",
  "description": "Site links with panels, drawn as the header's links, optionally in its frosted tray.",
  "surface": "site",
  "kinds": [
    "nav-link"
  ],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-navigation-menu",
    "class-variance-authority",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Site navigation with panels, drawn from the header's links (globals.css .nav-link; computed): triggers and links are\n// 14px Inter at 64 percent ink with 5px corners and 14px of side padding, a 5 percent ink wash and ink text under the\n// pointer and while their panel is open; the current page is the white pill with blue text and the lit edge. `tray`\n// sets the list in the header's frosted tray (a 10 percent ink edge, 8px corners). A trigger's chevron turns over when\n// open (200ms in-out, it moves on screen). The panel opens below in the brand's floating panel (white, a 9 percent ink\n// edge, 8px corners, a soft drop) that grows from 0.97 with a fade, resizes to each panel and crossfades between them;\n// links inside take a 14px title and a 12px line at 64 percent ink. Reduced motion keeps the fades only.\nfunction NavigationMenu({ className, children, viewport = true, tray = false, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { viewport?: boolean; tray?: boolean }) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      data-tray={tray || undefined}\n      className={cn(\"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\", className)}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0.5\",\n        \"group-data-[tray=true]/navigation-menu:rounded-control group-data-[tray=true]/navigation-menu:border group-data-[tray=true]/navigation-menu:border-line-glass group-data-[tray=true]/navigation-menu:bg-glass group-data-[tray=true]/navigation-menu:bg-(image:--ds-glass-sheen) group-data-[tray=true]/navigation-menu:p-0.75 group-data-[tray=true]/navigation-menu:shadow-glass group-data-[tray=true]/navigation-menu:[backdrop-filter:var(--ds-glass-blur)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" className={cn(\"relative\", className)} {...props} />;\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex w-max items-center justify-center gap-1.5 rounded-menu px-3.5 py-2 font-sans text-body-sm leading-tight text-fg-nav outline-none transition-[background-color,color] duration-150 ease-out hover:bg-wash-hover hover:text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-wash-hover data-[state=open]:text-fg data-[active]:bg-surface data-[active]:text-fg-brand data-[active]:shadow-lit motion-reduce:transition-none\",\n);\n\nfunction NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger data-slot=\"navigation-menu-trigger\" className={cn(navigationMenuTriggerStyle(), className)} {...props}>\n      {children}\n      <ChevronDown aria-hidden strokeWidth={1.5} className=\"size-3.5 opacity-70 transition-[rotate] duration-200 ease-in-out group-data-[state=open]:rotate-180 motion-reduce:transition-none\" />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-1 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-control group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-line group-data-[viewport=false]/navigation-menu:bg-surface group-data-[viewport=false]/navigation-menu:shadow-floating group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-pop-in\",\n        \"data-[motion^=from-]:animate-fade-in motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className=\"absolute top-full left-1/2 isolate z-50 flex -translate-x-1/2 justify-center md:left-0 md:translate-x-0\">\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) max-w-[calc(100vw-2rem)] origin-top overflow-hidden rounded-control border border-line bg-surface text-fg shadow-floating transition-[width,height] duration-200 ease-out data-[state=open]:animate-pop-in md:origin-top-left motion-reduce:animate-none motion-reduce:transition-none\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-0.5 rounded-menu px-3 py-2.5 font-sans text-body-sm leading-snug text-fg outline-none transition-[background-color] duration-150 ease-out hover:bg-wash-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring data-[active]:text-fg-brand motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A link's second line: 12px Inter at 64 percent ink. */\nfunction NavigationMenuLinkDescription({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"navigation-menu-link-description\" className={cn(\"text-caption leading-snug text-fg-muted\", className)} {...props} />;\n}\n\nfunction NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\"top-full z-10 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-fade-in\", className)}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2.5 rotate-45 rounded-tl-chip border-t border-l border-line bg-surface\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuLinkDescription,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"
    }
  ]
}