Menu
Menus allow users to select a single item from a group of available options.
Simple
A simple example of menu.
Collapsable menu item
Menus can contain nested levels as collapsable menu items.
Menu group
Menus can also categorization menu items into different groups.
With icon
Example with icons in menu items.
Disabled menu item
Menu items can be disabled to prevent a user from interacting with them.
Default active
We can set the menu items within to active by entering corresponded
eventKey to defaultActiveKeysDefault expand
We can expand the collapsable menu items within by entering corresponded
eventKey to defaultExpandedKeysAPI
Menu
| 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' |
Menu.MenuCollapse
| 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 | - |
Menu.MenuGroup
| Prop | Description | Type | Default |
|---|---|---|---|
| label | Content of the collpased menu group title | string | ReactNode | - |
Menu.MenuItem
| 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 |