Menu

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/menu

Anatomy#

Menu
├── MenuTrigger
└── MenuPositioner
    └── MenuContent
        ├── MenuGroup
        │   └── MenuGroupLabel
        ├── MenuItem
        ├── MenuQuickItem
        ├── MenuCheckboxItem
        ├── MenuRadioGroup
        │   └── MenuRadioItem
        ├── MenuSub
        │   ├── MenuSubTrigger
        │   └── MenuSubContent
        ├── MenuSeparator
        ├── MenuShortcut
        └── MenuArrow

Usage#

import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuQuickItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

<Menu>
  <MenuTrigger />
  <MenuContent>
    <MenuItemGroup>
      <MenuItemGroupLabel />
      <MenuItem />
      <MenuSub>
        <MenuSubTrigger />
        <MenuSubContent>
          <MenuItem />
        </MenuSubContent>
      </MenuSub>
      <MenuSeparator />
      <MenuItemGroup>
        <MenuRadioItem />
      </MenuItemGroup>
      <MenuSeparator />
      <MenuCheckboxItem />
    </MenuItemGroup>
  </MenuContent>
</Menu>

Positioning#

Control the position of the menu relative to the trigger using the positioning prop.

Examples#

Nested Menu#

Use MenuSub, MenuSubTrigger, and MenuSubContent for nested submenus.

Icons#

Combine icons with labels for quick scanning.

Shortcuts#

Use MenuShortcut to show keyboard hints next to menu items.

Checkboxes#

Use MenuCheckboxItem for toggles.

Radio Group#

Use MenuRadioGroup and MenuRadioItem for a single selection from a set of options.

With Link#

Use the asChild prop on MenuItem with a anchor element to render a link.

With Group Label#

Use MenuGroup with MenuGroupLabel or the heading prop to group related items under a label.

With Separator#

Use MenuSeparator to add visual dividers between related groups of menu items.

Quick Items#

Use MenuQuickItem for actions with icon-above-text layout, ideal for quick actions like Copy and Share displayed horizontally.

With Scroll#

Add max-h-* and overflow-y-auto to MenuContent to constrain height and enable native scrolling when there are many items.

Open a Dialog#

Open a dialog from a MenuItem with the onSelect prop and controlled state.

Destructive#

Use variant="destructive" on MenuItem for irreversible actions like delete.

API Reference#

Menu#

Root element of the menu component.

MenuTrigger#

Opens the menu on click. Use asChild to delegate to a child element.

MenuContent#

Holds menu options. Displayed in a portal, positioned relative to the trigger.

MenuItem#

A single selectable menu option. Supports asChild for custom elements.

MenuCheckboxItem#

A menu option with a checkbox. Use checked and onCheckedChange for controlled state.

MenuRadioGroup#

Group of mutually exclusive options. Use value and onValueChange for controlled state.

MenuRadioItem#

A single option in a radio group.

MenuGroup#

Groups related items. Use heading or MenuGroupLabel for a label.

MenuGroupLabel#

Label for a group. Must be used inside MenuGroup.

MenuSeparator#

Visual divider between groups of menu items.

MenuQuickItem#

A menu option with icon-above-text layout for quick actions. Use with flex to display multiple items horizontally.

MenuSub / MenuSubTrigger / MenuSubContent#

Submenu: wrap a nested Menu-like structure. MenuSubTrigger opens the submenu; MenuSubContent holds the nested items.

MenuShortcut#

Optional keyboard shortcut hint displayed next to a menu item.

MenuArrow#

Optional arrow pointing toward the trigger.

For a complete list of props, see the Ark UI documentation.