dropdown-menu-example.json — ui Source File
Architecture documentation for dropdown-menu-example.json, a json file in the ui codebase.
Entity Profile
Source Code
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "dropdown-menu-example",
"title": "Dropdown Menu",
"registryDependencies": [
"avatar",
"button",
"dialog",
"dropdown-menu",
"example"
],
"files": [
{
"path": "registry/base-mira/examples/dropdown-menu-example.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n return (\n <ExampleWrapper>\n <DropdownMenuBasic />\n <DropdownMenuComplex />\n <DropdownMenuSides />\n <DropdownMenuWithIcons />\n <DropdownMenuWithShortcuts />\n <DropdownMenuWithSubmenu />\n <DropdownMenuWithCheckboxes />\n <DropdownMenuWithCheckboxesIcons />\n <DropdownMenuWithRadio />\n <DropdownMenuWithRadioIcons />\n <DropdownMenuWithDestructive />\n <DropdownMenuWithAvatar />\n <DropdownMenuInDialog />\n <DropdownMenuWithInset />\n </ExampleWrapper>\n )\n}\n\nfunction DropdownMenuBasic() {\n return (\n <Example title=\"Basic\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>My Account</DropdownMenuLabel>\n <DropdownMenuItem>Profile</DropdownMenuItem>\n <DropdownMenuItem>Billing</DropdownMenuItem>\n <DropdownMenuItem>Settings</DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n <DropdownMenuItem>Support</DropdownMenuItem>\n <DropdownMenuItem disabled>API</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuSides() {\n return (\n <Example title=\"Sides\" containerClassName=\"col-span-2\">\n <div className=\"flex flex-wrap justify-center gap-2\">\n {(\n [\n \"inline-start\",\n \"left\",\n \"top\",\n \"bottom\",\n \"right\",\n \"inline-end\",\n ] as const\n ).map((side) => (\n <DropdownMenu key={side}>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n >\n {side.replace(\"-\", \" \")}\n </DropdownMenuTrigger>\n <DropdownMenuContent side={side}>\n <DropdownMenuGroup>\n <DropdownMenuItem>Profile</DropdownMenuItem>\n <DropdownMenuItem>Billing</DropdownMenuItem>\n <DropdownMenuItem>Settings</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n ))}\n </div>\n </Example>\n )\n}\n\nfunction DropdownMenuWithIcons() {\n return (\n <Example title=\"With Icons\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n Profile\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n Settings\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n remixicon=\"RiLogoutBoxLine\"\n />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithShortcuts() {\n return (\n <Example title=\"With Shortcuts\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>My Account</DropdownMenuLabel>\n <DropdownMenuItem>\n Profile\n <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n Billing\n <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n Settings\n <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n Keyboard shortcuts\n <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n Log out\n <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithSubmenu() {\n return (\n <Example title=\"With Submenu\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuItem>Team</DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuItem>Email</DropdownMenuItem>\n <DropdownMenuItem>Message</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>More...</DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n <DropdownMenuItem>\n New Team\n <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n const [showStatusBar, setShowStatusBar] = React.useState(true)\n const [showActivityBar, setShowActivityBar] = React.useState(false)\n const [showPanel, setShowPanel] = React.useState(false)\n\n return (\n <Example title=\"With Checkboxes\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Checkboxes\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"min-w-40\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={showStatusBar}\n onCheckedChange={setShowStatusBar}\n >\n <IconPlaceholder\n lucide=\"LayoutIcon\"\n tabler=\"IconLayout\"\n hugeicons=\"LayoutIcon\"\n phosphor=\"LayoutIcon\"\n remixicon=\"RiLayoutLine\"\n />\n Status Bar\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={showActivityBar}\n onCheckedChange={setShowActivityBar}\n disabled\n >\n <IconPlaceholder\n lucide=\"ActivityIcon\"\n tabler=\"IconActivity\"\n hugeicons=\"ActivityIcon\"\n phosphor=\"ActivityIcon\"\n remixicon=\"RiPulseLine\"\n />\n Activity Bar\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={showPanel}\n onCheckedChange={setShowPanel}\n >\n <IconPlaceholder\n lucide=\"PanelLeftIcon\"\n tabler=\"IconLayoutSidebar\"\n hugeicons=\"LayoutLeftIcon\"\n phosphor=\"SidebarIcon\"\n remixicon=\"RiSideBarLine\"\n />\n Panel\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithRadio() {\n const [position, setPosition] = React.useState(\"bottom\")\n\n return (\n <Example title=\"With Radio Group\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Radio Group\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={position}\n onValueChange={setPosition}\n >\n <DropdownMenuRadioItem value=\"top\">\n <IconPlaceholder\n lucide=\"ArrowUpIcon\"\n tabler=\"IconArrowUp\"\n hugeicons=\"ArrowUp01Icon\"\n phosphor=\"ArrowUpIcon\"\n remixicon=\"RiArrowUpLine\"\n />\n Top\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"bottom\">\n <IconPlaceholder\n lucide=\"ArrowDownIcon\"\n tabler=\"IconArrowDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"ArrowDownIcon\"\n remixicon=\"RiArrowDownLine\"\n />\n Bottom\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"right\" disabled>\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n />\n Right\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n const [notifications, setNotifications] = React.useState({\n email: true,\n sms: false,\n push: true,\n })\n\n return (\n <Example title=\"Checkboxes with Icons\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Notifications\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"min-w-56\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={notifications.email}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, email: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"MailIcon\"\n tabler=\"IconMail\"\n hugeicons=\"MailIcon\"\n phosphor=\"EnvelopeIcon\"\n remixicon=\"RiMailLine\"\n />\n Email notifications\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.sms}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, sms: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"MessageSquareIcon\"\n tabler=\"IconMessage\"\n hugeicons=\"MessageIcon\"\n phosphor=\"ChatCircleIcon\"\n remixicon=\"RiChat1Line\"\n />\n SMS notifications\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.push}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, push: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n Push notifications\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n return (\n <Example title=\"Radio with Icons\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Payment Method\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"min-w-56\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={paymentMethod}\n onValueChange={setPaymentMethod}\n >\n <DropdownMenuRadioItem value=\"card\">\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Credit Card\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"paypal\">\n <IconPlaceholder\n lucide=\"WalletIcon\"\n tabler=\"IconWallet\"\n hugeicons=\"WalletIcon\"\n phosphor=\"WalletIcon\"\n remixicon=\"RiWalletLine\"\n />\n PayPal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"bank\">\n <IconPlaceholder\n lucide=\"Building2Icon\"\n tabler=\"IconBuildingBank\"\n hugeicons=\"BankIcon\"\n phosphor=\"BankIcon\"\n remixicon=\"RiBankLine\"\n />\n Bank Transfer\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithDestructive() {\n return (\n <Example title=\"With Destructive Items\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Actions\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"PencilIcon\"\n tabler=\"IconPencil\"\n hugeicons=\"EditIcon\"\n phosphor=\"PencilIcon\"\n remixicon=\"RiPencilLine\"\n />\n Edit\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare\"\n hugeicons=\"ShareIcon\"\n phosphor=\"ShareIcon\"\n remixicon=\"RiShareLine\"\n />\n Share\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ArchiveIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n Archive\n </DropdownMenuItem>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Delete\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithAvatar() {\n const menuContent = (\n <>\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BadgeCheckIcon\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadgeIcon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n remixicon=\"RiLogoutBoxLine\"\n />\n Sign Out\n </DropdownMenuItem>\n </>\n )\n\n return (\n <Example title=\"With Avatar\">\n <div className=\"flex items-center justify-between gap-4\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button\n variant=\"outline\"\n className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n />\n }\n >\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-semibold\">shadcn</span>\n <span className=\"text-muted-foreground truncate text-xs\">\n shadcn@example.com\n </span>\n </div>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n remixicon=\"RiArrowUpDownLine\"\n className=\"text-muted-foreground ml-auto\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n {menuContent}\n </DropdownMenuContent>\n </DropdownMenu>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n }\n >\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n <AvatarFallback>LR</AvatarFallback>\n </Avatar>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" side=\"top\">\n {menuContent}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n </Example>\n )\n}\n\nfunction DropdownMenuInDialog() {\n return (\n <Example title=\"In Dialog\">\n <Dialog>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Dropdown Menu Example</DialogTitle>\n <DialogDescription>\n Click the button below to see the dropdown menu.\n </DialogDescription>\n </DialogHeader>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open Menu\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n Copy\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n remixicon=\"RiScissorsLine\"\n />\n Cut\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ClipboardPasteIcon\"\n tabler=\"IconClipboard\"\n hugeicons=\"ClipboardIcon\"\n phosphor=\"ClipboardIcon\"\n remixicon=\"RiClipboardLine\"\n />\n Paste\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuItem>Save Page...</DropdownMenuItem>\n <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n <DropdownMenuItem>Name Window...</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n <DropdownMenuSeparator />\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Delete\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </DialogContent>\n </Dialog>\n </Example>\n )\n}\n\nfunction DropdownMenuWithInset() {\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 <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-44\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Actions</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n Copy\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n remixicon=\"RiScissorsLine\"\n />\n Cut\n </DropdownMenuItem>\n <DropdownMenuItem inset>Paste</DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n inset\n checked={showBookmarks}\n onCheckedChange={setShowBookmarks}\n >\n Bookmarks\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n inset\n checked={showUrls}\n onCheckedChange={setShowUrls}\n >\n Full URLs\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n <DropdownMenuRadioItem inset value=\"light\">\n Light\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem inset value=\"dark\">\n Dark\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem inset value=\"system\">\n System\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuSub>\n <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuItem>Save Page...</DropdownMenuItem>\n <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuComplex() {\n const [notifications, setNotifications] = React.useState({\n email: true,\n sms: false,\n push: true,\n })\n const [theme, setTheme] = React.useState(\"light\")\n\n return (\n <Example title=\"Complex\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Complex Menu\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"FileIcon\"\n phosphor=\"FileIcon\"\n remixicon=\"RiFileLine\"\n />\n New File\n <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n New Folder\n <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"FolderOpenIcon\"\n tabler=\"IconFolderOpen\"\n hugeicons=\"FolderOpenIcon\"\n phosphor=\"FolderOpenIcon\"\n remixicon=\"RiFolderOpenLine\"\n />\n Open Recent\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"CodeIcon\"\n remixicon=\"RiCodeLine\"\n />\n Project Alpha\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"CodeIcon\"\n remixicon=\"RiCodeLine\"\n />\n Project Beta\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n remixicon=\"RiMoreLine\"\n />\n More Projects\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"FileCodeIcon\"\n remixicon=\"RiFileCodeLine\"\n />\n Project Gamma\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"FileCodeIcon\"\n remixicon=\"RiFileCodeLine\"\n />\n Project Delta\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FolderSearchIcon\"\n tabler=\"IconFolderSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n />\n Browse...\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SaveIcon\"\n tabler=\"IconDeviceFloppy\"\n hugeicons=\"FloppyDiskIcon\"\n phosphor=\"FloppyDiskIcon\"\n remixicon=\"RiSaveLine\"\n />\n Save\n <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"DownloadIcon\"\n tabler=\"IconDownload\"\n hugeicons=\"DownloadIcon\"\n phosphor=\"DownloadIcon\"\n remixicon=\"RiDownloadLine\"\n />\n Export\n <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel>View</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={notifications.email}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, email: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"EyeIcon\"\n tabler=\"IconEye\"\n hugeicons=\"EyeIcon\"\n phosphor=\"EyeIcon\"\n remixicon=\"RiEyeLine\"\n />\n Show Sidebar\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.sms}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, sms: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"LayoutIcon\"\n tabler=\"IconLayout\"\n hugeicons=\"LayoutIcon\"\n phosphor=\"LayoutIcon\"\n remixicon=\"RiLayoutLine\"\n />\n Show Status Bar\n </DropdownMenuCheckboxItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"PaletteIcon\"\n tabler=\"IconPalette\"\n hugeicons=\"PaintBoardIcon\"\n phosphor=\"PaletteIcon\"\n remixicon=\"RiPaletteLine\"\n />\n Theme\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={theme}\n onValueChange={setTheme}\n >\n <DropdownMenuRadioItem value=\"light\">\n <IconPlaceholder\n lucide=\"SunIcon\"\n tabler=\"IconSun\"\n hugeicons=\"SunIcon\"\n phosphor=\"SunIcon\"\n remixicon=\"RiSunLine\"\n />\n Light\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"dark\">\n <IconPlaceholder\n lucide=\"MoonIcon\"\n tabler=\"IconMoon\"\n hugeicons=\"MoonIcon\"\n phosphor=\"MoonIcon\"\n remixicon=\"RiMoonLine\"\n />\n Dark\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"system\">\n <IconPlaceholder\n lucide=\"MonitorIcon\"\n tabler=\"IconDeviceDesktop\"\n hugeicons=\"ComputerIcon\"\n phosphor=\"MonitorIcon\"\n remixicon=\"RiComputerLine\"\n />\n System\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel>Account</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n Profile\n <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n Settings\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"KeyboardIcon\"\n tabler=\"IconKeyboard\"\n hugeicons=\"KeyboardIcon\"\n phosphor=\"KeyboardIcon\"\n remixicon=\"RiKeyboardLine\"\n />\n Keyboard Shortcuts\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LanguagesIcon\"\n tabler=\"IconLanguage\"\n hugeicons=\"LanguageCircleIcon\"\n phosphor=\"TranslateIcon\"\n remixicon=\"RiTranslate\"\n />\n Language\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n Notifications\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>\n Notification Types\n </DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={notifications.push}\n onCheckedChange={(checked) =>\n setNotifications({\n ...notifications,\n push: checked === true,\n })\n }\n >\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n Push Notifications\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.email}\n onCheckedChange={(checked) =>\n setNotifications({\n ...notifications,\n email: checked === true,\n })\n }\n >\n <IconPlaceholder\n lucide=\"MailIcon\"\n tabler=\"IconMail\"\n hugeicons=\"MailIcon\"\n phosphor=\"EnvelopeIcon\"\n remixicon=\"RiMailLine\"\n />\n Email Notifications\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShieldIcon\"\n tabler=\"IconShield\"\n hugeicons=\"ShieldIcon\"\n phosphor=\"ShieldIcon\"\n remixicon=\"RiShieldLine\"\n />\n Privacy & Security\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"HelpCircleIcon\"\n tabler=\"IconHelpCircle\"\n hugeicons=\"HelpCircleIcon\"\n phosphor=\"QuestionIcon\"\n remixicon=\"RiQuestionLine\"\n />\n Help & Support\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileTextIcon\"\n tabler=\"IconFileText\"\n hugeicons=\"File01Icon\"\n phosphor=\"FileTextIcon\"\n remixicon=\"RiFileTextLine\"\n />\n Documentation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n remixicon=\"RiLogoutBoxLine\"\n />\n Sign Out\n <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n",
"type": "registry:example"
}
],
"type": "registry:example"
}Source
Frequently Asked Questions
What does dropdown-menu-example.json do?
dropdown-menu-example.json is a source file in the ui codebase, written in json.
Where is dropdown-menu-example.json in the architecture?
dropdown-menu-example.json is located at apps/v4/public/r/styles/base-mira/dropdown-menu-example.json (directory: apps/v4/public/r/styles/base-mira).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free