Component 18 · Complete

Popover
and Menu

Anchors short context and compact actions with native light dismissal and deterministic keyboard navigation.

Popover

Add context near its source

A generic Popover keeps short supporting information in the top layer and dismisses after an outside interaction.

Selection menu

Expose persistent choices

Checkbox and radio items update their checked state and remain open so people can make several related choices.

Alignment

Stay inside the viewport

End alignment supports controls near the inline edge. Placement flips above when the lower viewport has insufficient space.

Aligned to the container edge

Keyboard contract

Make every action reachable

The lifecycle stays local to each Popover and exposes selection without prescribing application side effects.

OpenClick / Arrow Up / Arrow Down
NavigateArrows / Home / End / typeahead
DismissEscape / Tab / outside action

Usage guidance

Keep menus compact and action-oriented.

Use a generic Popover for context and a Menu for commands. Move forms and multi-step decisions into a Dialog or page.

Next component: Tooltip