Options
The Menu supports an action mode and two persisted selection modes, leading icons, disabled options, and either edge of its trigger for the popover.Selection Mode
selectionMode switches the menu between three behaviors: "none" (the default) is a plain action menu; "single" and "multiple" persist a checked selection instead of closing on pick.
Single Select
selectionMode="single" behaves like a “sort by” control: picking an option checks it, unchecks any other, and closes the menu to confirm the single choice.
Multi Select
selectionMode="multiple" lets several options stay checked at once, and the menu stays open after a pick so more can be toggled.
Action Menu
The hero example above is an action menu —selectionMode’s default, "none". Each option runs a command via onAction and the menu closes immediately on pick. Action menus and the selection modes render identically at rest; the difference is entirely behavioral — whether picking an option persists a checked state or fires a one-off command.
Icons
An optional leading icon renders at 16px before the label. Icons are decorative and don’t contribute to the option’s accessible name.Disabled Options
A disabled option can’t be focused, selected, or activated, and renders dimmed — including an option that is already selected; the dimmed check still shows its state.Placement
placement opens the popover on the "bottom" (default, shown in the hero example above) or "top" edge of the trigger, with the same 4px gap either way.
Behavior
The popover hugs its content between a 180px floor and a 360px ceiling, and every option responds to hover, focus, press, and disabled states.Visual States
Unselected options stay neutral — a subtle gray fill on hover and press, with unchanged text. Selected options use the informative-blue family instead. Keyboard focus draws a ring only, with no background fill. Disabled options render dimmed regardless of selection.Wrapping
Labels wrap to multiple lines once the popover reaches its 360px max-width, rather than growing the popover without bound.Scrolling List
Enough options to exceed the popover’s available height scroll internally; the scroll region shares the popover’s corner radius so its scrollbar stays clipped to the rounded shape.Usage Guidelines
When to Use
Use the Menu when:- Running a command from a trigger – Each option runs a command or navigates to a destination, and the menu closes on pick.
- Choosing one option, such as a sort order – Use single selection. Picking an option checks it and closes the menu.
- Toggling several options at once – Use multiple selection. The menu stays open so the user can check more options.
When not to use
Avoid using the Menu for:- Showing options that stay visible on the page – Use the Checkbox instead.
- Listing prior conversations – Use the Chat History instead.