Menu

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/menu.json

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 onClick 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.