Skip to content
Action

Menu

Compound action menu with Trigger, Popup, Item, Section, and Separator parts.

React source Core source

Menu

Compound action menu. Menu is Root; compose Menu.Trigger, Menu.Popup, Menu.Item, Menu.Section, and Menu.Separator. The trigger child must forward DOM props — there is no render prop. For the data preset (sections of items), keep using DropdownMenu.

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

Examples

Default
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>

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.