DropdownMenu — Design System

Default

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
} from '@mihcm/ui/DropdownMenu';
 
const [open, setOpen] = useState(false);
 
<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger>Options</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={() => console.log('profile')}>Profile</DropdownMenuItem>
    <DropdownMenuItem onClick={() => console.log('settings')}>Settings</DropdownMenuItem>
    <DropdownMenuItem onClick={() => console.log('billing')}>Billing</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With groups and separators

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator,
} from '@mihcm/ui/DropdownMenu';
 
<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Edit</DropdownMenuLabel>
      <DropdownMenuItem onClick={handleCut}>Cut</DropdownMenuItem>
      <DropdownMenuItem onClick={handleCopy}>Copy</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>View</DropdownMenuLabel>
      <DropdownMenuItem onClick={handleZoomIn}>Zoom in</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

With keyboard shortcuts

import { DropdownMenuShortcut } from '@mihcm/ui/DropdownMenu';
 
<DropdownMenuItem onClick={handleSave}>
  Save
  <DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
</DropdownMenuItem>

Destructive items

<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger>More</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={handleEdit}>Edit</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive" onClick={handleDelete}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Disabled items

<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger>Options</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={handleEdit}>Edit</DropdownMenuItem>
    <DropdownMenuItem disabled>Archive (unavailable)</DropdownMenuItem>
    <DropdownMenuItem onClick={handleDuplicate}>Duplicate</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>