Skip to main content

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.

Keyboard Interaction

Users can open, navigate, and act on the Menu using standard keyboard controls.
Last modified on July 24, 2026