dotUI

Menu

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

Docs
<Menu>
  <Button>
    <MenuIcon />
  </Button>
  <Popover>
    <MenuContent>
      <MenuItem>Account settings</MenuItem>
      <MenuItem>Create team</MenuItem>
      <MenuItem>Command menu</MenuItem>
      <MenuItem>Log out</MenuItem>
    </MenuContent>
  </Popover>
</Menu>

Installation

pnpm dlx 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>

Playground

Use the controls below to experiment with different menu props and see the live preview and code update.

placement

API Reference

Menu

Missing description.

PropType
MenuTriggerType

MenuContent

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

PropType
ReactNode | function
Iterable<T>
ReactNode | function
readonly any[]
SelectionMode
Iterable<Key> | "all"
Iterable<Key> | "all"
function
Iterable<Key>
boolean
boolean
"none" | "clearSelection"

MenuItem

A MenuItem represents an individual action in a Menu.

PropType
union
Key
T
string
boolean
ReactNode | function

On this page

On this page

Last updated on 12/21/2025

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.