Collections

Menu

A collapsible menu that reveals actions or navigation options when triggered, distinct from a select as it is not used for form input.

Menuhtml
List BoxTable

Basic

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

Installation

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

npm i 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
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
List Box
Table