MenuItem

A standalone menu item component for use in popovers, sheets, and custom menus. This is the base component that DropdownMenuItem and other menu items build upon.

Usage

import { MENU_ITEM_ICON_SIZES, MENU_ITEM_INDICATOR_LEFT, MENU_ITEM_INDICATOR_SIZE, MENU_ITEM_INSET_CLASSES, MENU_ITEM_KBD_SIZES, MENU_ITEM_SIZE_CLASSES, MenuItem, MenuItemProps, menuItemVariants } from "@desk/ui/components/menu-item";

Best practices

MenuItem is the standalone base for custom menus (popovers, sheets); inside a DropdownMenu / ContextMenu use that family's *Item for built-in roving focus.
Pass glyphs via the icon / dot / avatar / kbd / suffixIcon props, not as children — with asChild they're cloned into your child, and children is the label only.

Props

Prop	Type	Description
variant	`"input" \| "default" \| "outline" \| null \| undefined`
tone	`"neutral" \| "danger" \| null \| undefined`
inset	`boolean \| null \| undefined`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`
asChild	`boolean \| undefined`	Render as child element using Slot
active	`boolean \| undefined`	Whether the item is in an active/selected state
activeIndicator	`"none" \| "dot" \| "check" \| undefined`	Visual indicator for active state. "dot" shows grey dot normally, green when active. "check" shows green checkmark only when active.
loading	`boolean \| undefined`	Show loading spinner in place of icon
indicator	`React.ReactNode`	Indicator element for checkbox/radio items (absolutely positioned on left). Automatically enables inset.
selectionMode	`"checkbox" \| "radio" \| undefined`	Selection visual: "checkbox" renders Checkbox, "radio" renders radio circle. Defaults to "checkbox" when `checked` is set.
checked	`boolean \| undefined`	Checked state. Renders the selectionMode indicator inline. When undefined, no indicator renders.
avatar	`React.ReactNode`	Avatar element to display at the start (takes precedence over icon and dot)
dot	`boolean \| "neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| undefined`	Dot indicator at the start, centered in the icon space (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>> \| undefined`	Icon to display at the start
iconClassName	`string \| undefined`	Additional className for the icon
suffixIcon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>> \| undefined`	Icon to display at the end (e.g., checkmark, chevron). Takes precedence over kbd.
kbd	`string[] \| undefined`	Keyboard shortcut keys to display (e.g., ["⌘", "C"]). Ignored if suffixIcon is provided.
kbdTone	`"neutral" \| "brand" \| "danger" \| null \| undefined`	Tone for kbd elements. Options: "neutral" (default), "brand", "danger".
kbdEmphasis	`"outline" \| "solid" \| "ghost" \| "soft" \| null \| undefined`	Emphasis for kbd elements. Options: "solid" (default), "soft", "outline", "ghost".
suffix	`React.ReactNode`	Content to display at the end after suffixIcon/kbd (e.g., custom content)
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined`	Text label for the menu item. Use `icon` prop for icons, not children. When using asChild, pass a single React element.

Also exports

constMENU_ITEM_ICON_SIZES
constMENU_ITEM_INDICATOR_LEFT
constMENU_ITEM_INDICATOR_SIZE
constMENU_ITEM_INSET_CLASSES
constMENU_ITEM_KBD_SIZES
constMENU_ITEM_SIZE_CLASSES
typeMenuItemProps
constmenuItemVariants

Composition

Builds on

Dot, Icon, Kbd, Radio, Spinner

Used by

ContextMenu, DataGrid, DropdownMenu, LocationInput, Menubar, Select, Sidebar, SubNavigation