DropdownMenu

A menu of actions triggered by a button click. Composable sub-components for maximum flexibility.

Use cases

Action menus on cards, rows, or toolbars (edit, duplicate, delete).
Navigation overflow when space is limited and secondary links must collapse.
Profile menus with account actions (settings, billing, log out).

When NOT to use

For selecting a value from a list of options — use Select.
For toggling a single boolean — use Switch or Toggle.
For critical confirmations — use AlertDialog.

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
} from '@mihcm/ui/DropdownMenu';

Basic usage

const [open, setOpen] = useState(false);
 
<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger>Options</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={() => console.log('edit')}>Edit</DropdownMenuItem>
    <DropdownMenuItem onClick={() => console.log('duplicate')}>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive" onClick={() => console.log('delete')}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With groups and labels

<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Edit</DropdownMenuLabel>
      <DropdownMenuItem onClick={handleCut}>Cut</DropdownMenuItem>
      <DropdownMenuItem onClick={handleCopy}>Copy</DropdownMenuItem>
      <DropdownMenuItem onClick={handlePaste}>Paste</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>View</DropdownMenuLabel>
      <DropdownMenuItem onClick={handleZoomIn}>Zoom in</DropdownMenuItem>
      <DropdownMenuItem onClick={handleZoomOut}>Zoom out</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

With keyboard shortcuts

<DropdownMenuItem onClick={handleSave}>
  Save
  <DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
</DropdownMenuItem>

Composition

Group related items with DropdownMenuGroup and label each group with DropdownMenuLabel.
Use DropdownMenuSeparator between groups for visual separation.
DropdownMenuCheckboxItem and DropdownMenuRadioItem handle toggle/select patterns within the menu.
For nested options, use DropdownMenuSub with DropdownMenuSubTrigger and DropdownMenuSubContent.

ContextMenu — right-click triggered menu with the same item API.
Menubar — horizontal menu bar for desktop app-style interfaces.
Select — for form fields where only one option is selected.
Command — searchable command palette.