Menu

import { Menu, MenuTrigger, MenuContent, MenuItem } from '@dashforge/tw';

<Menu>
  <MenuTrigger><Button>Actions ▾</Button></MenuTrigger>
  <MenuContent>
    <MenuItem onClick={onEdit}>Edit</MenuItem>
    <MenuItem onClick={onDuplicate}>Duplicate</MenuItem>
    <MenuItem color="danger" onClick={onDelete}>Delete</MenuItem>
  </MenuContent>
</Menu>

<Menu>
  <MenuTrigger><Button variant="ghost">User ▾</Button></MenuTrigger>
  <MenuContent>
    <MenuLabel>Account</MenuLabel>
    <MenuItem onClick={onProfile} icon={<User />}>Profile</MenuItem>
    <MenuItem onClick={onSettings} icon={<Settings />}>Settings</MenuItem>
    <MenuSeparator />
    <MenuItem onClick={onSignOut} icon={<LogOut />} color="danger">Sign out</MenuItem>
  </MenuContent>
</Menu>

<Menu>
  <MenuTrigger asChild>
    <IconButton aria-label="More options" variant="ghost">
      <MoreVertical />
    </IconButton>
  </MenuTrigger>
  <MenuContent>
    <MenuItem onClick={onEdit}>Edit</MenuItem>
    <MenuItem onClick={onArchive}>Archive</MenuItem>
  </MenuContent>
</Menu>

{/* With leading icon */}
<MenuItem icon={<Pencil />} onClick={onEdit}>Edit</MenuItem>

{/* With trailing endIcon (keyboard shortcut, badge, etc.) */}
<MenuItem onClick={onSave} endIcon={<kbd className="text-xs">⌘S</kbd>}>Save</MenuItem>

{/* Disabled */}
<MenuItem disabled icon={<Lock />}>Locked</MenuItem>

{/* Selected — toggles aria-checked */}
<MenuItem selected={view === 'grid'} onClick={() => setView('grid')}>
  Grid view
</MenuItem>

{/* Danger styling (destructive action) */}
<MenuItem color="danger" icon={<Trash2 />} onClick={onDelete}>
  Delete
</MenuItem>

function UserActionsMenu() {
  const { data, isLoading } = useActions();
  return (
    <Menu>
      <MenuTrigger asChild>
        <IconButton aria-label="Actions"><MoreVertical /></IconButton>
      </MenuTrigger>
      <MenuContent>
        {isLoading ? (
          <MenuSkeleton count={3} withHeading />
        ) : (
          data.map((a) => (
            <MenuItem key={a.id} icon={a.icon} onClick={() => a.run()}>
              {a.label}
            </MenuItem>
          ))
        )}
      </MenuContent>
    </Menu>
  );
}

<MenuContent>
  <MenuItem onClick={onEdit}>Edit</MenuItem>
  <MenuItem onClick={onArchive}>Archive</MenuItem>
  <MenuSeparator />
  <MenuItem
    color="danger"
    onClick={onDelete}
    access={{ requires: 'workspace.delete', when: 'denied:hide' }}
  >
    Delete workspace
  </MenuItem>
</MenuContent>

function MyMenu() {
  const [open, setOpen] = useState(false);
  return (
    <Menu open={open} onOpenChange={setOpen}>
      <MenuTrigger asChild><Button>Toggle</Button></MenuTrigger>
      <MenuContent>...</MenuContent>
    </Menu>
  );
}