<Menu>
<Button isIconOnly>
<MenuIcon />
</Button>
<Popover>
<MenuContent>
<MenuItem>Account settings</MenuItem>
<MenuItem>Create team</MenuItem>
<MenuItem>Command menu</MenuItem>
<MenuItem>Log out</MenuItem>
</MenuContent>
</Popover>
</Menu>npx shadcn@latest add @dotui/menuUse menus to display a list of actions or options that a user can choose from.
import { Button } from "@/components/ui/button";
import { Menu, MenuContent, MenuItem } from "@/components/ui/menu";
import { Popover } from "@/components/ui/popover";<Menu>
<Button>Open Menu</Button>
<Popover>
<MenuContent>
<MenuItem>Edit</MenuItem>
<MenuItem>Duplicate</MenuItem>
<MenuItem>Delete</MenuItem>
</MenuContent>
</Popover>
</Menu>Use the controls below to experiment with different menu props and see the live preview and code update.
<Menu>
<Button>Open Menu</Button>
<Popover placement="bottom">
<MenuContent>
<MenuItem>Edit</MenuItem>
<MenuItem>Duplicate</MenuItem>
<MenuItem>Archive</MenuItem>
<MenuItem>Delete</MenuItem>
</MenuContent>
</Popover>
</Menu>state: closed
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
MenuTriggerType | 'press' | ||
A menu displays a list of actions or options that a user can choose.
| Prop | Type | Default | |
|---|---|---|---|
DOMRenderFunction<"div", MenuRenderProps> | — | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
"clearSelection" | "none" | 'clearSelection' | ||
A MenuItem represents an individual action in a Menu.
| Prop | Type | Default | |
|---|---|---|---|
union | 'default' | ||
ReactNode | function | — | ||
Key | — | ||
boolean | — | ||
union | — | ||
string | — | ||
T | — | ||
Last updated on 5/22/2026