Menu

A wrapper around React Aria’s MenuTrigger and Menu components. Supports single and multiple selection, disabled items, and full keyboard navigation.

Add via CLI

npx @a2ra/cli add menu

Basic

With selection

Example JSON

{
  "type": "Menu",
  "props": {
    "triggerLabel": "Actions",
    "items": [
      { "id": "edit", "label": "Edit" },
      { "id": "duplicate", "label": "Duplicate" },
      { "id": "delete", "label": "Delete" }
    ],
    "disabledKeys": ["delete"]
  }
}

Props

Prop	Type	Description
triggerLabel	string	Label for the trigger button
items	MenuItemEntry[]	Menu items (see below)
placement	top bottom default left right	Preferred menu position
isOpen	boolean	Controlled open state
selectionMode	none default single multiple	Selection behaviour
selectedKeys	string[]	Controlled selected item IDs
defaultSelectedKeys	string[]	Uncontrolled default selection
disabledKeys	string[]	IDs of non-interactive items

MenuItemEntry shape

Field	Type	Description
id	string	Unique item identifier
label	string	Visible item text
isDisabled	boolean	Disables this item

Notes

• Arrow keys navigate items; Enter or Space activates the focused item.
• selectionMode: "none" (default) is for action menus. Use "single" or "multiple" for menus that represent a persistent state choice (e.g. view mode).