isDisabled
A disabled menu item indicates that an option exists but isn't available in the current context. This helps preserve layout consistency and signals that the action might be available later.
isUnavailable
An unavailable menu item signals that an option exists but isn't accessible in the current scenario. This helps ensure the label remains visible and provides context about why the option is unavailable, or directions for how to make it available.
isCollapsible
Displays submenus in a collapsed, nested format within the parent menu container. Works with both popover and tray styles. When using a tray, set a fixed height to avoid disorienting shifts when items expand or collapse.
sectionHeader
Use a section header when a menu section requires a label or descriptor. Section headers are helpful when two or more sections differ in function or context, making it easier for users to understand the structure.
selectionStyle
When the selection option is enabled, the selection can be displayed using checkmarks, checkboxes or switches. Switches are more commonly used on mobile.
selectionMode
A menu section has the options of single selection, multiple selection, or having no selection. By default, menu items have no selection, and perform an action on press.
For single selection menu sections, menu items show a single checkmark to indicate the selected item. Multiple selection menu sections can display checkboxes or switches beside each menu item.
size
Menus come in four different sizes: small, medium, large, and extra-large. Medium is the default and most commonly used. Menu sizes should correspond to the size of the menu trigger component (like an action button), and any embedded components (like switches) should follow suit.
Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
value
A menu item can display a related value in the value area. Examples of values include the selected option from a submenu, a keyboard shortcut for the action, or other content that clarifies the menu item.
description
Menu items can include description text to provide extra clarity beyond the label. Descriptions help users understand the action and make informed choices.
Avoid cluttering items with repetitive details or promotional content.
icon
Menu items can include icons, but only when they add meaningful context — not just for decoration. Use icons when they have a strong, recognizable association with the label (like tool switching in a toolbar).
label
A menu item must include a label that clearly communicates the action or option it represents.
container
On desktop, menus are shown in a popover by default. On mobile, popovers can be used when appropriate. Submenus cascade in a separate popover by default.