{"name":"menubar","title":"Menubar","description":"A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.","installCommand":"bunx marko-ui add menubar -y","usageTags":"<Menubar>, <MenubarMenu>","importSnippet":"import Menubar from \"@/components/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@/components/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@/components/ui/dropdown-menu/dropdown-menu.marko\";","usageSnippet":"static const fileItems = [\n  { value: \"new\", label: \"New Tab\", shortcut: \"⌘T\" },\n  { type: \"separator\" },\n  { value: \"print\", label: \"Print…\" },\n] satisfies DropdownMenuItem[];\n\n<Menubar>\n  <MenubarMenu items=fileItems select(value) { /* ... */ }>\n    <@trigger|triggerProps|>\n      <button ...triggerProps>File</button>\n    </@trigger>\n  </MenubarMenu>\n</Menubar>","tags":["Menubar","MenubarMenu"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"menubar-demo","title":"Basic","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const FILE_ITEMS = [\n  { value: \"new-tab\", label: \"New Tab\", shortcut: \"⌘T\" },\n  { value: \"new-window\", label: \"New Window\", shortcut: \"⌘N\" },\n  { type: \"separator\" },\n  { value: \"share\", label: \"Share\" },\n  { type: \"separator\" },\n  { value: \"print\", label: \"Print...\", shortcut: \"⌘P\" },\n] satisfies DropdownMenuItem[];\n\nstatic const EDIT_ITEMS = [\n  { value: \"undo\", label: \"Undo\", shortcut: \"⌘Z\" },\n  { value: \"redo\", label: \"Redo\", shortcut: \"⇧⌘Z\" },\n  { type: \"separator\" },\n  { value: \"cut\", label: \"Cut\" },\n  { value: \"copy\", label: \"Copy\" },\n  { value: \"paste\", label: \"Paste\" },\n] satisfies DropdownMenuItem[];\n\nstatic const VIEW_ITEMS = [\n  { value: \"reload\", label: \"Reload\", shortcut: \"⌘R\" },\n  { value: \"force-reload\", label: \"Force Reload\", disabled: true },\n  { type: \"separator\" },\n  { value: \"fullscreen\", label: \"Toggle Fullscreen\" },\n] satisfies DropdownMenuItem[];\n\n<Menubar>\n  <MenubarMenu items=FILE_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        File\n      </button>\n    </@trigger>\n  </MenubarMenu>\n  <MenubarMenu items=EDIT_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        Edit\n      </button>\n    </@trigger>\n  </MenubarMenu>\n  <MenubarMenu items=VIEW_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        View\n      </button>\n    </@trigger>\n  </MenubarMenu>\n</Menubar>","description":"Each `MenubarMenu` takes an `items` array of the same shape as the dropdown menu, plus its own `@trigger` body for the visible button."},{"id":"menubar-checkbox","title":"Checkbox","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\n\n<let/showBookmarksBar=false/>\n<let/showFullUrls=true/>\n<let/strikethrough=true/>\n<let/code=false/>\n<let/superscript=false/>\n\n<Menubar class=\"w-72\">\n  <MenubarMenu\n    checkedChange(value, checked) {\n      if (value === \"bookmarks-bar\") showBookmarksBar = checked;\n      else if (value === \"full-urls\") showFullUrls = checked;\n    }\n  >\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        View\n      </button>\n    </@trigger>\n    <@item type=\"checkbox\" value=\"bookmarks-bar\" checked=showBookmarksBar>Always Show Bookmarks Bar</@item>\n    <@item type=\"checkbox\" value=\"full-urls\" checked=showFullUrls>Always Show Full URLs</@item>\n    <@item type=\"separator\"/>\n    <@item value=\"reload\" shortcut=\"⌘R\" inset>Reload</@item>\n    <@item value=\"force-reload\" shortcut=\"⇧⌘R\" inset disabled>Force Reload</@item>\n  </MenubarMenu>\n  <MenubarMenu\n    checkedChange(value, checked) {\n      if (value === \"strikethrough\") strikethrough = checked;\n      else if (value === \"code\") code = checked;\n      else if (value === \"superscript\") superscript = checked;\n    }\n  >\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        Format\n      </button>\n    </@trigger>\n    <@item type=\"checkbox\" value=\"strikethrough\" checked=strikethrough>Strikethrough</@item>\n    <@item type=\"checkbox\" value=\"code\" checked=code>Code</@item>\n    <@item type=\"checkbox\" value=\"superscript\" checked=superscript>Superscript</@item>\n  </MenubarMenu>\n</Menubar>","description":"Use `<@item type=\"checkbox\">` (or an `items` entry with `type: \"checkbox\"`) for toggleable options; drive `checked` from your own state and update it in `checkedChange`."},{"id":"menubar-radio","title":"Radio","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\n\n<let/user=\"benoit\"/>\n<let/theme=\"system\"/>\n\n<Menubar class=\"w-72\">\n  <MenubarMenu radioChange(group, value) { if (group === \"user\") user = value; }>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        Profiles\n      </button>\n    </@trigger>\n    <@item type=\"radio\" value=\"andy\" radioGroup=\"user\" checked=(user === \"andy\")>Andy</@item>\n    <@item type=\"radio\" value=\"benoit\" radioGroup=\"user\" checked=(user === \"benoit\")>Benoit</@item>\n    <@item type=\"radio\" value=\"luis\" radioGroup=\"user\" checked=(user === \"luis\")>Luis</@item>\n    <@item type=\"separator\"/>\n    <@item value=\"edit\" inset>Edit...</@item>\n    <@item value=\"add-profile\" inset>Add Profile...</@item>\n  </MenubarMenu>\n  <MenubarMenu radioChange(group, value) { if (group === \"theme\") theme = value; }>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        Theme\n      </button>\n    </@trigger>\n    <@item type=\"radio\" value=\"light\" radioGroup=\"theme\" checked=(theme === \"light\")>Light</@item>\n    <@item type=\"radio\" value=\"dark\" radioGroup=\"theme\" checked=(theme === \"dark\")>Dark</@item>\n    <@item type=\"radio\" value=\"system\" radioGroup=\"theme\" checked=(theme === \"system\")>System</@item>\n  </MenubarMenu>\n</Menubar>","description":"Group `<@item type=\"radio\">` entries with a shared `radioGroup` name for single-select options; `radioChange` fires with the group name and the newly selected value.","essential":true},{"id":"menubar-submenu","title":"Submenu","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const FILE_ITEMS = [\n  {\n    type: \"sub\",\n    label: \"Share\",\n    subEntries: [\n      { value: \"email-link\", label: \"Email link\" },\n      { value: \"messages\", label: \"Messages\" },\n      { value: \"notes\", label: \"Notes\" },\n    ],\n  },\n  { type: \"separator\" },\n  { value: \"print\", label: \"Print...\", shortcut: \"⌘P\" },\n] satisfies DropdownMenuItem[];\n\nstatic const EDIT_ITEMS = [\n  { value: \"undo\", label: \"Undo\", shortcut: \"⌘Z\" },\n  { value: \"redo\", label: \"Redo\", shortcut: \"⇧⌘Z\" },\n  { type: \"separator\" },\n  {\n    type: \"sub\",\n    label: \"Find\",\n    subEntries: [\n      { value: \"find\", label: \"Find...\" },\n      { value: \"find-next\", label: \"Find Next\" },\n      { value: \"find-previous\", label: \"Find Previous\" },\n    ],\n  },\n  { type: \"separator\" },\n  { value: \"cut\", label: \"Cut\" },\n  { value: \"copy\", label: \"Copy\" },\n  { value: \"paste\", label: \"Paste\" },\n] satisfies DropdownMenuItem[];\n\n<Menubar class=\"w-72\">\n  <MenubarMenu items=FILE_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        File\n      </button>\n    </@trigger>\n  </MenubarMenu>\n  <MenubarMenu items=EDIT_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        Edit\n      </button>\n    </@trigger>\n  </MenubarMenu>\n</Menubar>","description":"Use a `type: \"sub\"` entry with its own `subEntries` array for nested menus, opened from a `MenubarSubTrigger`-equivalent row inside the parent menu."},{"id":"menubar-icons","title":"With Icons","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Menubar class=\"w-72\">\n  <MenubarMenu>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        File\n      </button>\n    </@trigger>\n    <@item value=\"new-file\" shortcut=\"⌘N\">\n      <Icon name=\"FileIcon\"/>\n      New File\n    </@item>\n    <@item value=\"open-folder\">\n      <Icon name=\"FolderIcon\"/>\n      Open Folder\n    </@item>\n    <@item type=\"separator\"/>\n    <@item value=\"save\" shortcut=\"⌘S\">\n      <Icon name=\"SaveIcon\"/>\n      Save\n    </@item>\n  </MenubarMenu>\n  <MenubarMenu>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        More\n      </button>\n    </@trigger>\n    <@item value=\"settings\">\n      <Icon name=\"Settings\"/>\n      Settings\n    </@item>\n    <@item value=\"help\">\n      <Icon name=\"HelpCircleIcon\"/>\n      Help\n    </@item>\n    <@item type=\"separator\"/>\n    <@item value=\"delete\" variant=\"destructive\">\n      <Icon name=\"TrashIcon\"/>\n      Delete\n    </@item>\n  </MenubarMenu>\n</Menubar>","description":"Give an item a markup body (instead of `label=`) to render an `<Icon>` alongside its text; mark a destructive entry with `variant=\"destructive\"`."},{"id":"menubar-rtl","title":"RTL","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\n<let/showBookmarksBar=false/>\n<let/showFullUrls=true/>\n<let/profile=\"benoit\"/>\n\n<const/fileItems=[\n  { value: \"new-tab\", label: \"علامة تبويب جديدة\", shortcut: \"⌘T\" },\n  { value: \"new-window\", label: \"نافذة جديدة\", shortcut: \"⌘N\" },\n  { value: \"new-incognito\", label: \"نافذة التصفح المتخفي الجديدة\", disabled: true },\n  { type: \"separator\" },\n  {\n    type: \"sub\",\n    label: \"مشاركة\",\n    subEntries: [\n      { value: \"email-link\", label: \"رابط البريد الإلكتروني\" },\n      { value: \"messages\", label: \"الرسائل\" },\n      { value: \"notes\", label: \"الملاحظات\" },\n    ],\n  },\n  { type: \"separator\" },\n  { value: \"print\", label: \"طباعة...\", shortcut: \"⌘P\" },\n] satisfies DropdownMenuItem[]/>\n\n<const/editItems=[\n  { value: \"undo\", label: \"تراجع\", shortcut: \"⌘Z\" },\n  { value: \"redo\", label: \"إعادة\", shortcut: \"⇧⌘Z\" },\n  { type: \"separator\" },\n  {\n    type: \"sub\",\n    label: \"بحث\",\n    subEntries: [\n      { value: \"search-web\", label: \"البحث على الويب\" },\n      { value: \"find\", label: \"بحث...\" },\n      { value: \"find-next\", label: \"البحث التالي\" },\n      { value: \"find-previous\", label: \"البحث السابق\" },\n    ],\n  },\n  { type: \"separator\" },\n  { value: \"cut\", label: \"قص\" },\n  { value: \"copy\", label: \"نسخ\" },\n  { value: \"paste\", label: \"لصق\" },\n] satisfies DropdownMenuItem[]/>\n\n<const/viewItems=[\n  { type: \"checkbox\", value: \"bookmarks-bar\", label: \"شريط الإشارات المرجعية\", checked: showBookmarksBar },\n  { type: \"checkbox\", value: \"full-urls\", label: \"عناوين URL الكاملة\", checked: showFullUrls },\n  { type: \"separator\" },\n  { value: \"reload\", label: \"إعادة تحميل\", shortcut: \"⌘R\", inset: true },\n  { value: \"force-reload\", label: \"إعادة تحميل قسري\", shortcut: \"⇧⌘R\", inset: true, disabled: true },\n  { type: \"separator\" },\n  { value: \"fullscreen\", label: \"تبديل وضع ملء الشاشة\", inset: true },\n  { type: \"separator\" },\n  { value: \"hide-sidebar\", label: \"إخفاء الشريط الجانبي\", inset: true },\n] satisfies DropdownMenuItem[]/>\n\n<const/profileItems=[\n  { type: \"radio\", value: \"andy\", label: \"Andy\", radioGroup: \"profile\", checked: profile === \"andy\" },\n  { type: \"radio\", value: \"benoit\", label: \"Benoit\", radioGroup: \"profile\", checked: profile === \"benoit\" },\n  { type: \"radio\", value: \"luis\", label: \"Luis\", radioGroup: \"profile\", checked: profile === \"luis\" },\n  { type: \"separator\" },\n  { value: \"edit-profile\", label: \"تعديل...\", inset: true },\n  { type: \"separator\" },\n  { value: \"add-profile\", label: \"إضافة ملف شخصي...\", inset: true },\n] satisfies DropdownMenuItem[]/>\n\n<div dir=\"rtl\">\n  <Menubar class=\"w-72\">\n    <MenubarMenu items=fileItems>\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n          ملف\n        </button>\n      </@trigger>\n    </MenubarMenu>\n    <MenubarMenu items=editItems>\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n          تعديل\n        </button>\n      </@trigger>\n    </MenubarMenu>\n    <MenubarMenu\n      items=viewItems\n      checkedChange(value, checked) {\n        if (value === \"bookmarks-bar\") showBookmarksBar = checked;\n        else if (value === \"full-urls\") showFullUrls = checked;\n      }\n    >\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n          عرض\n        </button>\n      </@trigger>\n    </MenubarMenu>\n    <MenubarMenu\n      items=profileItems\n      radioChange(group, value) { if (group === \"profile\") profile = value; }\n    >\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n          الملفات الشخصية\n        </button>\n      </@trigger>\n    </MenubarMenu>\n  </Menubar>\n</div>","description":"Wrap the menubar in a `dir=\"rtl\"` container for right-to-left layout and text. One gap versus upstream: `MenubarMenu`'s `Input` type does not declare the menu machine's `dir` prop, so passing `dir` to it is a type error — even though `<zag-machine from=input/>` would forward it to the machine (`MenuProps` extends `DirectionProperty`). Until the type declares it, only the static `dir=\"rtl\"` wrapper flips this demo: text direction and logical-property layout, not floating-ui's own RTL placement flip."},{"id":"menubar-danger","title":"With danger item","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const PROFILES_ITEMS = [\n  { type: \"label\", label: \"Profiles\" },\n  { type: \"separator\" },\n  { value: \"add\", label: \"Add Profile...\" },\n  { type: \"separator\" },\n  { value: \"remove\", label: \"Remove Profile\", variant: \"destructive\" },\n] satisfies DropdownMenuItem[];\n\n<Menubar>\n  <MenubarMenu items=PROFILES_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        Profiles\n      </button>\n    </@trigger>\n  </MenubarMenu>\n</Menubar>","description":"Mark a destructive entry with `danger` to style it distinctly, and group entries with a `label` item and separators."},{"id":"menubar-disabled","title":"Disabled item","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const VIEW_ITEMS = [\n  { value: \"reload\", label: \"Reload\", shortcut: \"⌘R\" },\n  { value: \"force-reload\", label: \"Force Reload\", disabled: true },\n  { type: \"separator\" },\n  { value: \"fullscreen\", label: \"Toggle Fullscreen\" },\n] satisfies DropdownMenuItem[];\n\n<Menubar>\n  <MenubarMenu items=VIEW_ITEMS>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        View\n      </button>\n    </@trigger>\n  </MenubarMenu>\n</Menubar>","description":"Set `disabled` on an individual item to skip it in the tab order and ignore pointer input, without disabling the whole menu."},{"id":"menubar-controlled","title":"Selection","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const FILE_ITEMS = [\n  { value: \"new-tab\", label: \"New Tab\", shortcut: \"⌘T\" },\n  { value: \"new-window\", label: \"New Window\", shortcut: \"⌘N\" },\n  { type: \"separator\" },\n  { value: \"share\", label: \"Share\" },\n  { type: \"separator\" },\n  { value: \"print\", label: \"Print...\", shortcut: \"⌘P\" },\n] satisfies DropdownMenuItem[];\n\nstatic const EDIT_ITEMS = [\n  { value: \"undo\", label: \"Undo\", shortcut: \"⌘Z\" },\n  { value: \"redo\", label: \"Redo\", shortcut: \"⇧⌘Z\" },\n  { type: \"separator\" },\n  { value: \"cut\", label: \"Cut\" },\n  { value: \"copy\", label: \"Copy\" },\n  { value: \"paste\", label: \"Paste\" },\n] satisfies DropdownMenuItem[];\n\n<let/selected=\"\"/>\n\n<div class=\"flex items-center gap-4\">\n  <Menubar>\n    <MenubarMenu items=FILE_ITEMS select(value) { selected = value; }>\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n          File\n        </button>\n      </@trigger>\n    </MenubarMenu>\n    <MenubarMenu items=EDIT_ITEMS select(value) { selected = value; }>\n      <@trigger|triggerProps|>\n        <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n          Edit\n        </button>\n      </@trigger>\n    </MenubarMenu>\n  </Menubar>\n  <span class=\"text-sm text-muted-foreground\">selected: ${selected || \"none\"}</span>\n</div>","description":"Pass a `select` handler to each `MenubarMenu` to react to the chosen item's `value`."},{"id":"menubar-compound","title":"Compound (attr tags)","source":"import Menubar from \"@marko-ui/shadcn/ui/menubar/menubar.marko\";\nimport MenubarMenu from \"@marko-ui/shadcn/ui/menubar/menu.marko\";\n\n<Menubar>\n  <MenubarMenu>\n    <@trigger|triggerProps|>\n      <button type=\"button\" ...triggerProps class=\"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\">\n        File\n      </button>\n    </@trigger>\n    <@item type=\"label\">Actions</@item>\n    <@item value=\"new-tab\" shortcut=\"⌘T\">New Tab</@item>\n    <@item value=\"new-window\" shortcut=\"⌘N\">New Window</@item>\n    <@item type=\"separator\"/>\n    <@item value=\"share\">Share</@item>\n    <@item type=\"separator\"/>\n    <@item value=\"print\" shortcut=\"⌘P\">Print...</@item>\n  </MenubarMenu>\n</Menubar>","description":"Use `<@item>` attribute tags on `MenubarMenu` instead of `items=` to compose the menu directly in markup — pass `type=\"separator\"` for a divider or `type=\"label\"` for a group label. Entries render in the order they are written. An item's text can come from either a `label=` attribute or a markup body, whichever you prefer.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{},"nativeAttributes":"div","subcomponents":[{"name":"menu","props":[{"name":"class","type":"string","required":false},{"name":"items","type":"DropdownMenuItem[]","required":false},{"name":"select","type":"(value: string) => void","required":false}],"parts":[{"name":"trigger","param":"Record<string, unknown>"},{"name":"item","attributes":[{"name":"type","type":"\"item\" | \"separator\" | \"label\" | \"checkbox\" | \"radio\" | \"sub\"","required":false},{"name":"value","type":"string","required":false},{"name":"label","type":"string","required":false},{"name":"disabled","type":"boolean","required":false},{"name":"shortcut","type":"string","required":false},{"name":"variant","type":"\"default\" | \"destructive\"","required":false,"description":"Upstream `variant: \"default\" | \"destructive\"`, emitted as `data-variant`."},{"name":"inset","type":"boolean","required":false,"description":"Upstream styling attr — indents the item to align with checkbox/radio items."},{"name":"checked","type":"boolean","required":false,"description":"`type: \"checkbox\" | \"radio\"` checked state (checkbox) or selected value match (radio)."},{"name":"radioGroup","type":"string","required":false,"description":"Groups radio items — required for `type: \"radio\"` entries."},{"name":"radioValue","type":"string","required":false,"description":"`type: \"radio\"` entries only — this entry's value within its `radioGroup`."},{"name":"subEntries","type":"readonly MenubarItemAttrs[]","required":false,"description":"`type: \"sub\"` entries only — the nested submenu's own item list."}],"repeatable":true}],"events":[{"name":"checkedChange","arg":"string, checked: boolean","description":"Fires when a checkbox item's checked state changes; receives its value and new checked state."},{"name":"radioChange","arg":"string, value: string","description":"Fires when a radio group's selected value changes; receives the group name and new value."}]}],"itemTypes":[{"prop":"items","typeName":"DropdownMenuItem","fields":[{"name":"type","type":"\"item\" | \"separator\" | \"label\" | \"checkbox\" | \"radio\" | \"sub\"","required":false},{"name":"value","type":"string","required":false},{"name":"label","type":"string","required":false},{"name":"disabled","type":"boolean","required":false},{"name":"shortcut","type":"string","required":false},{"name":"variant","type":"\"default\" | \"destructive\"","required":false,"description":"Upstream `variant: \"default\" | \"destructive\"`, emitted as `data-variant`."},{"name":"inset","type":"boolean","required":false,"description":"Emits `data-inset` — indents the entry to align with icon-bearing siblings."},{"name":"checked","type":"boolean","required":false,"description":"Checked state for `type=\"checkbox\"` and `type=\"radio\"` entries."},{"name":"radioGroup","type":"string","required":false,"description":"Groups radio items — required for `type: \"radio\"` entries."},{"name":"radioValue","type":"string","required":false,"description":"`type: \"radio\"` entries only — this entry's value within its `radioGroup`."},{"name":"subEntries","type":"readonly DropdownMenuItem[]","required":false,"description":"`type: \"sub\"` entries only — the nested submenu's own item list. One level deep: a `type: \"sub\"` entry inside a submenu's own `subEntries` is not wired (same limit as menubar's submenu)."}]}]}