---
title: Menu
description: >-
  A compound menu component for contextual actions, with items, separators,
  radio groups, and nested submenus.
---

# Menu

## Overview

Menus reveal a short list of contextual actions, such as editing an item. They help users make a single selection without leaving the current context.

```tsx
<Menu.Root>
	<Menu.Trigger render={<Button label="Open" priority="primary" />} />
	<Menu.Content>
		<Menu.Item>Cut</Menu.Item>
		<Menu.Item>Copy</Menu.Item>
		<Menu.Item>Paste</Menu.Item>
		<Menu.Separator />
		<Menu.Item>Find</Menu.Item>
		<Menu.Submenu>
			<Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>
			<Menu.SubmenuContent>
				<Menu.Item>Editor</Menu.Item>
				<Menu.Item>Messages</Menu.Item>
				<Menu.Item>Notes</Menu.Item>
				<Menu.Item>Reminders</Menu.Item>
			</Menu.SubmenuContent>
		</Menu.Submenu>
		<Menu.Separator />
		<Menu.Item tone="danger">Delete</Menu.Item>
	</Menu.Content>
</Menu.Root>
```

## API Reference

### `Menu.Root`

Provides menu state and context for all nested menu parts.

| Prop           | Type                      | Default     |
| -------------- | ------------------------- | ----------- |
| `children`     | `ReactNode`               | `undefined` |
| `open`         | `boolean`                 | `undefined` |
| `defaultOpen`  | `boolean`                 | `undefined` |
| `onOpenChange` | `(open: boolean) => void` | `undefined` |

### `Menu.Trigger`

Interactive trigger element that opens the menu.

| Prop       | Type           | Default     |
| ---------- | -------------- | ----------- |
| `render`   | `ReactElement` | `undefined` |
| `children` | `ReactNode`    | `undefined` |
| `disabled` | `boolean`      | `false`     |

### `Menu.Content`

Portal-rendered popup container for menu items and sections.

| Prop       | Type        | Default     |
| ---------- | ----------- | ----------- |
| `children` | `ReactNode` | `undefined` |

### `Menu.Item`

Selectable action item inside a menu.

| Prop       | Type         | Default     |
| ---------- | ------------ | ----------- |
| `children` | `ReactNode`  | `undefined` |
| `tone`     | `"danger"`   | `undefined` |
| `disabled` | `boolean`    | `false`     |
| `onSelect` | `() => void` | `undefined` |

### `Menu.Separator`

Visual divider used to separate groups of related menu items.

| Prop          | Type                         | Default        |
| ------------- | ---------------------------- | -------------- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |

### `Menu.RadioGroup`

Manages a single selected value across nested radio items.

| Prop            | Type                      | Default     |
| --------------- | ------------------------- | ----------- |
| `value`         | `string`                  | `undefined` |
| `defaultValue`  | `string`                  | `undefined` |
| `onValueChange` | `(value: string) => void` | `undefined` |
| `children`      | `ReactNode`               | `undefined` |

### `Menu.RadioItem`

Radio-style menu item that participates in `Menu.RadioGroup`.

| Prop       | Type        | Default     |
| ---------- | ----------- | ----------- |
| `value`    | `string`    | `undefined` |
| `children` | `ReactNode` | `undefined` |
| `disabled` | `boolean`   | `false`     |

### `Menu.Submenu`

Creates a nested menu scope under a parent menu.

| Prop           | Type                      | Default     |
| -------------- | ------------------------- | ----------- |
| `children`     | `ReactNode`               | `undefined` |
| `open`         | `boolean`                 | `undefined` |
| `defaultOpen`  | `boolean`                 | `undefined` |
| `onOpenChange` | `(open: boolean) => void` | `undefined` |

### `Menu.SubmenuTrigger`

Trigger row that opens a submenu from within a menu.

| Prop       | Type        | Default     |
| ---------- | ----------- | ----------- |
| `children` | `ReactNode` | `undefined` |
| `disabled` | `boolean`   | `false`     |

### `Menu.SubmenuContent`

Popup container for submenu items.

| Prop       | Type        | Default     |
| ---------- | ----------- | ----------- |
| `children` | `ReactNode` | `undefined` |

## Examples

### Sections

Menu items can be separated from each other by using `<Menu.Separator />`. Separating destructive or less-frequent actions helps reduce accidental clicks and adds a subtle layer of safety.

```tsx
<Menu.Root>
	<Menu.Trigger render={<Button priority="primary" icon={<MoreVerticalIcon />} aria-label="Open menu" />} />
	<Menu.Content>
		<Menu.Item>Duplicate</Menu.Item>
		<Menu.Item>Archive</Menu.Item>
		<Menu.Separator />
		<Menu.Item tone="danger">Delete</Menu.Item>
	</Menu.Content>
</Menu.Root>
```