Menu

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/menu

Usage

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

<Menu>
  <MenuTrigger />
  <MenuContent>
    <MenuItemGroup>
      <MenuItemGroupLabel />
      <MenuItem value="item-1" />
      <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.

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

Button that opens the menu. Renders a button. Use asChild to delegate to a child element.

MenuContent

Content container for menu items. Renders a div inside a portal.

MenuItem

A single menu option. Renders a div (or child when asChild).

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. Renders inside <MenuGroup />.

MenuSeparator

Visual divider between items. Renders an hr.

MenuSub / MenuSubTrigger / MenuSubContent

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

MenuShortcut

Optional keyboard hint shown next to an item (e.g. ⌘S). Renders a span.

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