Menus allow users to select a single item from a group of available options.
eventKey to defaultActiveKeyseventKey to defaultExpandedKeys| Prop | Description | Type | Default |
|---|---|---|---|
| defaultActiveKeys | Initial set menu item as active based on inserted keys which corresponding to eventkey | string[] | [] |
| defaultCollapseActiveKeys | Initial collapsable menu item active based on inserted keys which corresponding to eventkey | string[] | [] |
| defaultExpandedKeys | Initial expand collapsable menu item based on inserted keys which corresponding to eventkey | string[] | [] |
| menuItemHeight | Height of all menu item | string | number | 40 |
| onSelect | Callback when menu item clicked | (e: MouseEvent, eventKey: string) => void | - |
| sideCollapsed | Whether to side collapse the menu | boolean | false |
| variant | The variants of the menu. | 'light' | 'dark' | 'themed' | 'transparent' | 'light' |
| Prop | Description | Type | Default |
|---|---|---|---|
| active | Whether to highlight the collapsable menu item | boolean | true |
| eventKey | An unique value for the collapsable menu item | string | - |
| expanded | Whether to expand current collpased menu item | boolean | false |
| indent | Whether to indent child menu item | boolean | true |
| label | Content of the collpased menu item | string | ReactNode | - |
| onToggle | Callback when collpased menu item toggled | (expanded: boolean, e: MouseEvent) => void | - |
| Prop | Description | Type | Default |
|---|---|---|---|
| label | Content of the collpased menu group title | string | ReactNode | - |
| Prop | Description | Type | Default |
|---|---|---|---|
| asElement | Render element | string | 'div' |
| disabled | Whether to disable menu item | boolean | - |
| dotIndent | Whether show dot as prefix in menu item | boolean | - |
| eventKey | An unique value for the menu item | boolean | - |
| isActive | Whether to active menu item | boolean | - |
| menuItemHeight | Height of menu item | string | number | 40 |
| onSelect | Callback menu item clicked | (eventKey: string, e: MouseEvent) => void | 40 |