Collections

Menu

A collapsible menu that reveals actions or navigation options when triggered, not a form input like a select, and designed for quick, contextual choices.

Menu
List BoxTable

Basic

A menu presents a variety of actions or options from which you can choose.

Installation

Install the component via the CLI in one command.

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

dropdownpopover

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react

Anatomy

import {
  IconCommandRegular,
  HomeIcon,
  IconDeviceDesktop,
  IconLogout,
  MoonIcon,
  IconSettings,
  SunIcon,
} from "@heroicons/react"
import {
  Menu,
  MenuContent,
  MenuHeader,
  MenuItem,
  MenuLabel,
  MenuSection,
  MenuSeparator,
  MenuSubMenu,
  MenuTrigger,
} from "@/components/ui/menu"
<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuContent popover={{ placement: "bottom" }} className="min-w-52">
    <MenuHeader separator>
      <span className="block">Kurt Cobain</span>
      <span className="font-normal text-muted-fg">@cobain</span>
    </MenuHeader>

    <MenuSection>
      <MenuItem href="#dashboard">
        <HomeIcon />
        <MenuLabel>Dashboard</MenuLabel>
      </MenuItem>
      <MenuItem href="#settings">
        <IconSettings />
        <MenuLabel>Settings</MenuLabel>
      </MenuItem>
    </MenuSection>
    <MenuSeparator />
    <MenuItem>
      <IconCommandRegular />
      <MenuLabel>Command Menu</MenuLabel>
    </MenuItem>
    <MenuSubMenu>
      <MenuItem>
        <IconDeviceDesktop />
        <MenuLabel>Switch theme</MenuLabel>
      </MenuItem>
      <MenuContent>
        <MenuItem>
          <IconDeviceDesktop />
          <MenuLabel>System</MenuLabel>
        </MenuItem>
        <MenuItem>
          <MoonIcon />
          <MenuLabel>Dark</MenuLabel>
        </MenuItem>
        <MenuItem>
          <SunIcon />
          <MenuLabel>Light</MenuLabel>
        </MenuItem>
      </MenuContent>
    </MenuSubMenu>
    <MenuSeparator />
    <MenuItem href="#contact-s">
      <MenuLabel>Contact Support</MenuLabel>
    </MenuItem>
    <MenuSeparator />
    <MenuItem href="#logout">
      <IconLogout />
      <MenuLabel>Log out</MenuLabel>
    </MenuItem>
  </MenuContent>
</Menu>

Menu can be nested to display submenus.

Loading...

Danger

Designate a menu item as dangerous.

With icon

Enhance menu items by adding icons.

Loading...

Dynamic

Generate menu items dynamically.

Loading...

Multiple

Display a selection of actions or options.

Loading...

Single menu

Present a single list of options.

Loading...

Section menu

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 MenuContent component.

Loading...

Disabled

Disable specific menu items.

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

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

In the examples above, you might notice that the MenuLabel component is used inconsistently. This is because it is not mandatory, but it is considered a best practice. Using MenuLabel ensures proper alignment between icons and text, especially when dealing with items that vary. For instance, one item might have an icon while another does not. Adding MenuLabel helps create a polished and consistent appearance.

Description

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

Loading...

Open modal

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

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more
List Box
Table