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.

Menu
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 @intentui/icons

Anatomy

import {
  IconCommandRegular,
  IconDashboard,
  IconDeviceDesktop,
  IconLogout,
  IconMoon,
  IconSettings,
  IconSun,
} from "@intentui/icons"
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">
        <IconDashboard />
        <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>
          <IconMoon />
          <MenuLabel>Dark</MenuLabel>
        </MenuItem>
        <MenuItem>
          <IconSun />
          <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 showArrow from popover in the Menu.Content component.

Loading...

Disabled

Disable specific menu items.

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

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

In the examples above, you might notice that the Menu.Label component is used inconsistently. This is because it is not mandatory, but it is considered a best practice. Using Menu.Label 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 Menu.Label helps create a polished and consistent appearance.

Description

You can add details to menu items by using the Menu.Description 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 350+ blocks and polished templates crafted for professionals.
Explore
List Box
Table