overlay · Normal DOM only

DropdownMenu

Click-triggered menu of actions — items, checkbox items, separators, labels, sub-menus.

Use DropdownMenu for a list of click-to-trigger actions anchored to a button. Items can be plain (Edit / Copy), checkable (Pin to top), or open nested sub-menus. For right-click context use ContextMenu.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuSub } from '@8maverik8/twenty-design';

Examples

Full menu

tsx
<DropdownMenu trigger={…}>… <DropdownMenuItem … /> …</DropdownMenu>

Guidelines

✓

Group related items with DropdownMenuLabel + DropdownMenuSeparator.Long flat menus force users to read every line; sections let them scan to the relevant group.

✓

Use shortcut on common actions.Power users learn shortcuts from the menu; new users discover them.

Hide destructive actions in a sub-menu.Sub-menus are exploratory — keep "Delete" at the top level with destructive styling so users see it clearly.