Menu
Overview
When to use
Use the Menu component when you need to provide a list of options or actions to the user in a compact and organized manner.
Menu.Item will return a button unless an href prop is passed, then it will return as <a> EventTarget.
Smart Placement
The Menu component automatically adjusts its placement to ensure optimal visibility within the viewport. This smart placement feature ensures that the menu is displayed in a position where it won't be cut off by the edges of the screen.
Component
Default
Placement
autoCloseOnClick
States
Programatically close
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| componentRef | Shape {
"current": "Any"
} | false | - | |
| trigger | Node | false | - | |
| open | Bool | false | - | |
| placement | Enum "top" │ "top-start" │ "top-end" │ "right" │ "right-start" │ "right-end" │ "bottom" │ "bottom-start" │ "bottom-end" │ "left" │ "left-start" │ "left-end" | false | - | Exported as Menu.Placement.right |
| autoCloseOnClick | Bool | false | - | |
| onMenuDismiss | Func | false | - |
Menu.Section
| Property | Type | Required | Default |
|---|---|---|---|
| utilClassNames | String | false | - |
| children | Node | false | - |
Menu.Item
| Property | Type | Required | Default |
|---|---|---|---|
| utilClassNames | String | false | - |
| children | Node | false | - |
| icon | Node | false | - |
| href | String | false | - |
| disabled | Bool | false | - |