Menu
A navigation menu for pages and operations.
When to use
Use Menu for persistent top-level, inline, collapsed, vertical, or themed navigation structures.
Examples
API
Menu, Menu.Item, Menu.SubMenu, Menu.ItemGroup, and their props are exported from @ceebee/ui/client.
Menu
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | — |
defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | - | — |
defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | - | — |
expandIcon | custom expand icon of submenu | ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode | - | 4.9.0 |
forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | — |
inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | — |
inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | — |
items | Menu item content | [ItemType\[\]](#itemtype) | - | 4.20.0 |
mode | Type of menu | vertical | horizontal | inline | vertical | — |
multiple | Allows selection of multiple items | boolean | false | — |
openKeys | Array with the keys of currently opened sub-menus | string\[] | - | — |
overflowedIndicator | Customized the ellipsis icon when menu is collapsed horizontally | ReactNode | <EllipsisOutlined /> | — |
selectable | Allows selecting menu items | boolean | true | — |
selectedKeys | Array with the keys of currently selected menu items | string\[] | - | — |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | — |
subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | — |
subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | — |
tooltip | Config tooltip props for menu items in inline collapsed mode. Set to false to disable. | false | TooltipProps | - | 6.3.0 |
theme | Color theme of the menu | light | dark | light | — |
triggerSubMenuAction | Which action can trigger submenu open/close | hover | click | hover | — |
onClick | Called when a menu item is clicked | function({ key, keyPath, domEvent, itemData }) | - | — |
onDeselect | Called when a menu item is deselected (multiple mode only) | function({ key, keyPath, selectedKeys, domEvent, itemData }) | - | — |
onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - | — |
onSelect | Called when a menu item is selected | function({ key, keyPath, selectedKeys, domEvent, itemData }) | - | — |
popupRender | Custom popup renderer for submenu | (node: ReactElement, props: { item: SubMenuProps; keys: string[] }) => ReactElement | - | — |
ItemType
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
danger | Display the danger style | boolean | false | — |
disabled | Whether menu item is disabled | boolean | false | — |
extra | The extra of the menu item | ReactNode | - | 5.21.0 |
icon | The icon of the menu item | ReactNode | - | — |
key | Unique ID of the menu item | string | - | — |
label | Menu label | ReactNode | - | — |
title | Set display title for collapsed item | string | - | — |
children | Sub-menus or sub-menu items | [ItemType\[\]](#itemtype) | - | — |
disabled | Whether sub-menu is disabled | boolean | false | — |
icon | Icon of sub menu | ReactNode | - | — |
key | Unique ID of the sub-menu | string | - | — |
label | Menu label | ReactNode | - | — |
popupClassName | Sub-menu class name, not working when mode="inline" | string | - | — |
popupOffset | Sub-menu offset, not working when mode="inline" | \[number, number] | - | — |
theme | Color theme of the SubMenu (inherits from Menu by default) | light | dark | - | — |
onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | — |
popupRender | Custom popup renderer for current sub-menu | (node: ReactElement, props: { item: SubMenuProps; keys: string[] }) => ReactElement | - | — |
children | Sub-menu items | [MenuItemType\[\]](#menuitemtype) | - | — |
label | The title of the group | ReactNode | - | — |
dashed | Whether line is dashed | boolean | false | — |