Headless / Menu

Menu

The list-of-actions behaviours. Each one presents a set of commands and moves focus through them with the arrow keys — the differences are how the list is summoned and how it is structured.

Updated 3 days agoEdit on GitHubWeb & native

The pieces

ComponentSummoned byStructure
MenuA click on a trigger buttonA flat list of items
ContextMenuA right-click on a regionA flat list, opened at the pointer
NavigationMenuAlways visibleA nav bar, optionally with submenus
CommandPaletteA keyboard shortcutA fuzzy-searchable command list

A shared keyboard model

Menu and ContextMenu share an interaction model: a role="menu" panel of role="menuitem" children, arrow keys moving focus, Home and End jumping to the ends, Enter or Space activating, Escape closing. The difference is only the trigger — a button click versus a right-click.

NavigationMenu and CommandPalette diverge. NavigationMenu is a persistent nav landmark, not a popup. CommandPalette is a searchable launcher that composes Dialog for its modal shell and adds fuzzy filtering, sections, and recent-item tracking.

A Popover holds arbitrary content; a Menu holds a list of actions. The distinction matters for assistive technology — role="menu" tells a screen reader to expect a command list and announce the item count, which is wrong for a free-form panel. Reach for Menu when every child is an action, Popover when the panel holds a form or mixed content.