Skip to Content
ComponentsDropdown menu

Dropdown menu

Radix Dropdown Menu primitives for menus, nested submenus, and searchable lists. Powers SumXEditorVariablePicker in @sumx/sumx-editor.

Interactive demo

Default menu

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>...</DropdownMenuContent>
</DropdownMenu>

With search (variable-picker pattern)

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuShortcut,
} from '@sumx/ui';

Basic menu

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuLabel>Section</DropdownMenuLabel>
    <DropdownMenuItem onSelect={() => doAction()}>
      Run action
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Nested submenu

<DropdownMenuSub>
  <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <DropdownMenuItem>Child item</DropdownMenuItem>
  </DropdownMenuSubContent>
</DropdownMenuSub>

Controlled open state

const [open, setOpen] = useState(false);
 
<DropdownMenu open={open} onOpenChange={setOpen}>
  ...
</DropdownMenu>

Styling tokens

Content uses portal-aligned surfaces:

  • border-gray-gray on primary content panel
  • Items: hover:bg-primary/20, focus matching
  • High z-index (z-[99991]) for ERP stacking contexts

Variable picker example

See SumX Editor configuration — merge fields. The editor composes DropdownMenu + Input for search.

SliderPermissions