A versatile menu for navigation.
Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.
More layouts with navigation: Layout.
ul element, so it only supports li and script-supporting elements as children nodes。Your customized node should be wrapped by Menu.Item.Menu.* or encapsulated HOCs.Common props ref：Common props
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| 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[] | - | 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[] | - | |
| style | Style of the root node | 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 | |
| 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({ item, key, keyPath, domEvent }) | - | |
| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string[]) | - | |
| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - |
More options in rc-menu
type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| danger | Display the danger style | boolean | false | |
| disabled | Whether menu item is disabled | boolean | false | |
| 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 | - |
| Property | Description | Type | Default value | Version |
|---|---|---|---|---|
| children | Sub-menus or sub-menu items | 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 }) | - |
Define type as group to make as group:
const groupItem = {type: 'group', // Must havelabel: 'My Group',children: [],};
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| children | Sub-menu items | MenuItemType[] | - | |
| label | The title of the group | ReactNode | - |
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Need define the type as divider：
const dividerItem = {type: 'divider', // Must have};
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| dashed | Whether line is dashed | boolean | false |
Menu collects structure info with twice-render to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed.
Menu will render fully item in flex layout and then collapse it. You need tell flex not consider Menu width to enable responsive (online demo):
<div style={{ flex }}><div style={{ ... }}>Some Content</div><Menu style={{ minWidth: 0, flex: "auto" }} /></div>
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| activeBarBorderWidth | Border width of menu item active bar | number | 1 |
| activeBarHeight | Height of menu item active bar | number | 2 |
| activeBarWidth | Width of menu item active bar | number | 0 |
| collapsedIconSize | Size of icon when collapsed | number | 16 |
| collapsedWidth | Width when collapsed | number | 80 |
| dangerItemActiveBg | Color of active danger menu item text | string | #fff2f0 |
| dangerItemColor | Color of danger menu item text | string | #ff4d4f |
| dangerItemHoverColor | Hover color of danger menu item text | string | #ff4d4f |
| dangerItemSelectedBg | Color of selected danger menu item text | string | #fff2f0 |
| dangerItemSelectedColor | Color of selected danger menu item text | string | #ff4d4f |
| darkDangerItemActiveBg | Background of active danger menu item in dark mode | string | #ff4d4f |
| darkDangerItemColor | Color of danger menu item text in dark mode | string | #ff4d4f |
| darkDangerItemHoverColor | Background of hovered danger menu item in dark mode | string | #ff7875 |
| darkDangerItemSelectedBg | Background of active danger menu item in dark mode | string | #ff4d4f |
| darkDangerItemSelectedColor | Color of selected danger menu item in dark mode | string | #fff |
| darkGroupTitleColor | Color of group title text in dark mode | string | rgba(255, 255, 255, 0.65) |
| darkItemBg | Background of menu item in dark mode | string | #001529 |
| darkItemColor | Color of menu item text in dark mode | string | rgba(255, 255, 255, 0.65) |
| darkItemDisabledColor | Color of disabled menu item in dark mode | string | rgba(255, 255, 255, 0.25) |
| darkItemHoverBg | Background of hovered menu item in dark mode | string | transparent |
| darkItemHoverColor | Color of hovered menu item in dark mode | string | #fff |
| darkItemSelectedBg | Background of active menu item in dark mode | string | #1677ff |
| darkItemSelectedColor | Color of selected menu item in dark mode | string | #fff |
| darkSubMenuItemBg | Background of submenu item in dark mode | string | #000c17 |
| dropdownWidth | Width of popup menu | number | 160 |
| groupTitleColor | Color of group title text | string | rgba(0, 0, 0, 0.45) |
| groupTitleFontSize | font-size of group title | number | 14 |
| groupTitleLineHeight | line-height of group title | undefined | LineHeight<string | number> | 1.5714285714285714 |
| horizontalItemBorderRadius | Border radius of horizontal menu item | number | 0 |
| horizontalItemHoverBg | Background color of horizontal menu item when hover | string | transparent |
| horizontalItemHoverColor | Hover color of horizontal menu item text | string | #1677ff |
| horizontalItemSelectedBg | Background color of horizontal menu item when selected | string | transparent |
| horizontalItemSelectedColor | Color of selected horizontal menu item text | string | #1677ff |
| horizontalLineHeight | LineHeight of horizontal menu item | undefined | LineHeight<string | number> | 46px |
| iconMarginInlineEnd | Spacing between icon and text | undefined | MarginInlineEnd<string | number> | 10 |
| iconSize | Size of icon | number | 14 |
| itemActiveBg | Background color of menu item when active | string | #e6f4ff |
| itemBg | string | #ffffff | |
| itemBorderRadius | Radius of menu item | number | 8 |
| itemColor | Color of menu item text | string | rgba(0, 0, 0, 0.88) |
| itemDisabledColor | Color of disabled menu item text | string | rgba(0, 0, 0, 0.25) |
| itemHeight | Height of menu item | number | 40 |
| itemHoverBg | Background color of menu item when hover | string | rgba(0, 0, 0, 0.06) |
| itemHoverColor | Hover color of menu item text | string | rgba(0, 0, 0, 0.88) |
| itemMarginBlock | margin-block of menu item | undefined | MarginBlock<string | number> | 4 |
| itemMarginInline | Horizontal margin of menu item | number | 4 |
| itemPaddingInline | padding-inline of menu item | undefined | PaddingInline<string | number> | 16 |
| itemSelectedBg | Background color of menu item when selected | string | #e6f4ff |
| itemSelectedColor | Color of selected menu item text | string | #1677ff |
| popupBg | Background color of popup | string | #ffffff |
| subMenuItemBg | Background color of sub-menu item | string | rgba(0, 0, 0, 0.02) |
| subMenuItemBorderRadius | Radius of sub-menu item | number | 4 |
| zIndexPopup | z-index of popup menu | number | 1050 |
Horizontal top navigation menu.
Vertical menu with inline submenus.
Inline menu could be collapsed.
Here is a complete demo with sider layout.
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
Submenus open as pop-ups.
There are two built-in themes: light and dark. The default value is light.
You can config SubMenu theme with theme prop to enable different theme color effect. This sample is dark for root and light for SubMenu.
Show the dynamic switching mode (between inline and vertical).
