<Menu>
  <Menu.Trigger>
    <Button variant="outline">Actions</Button>
  </Menu.Trigger>
  <Menu.Content>
    <Menu.Item onSelect={rename}>Rename</Menu.Item>
    <Menu.Item disabled>Move</Menu.Item>
    <Menu.Separator />
    <Menu.Item color="danger" onSelect={remove}>Delete</Menu.Item>
  </Menu.Content>
</Menu>

For choosing a value, use Select instead: a menu is for actions (role="menu"), a select for values (role="listbox").

Keyboard

Key	Action
`Enter` `Space` `↓` on the trigger	opens the menu and focuses the first item
`↑` `↓`	moves between items, skipping disabled ones
typing	jumps to a matching item
`Enter` `Space`	runs the item and closes the menu
`Esc`	closes; focus returns to the trigger

Props

Prop	Type	Default	Description
`children`	`ReactNode`		`Menu.Trigger` and `Menu.Content`.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called when the menu opens or closes.
`open`	`boolean`		Controlled open state.
`placement`	`Placement`	`'bottom-start'`	Preferred side. Flips when there isn't room.
`size`	`Size`config	`config.defaults.size`	Item size, from the `sizes` config.

Menu.Item

Prop	Type	Description
`color`	`Color`config	Semantic color for the item, e.g. a destructive action. From the `colors` config.
`onSelect`	`() => void`	Called when the item is chosen by click, Enter or Space. The menu closes afterwards.
`textValue`	`string`	Text used for type-to-select. Defaults to `children` when it is a string.