Navigation
Menu Item
Menu Item is a single row within any dropdown, context, or command menu — the shared building block behind Dropdown Menu, Command Menu, and context menus alike.
State (Default/Hover/Selected/Disabled) — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Menu Item is a single row within any dropdown, context, or command menu — the shared building block behind Dropdown Menu, Command Menu, and context menus alike.
When to use
Any menu list item needing a leading icon, label, and optional trailing keyboard shortcut.
When not to use
A persistent, always-visible navigation item — use Sidebar Nav Item or Top Nav Item.
Accessibility
role="menuitem" within a parent role="menu", with full arrow-key navigation.
Common mistakes
Reusing this component's icon slot without recoloring after an instance-swap — the new icon shows its own master's default color until explicitly recolored.
Properties
State as variants. Label (text). Show leading icon (boolean) + Leading Icon (instance-swap). Show shortcut (boolean) + Shortcut (text).
Tokens used
semantic/surface/elevatedsemantic/text/primarysemantic/action/primarysemantic/icon/muted