MenuItem

The building block for menus, dropdowns, popovers, command menus. Compose with MenuGroup, MenuLabel, MenuSeparator.

Default

<MenuGroup>
  <MenuItem icon={<Copy />} shortcut="⌘C">Copy</MenuItem>
  <MenuItem icon={<Clipboard />} shortcut="⌘V">Paste</MenuItem>
  <MenuItem icon={<Folder />} hasSubmenu>Open in…</MenuItem>
  <MenuItem disabled>Archived</MenuItem>
</MenuGroup>

Wrapped icons

<MenuGroup>
  <MenuItem icon={<User />} iconWrapped shortcut="⌘K">Account</MenuItem>
  <MenuItem icon={<Settings />} iconWrapped shortcut="⌘,">Settings</MenuItem>
</MenuGroup>

Check items

<MenuGroup>
  <MenuItem indicator="check" checked>Show line numbers</MenuItem>
  <MenuItem indicator="check">Word wrap</MenuItem>
  <MenuItem indicator="check" checked disabled>Minimap (beta)</MenuItem>
</MenuGroup>

Radio items

<MenuGroup>
  <MenuLabel>Theme</MenuLabel>
  <MenuItem indicator="radio" checked>Light</MenuItem>
  <MenuItem indicator="radio">Dark</MenuItem>
  <MenuItem indicator="radio">System</MenuItem>
</MenuGroup>

Groups + separators

<>
  <MenuGroup>
    <MenuLabel>File</MenuLabel>
    <MenuItem icon={<Copy />} shortcut="⌘C">Copy</MenuItem>
    <MenuItem icon={<Clipboard />} shortcut="⌘V">Paste</MenuItem>
  </MenuGroup>
  <MenuSeparator />
  <MenuGroup>
    <MenuLabel>View</MenuLabel>
    <MenuItem indicator="check" checked>Show sidebar</MenuItem>
    <MenuItem indicator="check">Zen mode</MenuItem>
  </MenuGroup>
</>

Exports

Export	Role
MenuItem	A single row. Accepts icon, shortcut, hasSubmenu, indicator (none/check/radio), checked, disabled.
MenuGroup	Vertical stack of items with a small gap. role=group.
MenuLabel	Muted heading above a group (e.g., 'File', 'Theme').
MenuSeparator	Divider between groups.
MenuShortcut	Optional component for standalone keyboard-shortcut text.

Use inside Radix menus

When we build DropdownMenu/ContextMenu, wrap MenuItem with asChild:

<DropdownMenu.Item asChild>
  <MenuItem icon={<Copy />} shortcut="⌘C">Copy</MenuItem>
</DropdownMenu.Item>

Source

packages/react/src/components/menu-item.tsx · Figma node 2819:22795