# Menus

> Add native dropdown and context menus from serializable item trees.

Canonical: https://natui.dev/docs/components/menus

## Menu [#menu]

Renders a dropdown-menu button. Children form its label and `items` defines the native menu tree.

### MenuProps

A dropdown-menu button; children form the button label.

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | No |  |
| `items` | `MenuItemSpec[]` | Yes |  |
| `systemImage` | `string \| undefined` | No |  |
| `onSelect` | `((id: string) => void) \| undefined` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<Menu
  systemImage="square.and.arrow.up"
  items={[
    { id: 'png', label: 'PNG' },
    { id: 'csv', label: 'CSV' },
    { divider: true },
    { id: 'delete', label: 'Delete', role: 'destructive' },
  ]}
  onSelect={exportAs}
>
  Export
</Menu>
```

## ContextMenu [#contextmenu]

Wraps its children as a right-click target.

### ContextMenuProps

Wraps its children as the right-click (context menu) target.

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `items` | `MenuItemSpec[]` | Yes |  |
| `onSelect` | `((id: string) => void) \| undefined` | No |  |
| `children` | `ReactNode` | No |  |
| `padding` | `number \| EdgeInsets \| undefined` | No |  |
| `background` | `string \| undefined` | No |  |
| `cornerRadius` | `number \| undefined` | No |  |
| `frame` | `Frame \| undefined` | No |  |
| `opacity` | `number \| undefined` | No |  |
| `disabled` | `boolean \| undefined` | No |  |
| `hidden` | `boolean \| undefined` | No |  |
| `color` | `string \| undefined` | No | Foreground color. |
| `help` | `string \| undefined` | No | Tooltip. |
| `tag` | `string \| undefined` | No | Stable row identity for selectable containers (List/Table selection). A selectable List reports and receives selection as its rows' tags. |
| `badge` | `string \| number \| undefined` | No | Badge shown on Tab items and List rows (counts, short strings). |
| `accessibilityLabel` | `string \| undefined` | No | Assistive-tech label (VoiceOver / Narrator). |
| `accessibilityHint` | `string \| undefined` | No | Assistive-tech hint describing the result of activating the element. |
| `accessibilityIdentifier` | `string \| undefined` | No | Stable identifier for UI automation (AX identifier / AutomationId). |
| `key` | `string \| number \| undefined` | No |  |

```tsx
<ContextMenu
  items={[
    { id: 'duplicate', label: 'Duplicate' },
    { id: 'delete', label: 'Delete', role: 'destructive' },
  ]}
  onSelect={handleRowAction}
>
  <Text>Selected row</Text>
</ContextMenu>
```

## Item trees [#item-trees]

Action items support `id`, `label`, `systemImage`, `role`, `shortcut`, `disabled`, `checked`, and nested `children`. A divider is `{ divider: true }`.

Selection events fire only for enabled leaf actions. Checkmarks are prop-driven, so update the source data after selection. Command roles do not emit a selection event. Most invoke a platform command, while the Windows `about` role is currently inert.

On Windows, element children inside a `Menu` label are ignored. Use text children or `systemImage`.