{
  "schemaVersion": 1,
  "name": "menubar",
  "useFor": "Use in a tool where people work for a long time and expect desktop menus (an order console). Keep to a few menus with short names. Arrow keys move between menus and through their items.",
  "constraints": [
    "A menubar as site navigation (use navigation menu)",
    "More than five menus",
    "Menus with a single item"
  ],
  "documentation": "",
  "source": "Extension from opencommerce-agentcard-web src/app/globals.css (.btn-secondary, .nav-tray) and dropdown-menu.tsx",
  "exports": [
    "Menubar",
    "MenubarCheckboxItem",
    "MenubarContent",
    "MenubarGroup",
    "MenubarItem",
    "MenubarLabel",
    "MenubarMenu",
    "MenubarPortal",
    "MenubarRadioGroup",
    "MenubarRadioItem",
    "MenubarSeparator",
    "MenubarShortcut",
    "MenubarSub",
    "MenubarSubContent",
    "MenubarSubTrigger",
    "MenubarTrigger"
  ],
  "client": true,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/menubar",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/menubar.md",
  "examples": [
    {
      "path": "examples/menubar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/components/ui/menubar\";\n\nfunction Console({ defaultValue }: { defaultValue?: string }) {\n  const [message, setMessage] = React.useState(\"Choose a command.\");\n  const [density, setDensity] = React.useState(\"comfortable\");\n  const [showTest, setShowTest] = React.useState(false);\n  const [showFailed, setShowFailed] = React.useState(true);\n  return (\n    <div className=\"grid justify-items-start gap-3\">\n      <Menubar defaultValue={defaultValue}>\n        <MenubarMenu value=\"orders\">\n          <MenubarTrigger>Orders</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem onSelect={() => setMessage(\"New test order started.\")}>\n              New test order <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem onSelect={() => setMessage(\"Exported 1,284 orders as CSV.\")}>\n              Export as CSV <MenubarShortcut>⌘E</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSub>\n              <MenubarSubTrigger>Retry failed</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem onSelect={() => setMessage(\"Retried 3 checkouts from the last hour.\")}>From the last hour</MenubarItem>\n                <MenubarItem onSelect={() => setMessage(\"Retried 11 checkouts from today.\")}>From today</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\" onSelect={() => setMessage(\"Cleared every test order.\")}>\n              Clear test orders\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu value=\"view\">\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarLabel>Show</MenubarLabel>\n            <MenubarCheckboxItem checked={showTest} onCheckedChange={(on) => setShowTest(on === true)}>\n              Test orders\n            </MenubarCheckboxItem>\n            <MenubarCheckboxItem checked={showFailed} onCheckedChange={(on) => setShowFailed(on === true)}>\n              Failed checkouts\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarLabel>Density</MenubarLabel>\n            <MenubarRadioGroup value={density} onValueChange={setDensity}>\n              <MenubarRadioItem value=\"comfortable\">Comfortable</MenubarRadioItem>\n              <MenubarRadioItem value=\"compact\">Compact</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu value=\"help\">\n          <MenubarTrigger>Help</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem onSelect={() => setMessage(\"Opened the API reference.\")}>API reference</MenubarItem>\n            <MenubarItem onSelect={() => setMessage(\"Opened the status page.\")}>Merchant status</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n      <p role=\"status\" className=\"text-body-sm text-fg-muted\">\n        {message} Showing {[showTest && \"test orders\", showFailed && \"failed checkouts\"].filter(Boolean).join(\" and \") || \"live orders only\"}, {density}.\n      </p>\n    </div>\n  );\n}\n\nexport function Site() {\n  return <Console />;\n}\n\nexport function Open() {\n  return (\n    <div className=\"h-72\">\n      <Console defaultValue=\"orders\" />\n    </div>\n  );\n}\n",
      "exports": [
        "Site",
        "Open"
      ],
      "requires": [
        "menubar"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/menubar/Site"
        },
        {
          "name": "Open",
          "url": "https://opencommerce-ds.vercel.app/preview/menubar/Open"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Menubar",
  "description": "A white bar of menus (Orders, View, Help) like a desktop app's, each opening the brand's menu.",
  "surface": "site",
  "kinds": [
    "menu-panel",
    "menu-item"
  ],
  "requires": [
    "theme",
    "surface",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-menubar",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/menubar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport { Check, ChevronRight } from \"lucide-react\";\n\nimport { usePortalContainer } from \"@/lib/surface\";\nimport { cn } from \"@/lib/utils\";\n\n// A row of menus (File, Edit, View): a bar that is the page's white key laid flat (a 16 percent ink edge, 8px corners,\n// 4px inside), its triggers 14px Inter at 64 percent ink with 5px corners that take a faint wash under the pointer and\n// stay washed in ink while their menu is open. Each menu is the brand's panel (dropdown-menu.tsx): white, a 9 percent\n// ink edge, a soft drop, rows that wash when highlighted with no transition. A menu grows from its trigger (scale 0.97\n// and a fade, 160ms ease-out) and closes at once. Reduced motion keeps the fade.\nconst PANEL =\n  \"z-50 flex max-h-(--radix-menubar-content-available-height) max-w-(--radix-menubar-content-available-width) origin-(--radix-menubar-content-transform-origin) animate-pop-in flex-col gap-0.5 overflow-y-auto overscroll-contain rounded-control border border-line bg-surface p-1 text-fg shadow-floating outline-none motion-reduce:animate-none\";\nconst ROW =\n  \"relative flex w-full cursor-default items-center gap-2 rounded-menu px-2.5 py-2 font-sans text-body-sm leading-snug text-fg-muted outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-wash-hover data-[highlighted]:text-fg data-[inset]:pl-8 [&_svg]:size-3.5 [&_svg]:shrink-0\";\nconst DANGER = \"text-danger data-[highlighted]:bg-danger/6 data-[highlighted]:text-danger\";\nconst QUIET = \"text-fg-faint\";\n\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return <MenubarPrimitive.Root data-slot=\"menubar\" className={cn(\"flex h-10 w-fit items-center gap-0.5 rounded-control border border-hairline bg-surface p-1\", className)} {...props} />;\n}\n\nfunction MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarPortal(props: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" container={usePortalContainer()} {...props} />;\n}\n\nfunction MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nfunction MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex h-full items-center rounded-menu px-2.5 font-sans text-body-sm leading-none text-fg-muted outline-none select-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 data-[highlighted]:bg-wash-hover data-[highlighted]:text-fg data-[state=open]:bg-wash-hover data-[state=open]:text-fg motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarContent({ className, align = \"start\", alignOffset = -4, sideOffset = 8, collisionPadding = 8, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(PANEL, \"min-w-[min(12rem,var(--radix-menubar-content-available-width))]\", className)}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\nfunction MenubarItem({ className, inset, variant = \"default\", ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & { inset?: boolean; variant?: \"default\" | \"destructive\" }) {\n  return <MenubarPrimitive.Item data-slot=\"menubar-item\" data-inset={inset || undefined} data-variant={variant} className={cn(ROW, variant === \"destructive\" && DANGER, className)} {...props} />;\n}\n\nfunction MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem data-slot=\"menubar-checkbox-item\" checked={checked} className={cn(ROW, \"pr-8\", className)} {...props}>\n      {children}\n      <MenubarPrimitive.ItemIndicator className=\"absolute right-2.5 text-fg-brand\">\n        <Check strokeWidth={1.75} />\n      </MenubarPrimitive.ItemIndicator>\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem data-slot=\"menubar-radio-item\" className={cn(ROW, \"pr-8 data-[state=checked]:text-fg\", className)} {...props}>\n      {children}\n      <MenubarPrimitive.ItemIndicator className=\"absolute right-2.5 text-fg-brand\">\n        <Check strokeWidth={1.75} />\n      </MenubarPrimitive.ItemIndicator>\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\nfunction MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {\n  return <MenubarPrimitive.Label data-slot=\"menubar-label\" data-inset={inset || undefined} className={cn(\"px-2.5 pt-2 pb-1 font-sans text-caption data-[inset]:pl-8\", QUIET, className)} {...props} />;\n}\n\nfunction MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return <MenubarPrimitive.Separator data-slot=\"menubar-separator\" className={cn(\"-mx-1 my-1 h-px bg-line\", className)} {...props} />;\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"menubar-shortcut\" className={cn(\"ml-auto pl-4 font-mono text-caption\", QUIET, className)} {...props} />;\n}\n\nfunction MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.SubTrigger data-slot=\"menubar-sub-trigger\" data-inset={inset || undefined} className={cn(ROW, \"data-[state=open]:bg-wash-hover data-[state=open]:text-fg\", className)} {...props}>\n      {children}\n      <ChevronRight className=\"ml-auto\" strokeWidth={1.5} />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\nfunction MenubarSubContent({ className, collisionPadding = 8, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.SubContent data-slot=\"menubar-sub-content\" collisionPadding={collisionPadding} className={cn(PANEL, \"min-w-[min(10rem,var(--radix-menubar-content-available-width))]\", className)} {...props} />\n    </MenubarPortal>\n  );\n}\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n"
    }
  ]
}