Skip to content

Also available as Markdown

Action

Menu

Action menu namespace — compound Trigger/Popup/Item parts plus FromSections, ContextMenu, and Overflow presets.

React source Core source

Menu

Action menu namespace. Menu is Root for compound menus; use Menu.FromSections, Menu.ContextMenu, or Menu.Overflow for common presets. The trigger child must forward DOM props — there is no render prop.

State attributes, positioner CSS variables, and onOpenChange details are documented in Overlay lifecycle.

Examples

Compound parts

Compose Menu.Trigger, Menu.Popup, Menu.Item, Menu.Section, and Menu.Separator.
Demo.tsxtsx
import { Button, Menu } from '@var-ui/react';

<Menu>
  <Menu.Trigger>
    <Button intent="secondary">Song</Button>
  </Menu.Trigger>
  <Menu.Popup>
    <Menu.Item id="lib" onAction={() => {}}>Add to Library</Menu.Item>
    <Menu.Separator />
    <Menu.Section title="Danger">
      <Menu.Item id="delete" onAction={() => {}}>Delete</Menu.Item>
    </Menu.Section>
  </Menu.Popup>
</Menu>

From sections

Pass a trigger and sections of items (optional section labels, shortcuts, danger, disabled).

Demo.tsxtsx
import { Button, Menu } from '@var-ui/react';

<Menu.FromSections
  trigger={<Button>Actions</Button>}
  sections={[{ items: [{ id: 'edit', label: 'Edit' }] }]}
/>
Demo.tsxtsx
import { Button, Menu } from '@var-ui/react';

<Menu.FromSections
  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 },
      ],
    },
  ]}
/>

Context menu

Wrap a surface and pass sections. Right-click (or the platform context-menu gesture) opens the menu at the pointer. The child must be a DOM element Pressable can attach a ref to (e.g. a div).

Right-click me
Demo.tsxtsx
import { Menu } from '@var-ui/react';

<Menu.ContextMenu sections={[{ items: [{ id: 'copy', label: 'Copy' }] }]}>
  <div>Right-click me</div>
</Menu.ContextMenu>
Project card — right-click for actions
Demo.tsxtsx
import { Menu } from '@var-ui/react';

<Menu.ContextMenu
  sections={[
    {
      label: 'Edit',
      items: [
        { id: 'rename', label: 'Rename' },
        { id: 'duplicate', label: 'Duplicate' },
      ],
    },
    {
      label: 'Clipboard',
      items: [
        { id: 'copy', label: 'Copy' },
        { id: 'paste', label: 'Paste' },
        { id: 'delete', label: 'Delete', danger: true },
      ],
    },
  ]}
>
  <div>Project card — right-click for actions</div>
</Menu.ContextMenu>

Overflow

Icon-only overflow menu using the moreHorizontal glyph — same sections shape as other presets.

Demo.tsxtsx
import { Menu } from '@var-ui/react';

<Menu.Overflow sections={[{ items: [{ id: 'edit', label: 'Edit' }] }]} />
Demo.tsxtsx
import { Menu } from '@var-ui/react';

<Menu.Overflow
  aria-label="Row actions"
  sections={[
    {
      items: [
        { id: 'share', label: 'Share' },
        { id: 'duplicate', label: 'Duplicate' },
        { id: 'archive', label: 'Archive' },
        { id: 'delete', label: 'Delete', danger: true },
      ],
    },
  ]}
/>

Props

Accessibility

Built on React Aria MenuTrigger / Menu. Arrow keys move between items, Enter/Space activates, Escape closes. Give destructive items clear labels — visual tone is not enough. For Menu.ContextMenu, ensure essential actions are also available without right-click for keyboard-only users.