DropdownMenu

Action menu opened from a trigger button. Pass sections of items (optional section labels, shortcuts, danger, disabled). The same MenuContent primitive powers ContextMenu and MoreMenu.

Examples

Default

Provide a trigger element (usually a Button) and a flat list of items in one section.

import { Button, DropdownMenu } from '@var-ui/react';

<DropdownMenu
  trigger={<Button>Actions</Button>}
  sections={[{ items: [{ id: 'edit', label: 'Edit' }] }]}
/>

Sections and destructive items

Use multiple sections with optional labels. Set danger on destructive actions and shortcut for keyboard hints.

import { Button, DropdownMenu } from '@var-ui/react';

<DropdownMenu
  trigger={<Button intent="secondary">File</Button>}
  sections={[
    {
      label: 'Edit',
      items: [
        { id: 'cut', label: 'Cut', shortcut: '⌘X' },
        { id: 'copy', label: 'Copy', shortcut: '⌘C' },
        { id: 'paste', label: 'Paste', shortcut: '⌘V' },
      ],
    },
    {
      label: 'Danger zone',
      items: [
        { id: 'archive', label: 'Archive' },
        { id: 'delete', label: 'Delete…', danger: true },
      ],
    },
  ]}
/>

Props

Accessibility

Built on React Aria MenuTrigger / Menu. The trigger receives focus; arrow keys move between items, Enter/Space activates, Escape closes. Give destructive items clear labels (“Delete…”) — danger is visual only. Disabled items stay in the list but are not activatable.