menubar-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar-example",
  "title": "Menubar",
  "registryDependencies": [
    "button",
    "dialog",
    "menubar",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-mira/examples/menubar-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-mira/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n      <MenubarWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                  remixicon=\"RiFileLine\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                  remixicon=\"RiSaveLine\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                  remixicon=\"RiBold\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                  remixicon=\"RiItalic\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                  remixicon=\"RiUnderline\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                  remixicon=\"RiImageLine\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                  remixicon=\"RiLinksLine\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                  remixicon=\"RiTableLine\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                  remixicon=\"RiFileLine\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                      remixicon=\"RiFileCopyLine\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                      remixicon=\"RiScissorsLine\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                      remixicon=\"RiClipboardLine\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction MenubarWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarLabel>Actions</MenubarLabel>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </MenubarItem>\n              <MenubarItem inset>Paste</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Appearance</MenubarLabel>\n              <MenubarCheckboxItem\n                inset\n                checked={showBookmarks}\n                onCheckedChange={setShowBookmarks}\n              >\n                Bookmarks\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem\n                inset\n                checked={showUrls}\n                onCheckedChange={setShowUrls}\n              >\n                Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Theme</MenubarLabel>\n              <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n                <MenubarRadioItem inset value=\"light\">\n                  Light\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"dark\">\n                  Dark\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"system\">\n                  System\n                </MenubarRadioItem>\n              </MenubarRadioGroup>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger inset>More Options</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Save Page...</MenubarItem>\n                  <MenubarItem>Create Shortcut...</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}