Menu

A menu displays a list of actions or options that a user can choose.

On this page

Props

placement

<Menu>
  <Button>Open Menu</Button>
  <Popover>
    <MenuContent>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Duplicate</MenuItem>
      <MenuItem>Archive</MenuItem>
      <MenuItem>Delete</MenuItem>
    </MenuContent>
  </Popover>
</Menu>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/menu

Usage

Use 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>

Examples

Placement

state: closed

API Reference

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 6/16/2026