Importimport { Menu } from 'antd'; |
contributors
Importimport { Menu } from 'antd'; |
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
| 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[] | - | 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 | - | |
| 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 }) | - | |
| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ 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({ key, keyPath, selectedKeys, domEvent }) | - | |
| popupRender | Custom popup renderer for submenu | (node: ReactElement, props: { item: SubMenuProps; keys: string[] }) => ReactElement | - |
More options in @rc-component/menu
type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;
| 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 | - |
| Property | Description | Type | Default | 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 }) | - | |
| popupRender | Custom popup renderer for current sub-menu | (node: ReactElement, props: { item: SubMenuProps; keys: string[] }) => ReactElement | - |
Define type as group to make as group:
const groupItem = {type: 'group', // Must havelabel: 'My Group',children: [],};
| Property | Description | Type | Default | 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};
| Property | Description | Type | Default | 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 | string | number | 1 |
| activeBarHeight | Height of menu item active bar | number | 2 |
| activeBarWidth | Width of menu item active bar | string | number | 0 |
| collapsedIconSize | Size of icon when collapsed | number | 16 |
| collapsedWidth | Width when collapsed | string | number | 80 |
| dangerItemActiveBg | Background color of danger menu item when active | string | #fff2f0 |
| dangerItemColor | Color of danger menu item text | string | #ff4d4f |
| dangerItemHoverColor | Hover color of danger menu item text | string | #ff4d4f |
| dangerItemSelectedBg | Background color of selected danger menu item | 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 |
| darkPopupBg | The background color of the overlay menu in dark mode. | string | #001529 |
| darkSubMenuItemBg | Background of submenu item in dark mode | string | #000c17 |
| dropdownWidth | Width of popup menu | string | 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 | 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 | LineHeight<string | number> | undefined | 46px |
| iconMarginInlineEnd | Spacing between icon and text | MarginInlineEnd<string | number> | undefined | 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 | string | 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 | MarginBlock<string | number> | undefined | 4 |
| itemMarginInline | Horizontal margin of menu item | number | 4 |
| itemPaddingInline | padding-inline of menu item | PaddingInline<string | number> | undefined | 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 |
| subMenuItemSelectedColor | Color of submenu title when submenu has selected item | string | #1677ff |
| zIndexPopup | z-index of popup menu | number | 1050 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| boxShadowSecondary | Control the secondary box shadow style of an element. | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| controlHeightLG | LG component height | number | 40 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationFast | Motion speed, fast speed. Used for small element animation interaction. | string | 0.1s |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| motionEaseInOutCirc | Preset motion curve. | string | |
| motionEaseInQuint | Preset motion curve. | string | |
| motionEaseOut | Preset motion curve. | string | |
| motionEaseOutCirc | Preset motion curve. | string | |
| motionEaseOutQuint | Preset motion curve. | string | |
| padding | Control the padding of the element. | number | 16 |
| paddingXL | Control the extra large padding of the element. | number | 32 |
| paddingXS | Control the extra small padding of the element. | number | 8 |