Docs Components Blocks Sponsor Showcase Themes

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

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>

Examples

Links

Integrating MenuItem with your framework’s link component is straightforward. Learn more in Client Side Routing.

Menu can be nested to display submenus.

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

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.

popover

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