Docs Components Blocks Themes Sponsor Showcase

Prologue

Getting Started

Dark Mode

Buttons

Collections

Colors

Controls

Date And Time

Drag And Drop

Drop Zone

Forms

Layouts

Media

Navigation

Overlays

Pickers

Statuses

Surfaces

Visualizations

Menu

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/menu

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

dropdown popover

Manual installation

Install the dependencies, then copy the component source into your project.

npm

pnpm

yarn

bun

npm install react-aria-components @heroicons/react cn tailwind-variants

Anatomy

import { Menu, MenuItem, MenuTrigger } from '@/components/ui/menu'
import { Button } from '@/components/ui/button'

<MenuTrigger>
  <Button>Open</Button>
  <Menu>
    <MenuItem>Inbox</MenuItem>
    <MenuItem>Sent</MenuItem>
    <MenuItem>New Message</MenuItem>
  </Menu>
</MenuTrigger>

Examples

Links

To use MenuItem with your router’s link component, see Client Side Routing.

Menu can be nested to display submenus.

Danger

Designate a menu item as dangerous.

With icon

Enhance menu items by adding icons.

Dynamic

Generate menu items dynamically.

Asynchronous loading

Load more menu items as the user scrolls using MenuLoadMoreItem.

Multiple

Display a selection of actions or options.

Present a single list of options.

Organize menu items into grouped sections.

Section-level selection

Organize menu items into grouped sections with level selection.

Arrow

Incorporate an arrow into the menu using the arrow from popover in the Menu component.

Disabled

Disable specific menu items.

Also, you can disable items directly in Menu by using the disabledKeys prop.

<Menu disabledKeys={['gsu']} />

Use MenuLabel to align item text when some items have icons and others do not. It is optional for items without additional content.

Description

You can add details to menu items by using the MenuDescription component.

Open dialog

Trigger a dialog from a menu item. Refer to the dialog demo for further information.

Set trigger="contextMenu" on MenuTrigger to open a menu on right click or long press. Wrap the target in Pressable from react-aria-components.

See Context Menu for more examples.

Component API

MenuTrigger

trigger"press" | "longPress" | "contextMenu"

Default: "press"

MenuTrigger extends the React Aria Components <MenuTrigger> component.

Menu extends the React Aria Components <Menu> component.

classNamestring

popover

Pick< PopoverProps, | "arrow" | "className" | "placement" | "offset" | "crossOffset" | "arrowBoundaryOffset" | "triggerRef" | "isOpen" | "onOpenChange" | "shouldFlip" >

MenuSubMenu

MenuSubMenu extends the React Aria Components <SubmenuTrigger> component.

delaynumber

Default: 0

MenuHeader

MenuHeader extends the React Aria Components <Header> component.

classNamestring

separatorboolean

Default: false

MenuItem

MenuItem extends the React Aria Components <MenuItem> component.

classNamestring

intent"danger" | "warning"

MenuLoadMoreItem

MenuLoadMoreItem extends the React Aria Components <MenuLoadMoreItem> component and loads additional items when the scroll sentinel becomes visible.

classNamestring

isLoadingboolean

onLoadMore() => void

MenuLabel

MenuLabel extends the Intent UI <DropdownLabel> component.

classNamestring

MenuDescription

MenuDescription extends the Intent UI <DropdownDescription> component.

classNamestring

MenuSection

MenuSection extends the React Aria Components <MenuSection> component.

classNamestring

labelstring

MenuSeparator

MenuSeparator extends the Intent UI <DropdownSeparator> component.

classNamestring

MenuShortcut

MenuShortcut extends the Intent UI <DropdownKeyboard> component.

classNamestring

See the React Aria for the full API reference.

Design

Design