<Menu>
<Button>Open Menu</Button>
<Popover>
<MenuContent>
<MenuItem>Edit</MenuItem>
<MenuItem>Duplicate</MenuItem>
<MenuItem>Archive</MenuItem>
<MenuItem>Delete</MenuItem>
</MenuContent>
</Popover>
</Menu>Installation
npx shadcn@latest add @dotui/menuUsage
Use menus to display a list of actions or options that a user can choose from.
import { Button } from '@/ui/button'
import { Menu, MenuContent, MenuItem } from '@/ui/menu'
import { Popover } from '@/ui/popover'<Menu>
<Button>Open Menu</Button>
<Popover>
<MenuContent>
<MenuItem>Edit</MenuItem>
<MenuItem>Duplicate</MenuItem>
<MenuItem>Delete</MenuItem>
</MenuContent>
</Popover>
</Menu>Anatomy
A Menu links a trigger (Button) to an overlay (Popover) that wraps the MenuContent. Each MenuItem auto-wraps string children in a MenuItemLabel; add a MenuItemDescription for secondary text, group items with MenuSection + MenuSectionHeader, and nest a submenu with MenuSub.
import { Button } from '@/ui/button'
import {
Menu,
MenuContent,
MenuItem,
MenuItemLabel,
MenuItemDescription,
MenuSection,
MenuSectionHeader,
MenuSub,
} from '@/ui/menu'
import { Popover } from '@/ui/popover'
;<Menu>
<Button>Open Menu</Button>
<Popover>
<MenuContent>
<MenuItem>
<MenuItemLabel>Label</MenuItemLabel>
<MenuItemDescription>Description</MenuItemDescription>
</MenuItem>
<MenuSection>
<MenuSectionHeader>Section</MenuSectionHeader>
<MenuItem>Item</MenuItem>
</MenuSection>
<MenuSub>
<MenuItem>Submenu</MenuItem>
<Popover>
<MenuContent>
<MenuItem>Nested item</MenuItem>
</MenuContent>
</Popover>
</MenuSub>
</MenuContent>
</Popover>
</Menu>Triggers
Menus open on press by default. Set trigger="longPress" when press is reserved for a primary action — the menu then opens on long press (or Alt + ▼):
<Menu trigger="longPress">
<Button onPress={crop}>Crop</Button>
<Popover>{/* ... */}</Popover>
</Menu>Set trigger="contextMenu" to open the menu at the pointer on right click, long press on touch, or OS keyboard shortcuts. The trigger doesn't have to be a Button — wrap any focusable element in React Aria's Pressable.
<Menu trigger="contextMenu">
<Pressable>
<div
role="button"
tabIndex={0}
className="bg-bg-muted flex h-32 w-64 items-center justify-center rounded-md border border-dashed text-sm text-fg-muted"
>
Right click me
</div>
</Pressable>
<Popover>
<MenuContent>
<MenuItem>Account settings</MenuItem>
<MenuItem>Create team</MenuItem>
<MenuItem>Command menu</MenuItem>
<MenuItem>Log out</MenuItem>
</MenuContent>
</Popover>
</Menu>import { Pressable } from 'react-aria-components'
;<Menu trigger="contextMenu">
<Pressable>
<div role="button" tabIndex={0}>
Right click me
</div>
</Pressable>
<Popover>{/* ... */}</Popover>
</Menu>Selection
Set selectionMode to single or multiple on MenuContent to turn items into checkbox or radio items. Control the selection with selectedKeys/onSelectionChange (or defaultSelectedKeys), and disable specific items with disabledKeys.
<MenuContent selectionMode="single" disabledKeys={['right']}>
<MenuItem id="top">Top</MenuItem>
<MenuItem id="bottom">Bottom</MenuItem>
<MenuItem id="right">Right</MenuItem>
</MenuContent>Links
Pass href to a MenuItem to render it as an <a>; add target for the link target. Client-side routing depends on your router setup.
<MenuItem href="https://twitter.com/mehdibha" target="_blank">
X
</MenuItem>Examples
Basic Menu
Account Dropdown
Menu with Actions
Menu with Icons
Social Links Menu
Notification Preferences
Payment Method Selector
Complex Menu
Menu in Drawer
Menu in Modal
Menu in Dialog
API Reference
Menu
A menu displays a list of actions or options that a user can choose. It wraps a trigger element and the menu, linking the menu's open state with the trigger's press state.
| Prop | Type | Default | |
|---|---|---|---|
MenuTriggerType | 'press' | ||
MenuContent
A menu displays a list of actions or options that a user can choose.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Iterable<T> | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
"clearSelection" | "none" | 'clearSelection' | ||
MenuItem
A MenuItem represents an individual action in a Menu.
| Prop | Type | Default | |
|---|---|---|---|
union | 'default' | ||
ReactNode | function | — | ||
Key | — | ||
boolean | — | ||
string | — | ||
T | — | ||
MenuItemLabel
A MenuItemLabel represents the primary text content of a MenuItem.
| Prop | Type | Default | |
|---|---|---|---|
MenuItemDescription
A MenuItemDescription represents secondary text content within a MenuItem.
| Prop | Type | Default | |
|---|---|---|---|
MenuSection
A MenuSection represents a section within a Menu.
| Prop | Type | Default | |
|---|---|---|---|
Key | — | ||
T | — | ||
union | — | ||
Iterable<T> | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
boolean | — | ||
MenuSectionHeader
A MenuSectionHeader represents the header of a MenuSection, usually containing the section title.
| Prop | Type | Default | |
|---|---|---|---|
MenuSub
A submenu trigger is used to wrap a submenu's trigger item and the submenu itself.
| Prop | Type | Default | |
|---|---|---|---|
union | — | ||
number | 200 |
Last updated on 7/31/2026