Menu component
Figma Component
A Menu displays a list of choices, appearing when the user interacts with a button, input field, or other control.
Properties
| Name | Description | Default |
|---|---|---|
| activeIndex | Active item index | - |
| asInput | Set if Menu trigger is an input element | - |
| contextRef | If set, Menu will act as a context menu that appears on right click for the reference element | - |
| initialFocus | Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref. | - |
| leaveMenuOpenOnItemSelect | Leave the menu open when the users selects an item | - |
| matchWidth | Match width | - |
| maxHeight | Max height of the menu If not defined, available screen size will be used | - |
| offset | Offset between dropdown menu and dropdown button (px) | - |
| onVirtualChange | Use a virtual focus for active menu items | - |
| placement | Menu position relative to the trigger element | - |
0-10 of 13
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.
Context Menu
If the `contextRef` prop is set, Menu will act as a context menu that appears on right click for the reference element .
Virtual Menu
Use `onVirtualChange` to catch the item selection on "Enter" key click while the a menu input is focused