logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Menu

A versatile menu for navigation.
Importimport { Menu } from "antd";
Sourcecomponents/menu
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

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.

Notes for developers

  • Menu is rendered as a ul element, so it only supports li and script-supporting elements as children nodes. Your customized node should be wrapped by Menu.Item.
  • Menu needs to collect its node structure, so its children should be Menu.* or encapsulated HOCs.

Examples

API

Common props ref:Common props

Menu

ParamDescriptionTypeDefault valueVersion
defaultOpenKeysArray with the keys of default opened sub menusstring[]-
defaultSelectedKeysArray with the keys of default selected menu itemsstring[]-
expandIconcustom expand icon of submenuReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode-4.9.0
forceSubMenuRenderRender submenu into DOM before it becomes visiblebooleanfalse
inlineCollapsedSpecifies the collapsed status when menu is inline modeboolean-
inlineIndentIndent (in pixels) of inline menu items on each levelnumber24
itemsMenu item contentItemType[]-4.20.0
modeType of menuvertical | horizontal | inlinevertical
multipleAllows selection of multiple itemsbooleanfalse
openKeysArray with the keys of currently opened sub-menusstring[]-
overflowedIndicatorCustomized the ellipsis icon when menu is collapsed horizontallyReactNode<EllipsisOutlined />
selectableAllows selecting menu itemsbooleantrue
selectedKeysArray with the keys of currently selected menu itemsstring[]-
styleStyle of the root nodeCSSProperties-
subMenuCloseDelayDelay time to hide submenu when mouse leaves (in seconds)number0.1
subMenuOpenDelayDelay time to show submenu when mouse enters, (in seconds)number0
themeColor theme of the menulight | darklight
triggerSubMenuActionWhich action can trigger submenu open/closehover | clickhover
onClickCalled when a menu item is clickedfunction({ item, key, keyPath, domEvent })-
onDeselectCalled when a menu item is deselected (multiple mode only)function({ item, key, keyPath, selectedKeys, domEvent })-
onOpenChangeCalled when sub-menus are opened or closedfunction(openKeys: string[])-
onSelectCalled when a menu item is selectedfunction({ item, key, keyPath, selectedKeys, domEvent })-

More options in rc-menu

ItemType

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;

MenuItemType

ParamDescriptionTypeDefault valueVersion
dangerDisplay the danger stylebooleanfalse
disabledWhether menu item is disabledbooleanfalse
extraThe extra of the menu itemReactNode-5.21.0
iconThe icon of the menu itemReactNode-
keyUnique ID of the menu itemstring-
labelMenu labelReactNode-
titleSet display title for collapsed itemstring-

SubMenuType

PropertyDescriptionTypeDefault valueVersion
childrenSub-menus or sub-menu itemsItemType[]-
disabledWhether sub-menu is disabledbooleanfalse
iconIcon of sub menuReactNode-
keyUnique ID of the sub-menustring-
labelMenu labelReactNode-
popupClassNameSub-menu class name, not working when mode="inline"string-
popupOffsetSub-menu offset, not working when mode="inline"[number, number]-
themeColor theme of the SubMenu (inherits from Menu by default)light | dark-
onTitleClickCallback executed when the sub-menu title is clickedfunction({ key, domEvent })-

MenuItemGroupType

Define type as group to make as group:

ts
const groupItem = {
type: 'group', // Must have
label: 'My Group',
children: [],
};
ParamDescriptionTypeDefault valueVersion
childrenSub-menu itemsMenuItemType[]-
labelThe title of the groupReactNode-

MenuDividerType

Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Need define the type as divider:

ts
const dividerItem = {
type: 'divider', // Must have
};
ParamDescriptionTypeDefault valueVersion
dashedWhether line is dashedbooleanfalse

FAQ

Why will Menu's children be rendered twice?

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.

Why Menu do not responsive collapse in Flex layout?

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):

jsx
<div style={{ flex }}>
<div style={{ ... }}>Some Content</div>
<Menu style={{ minWidth: 0, flex: "auto" }} />
</div>

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
activeBarBorderWidthBorder width of menu item active barstring | number1
activeBarHeightHeight of menu item active barnumber2
activeBarWidthWidth of menu item active barstring | number0
collapsedIconSizeSize of icon when collapsednumber16
collapsedWidthWidth when collapsedstring | number80
dangerItemActiveBgBackground color of danger menu item when activestring#fff2f0
dangerItemColorColor of danger menu item textstring#ff4d4f
dangerItemHoverColorHover color of danger menu item textstring#ff4d4f
dangerItemSelectedBgBackground color of selected danger menu itemstring#fff2f0
dangerItemSelectedColorColor of selected danger menu item textstring#ff4d4f
darkDangerItemActiveBgBackground of active danger menu item in dark modestring#ff4d4f
darkDangerItemColorColor of danger menu item text in dark modestring#ff4d4f
darkDangerItemHoverColorBackground of hovered danger menu item in dark modestring#ff7875
darkDangerItemSelectedBgBackground of active danger menu item in dark modestring#ff4d4f
darkDangerItemSelectedColorColor of selected danger menu item in dark modestring#fff
darkGroupTitleColorColor of group title text in dark modestringrgba(255,255,255,0.65)
darkItemBgBackground of menu item in dark modestring#001529
darkItemColorColor of menu item text in dark modestringrgba(255,255,255,0.65)
darkItemDisabledColorColor of disabled menu item in dark modestringrgba(255,255,255,0.25)
darkItemHoverBgBackground of hovered menu item in dark modestringtransparent
darkItemHoverColorColor of hovered menu item in dark modestring#fff
darkItemSelectedBgBackground of active menu item in dark modestring#1677ff
darkItemSelectedColorColor of selected menu item in dark modestring#fff
darkPopupBgThe background color of the overlay menu in dark mode.string#001529
darkSubMenuItemBgBackground of submenu item in dark modestring#000c17
dropdownWidthWidth of popup menustring | number160
groupTitleColorColor of group title textstringrgba(0,0,0,0.45)
groupTitleFontSizefont-size of group titlenumber14
groupTitleLineHeightline-height of group titlestring | number1.5714285714285714
horizontalItemBorderRadiusBorder radius of horizontal menu itemnumber0
horizontalItemHoverBgBackground color of horizontal menu item when hoverstringtransparent
horizontalItemHoverColorHover color of horizontal menu item textstring#1677ff
horizontalItemSelectedBgBackground color of horizontal menu item when selectedstringtransparent
horizontalItemSelectedColorColor of selected horizontal menu item textstring#1677ff
horizontalLineHeightLineHeight of horizontal menu itemundefined | LineHeight<string | number>46px
iconMarginInlineEndSpacing between icon and textundefined | MarginInlineEnd<string | number>10
iconSizeSize of iconnumber14
itemActiveBgBackground color of menu item when activestring#e6f4ff
itemBgstring#ffffff
itemBorderRadiusRadius of menu itemnumber8
itemColorColor of menu item textstringrgba(0,0,0,0.88)
itemDisabledColorColor of disabled menu item textstringrgba(0,0,0,0.25)
itemHeightHeight of menu itemstring | number40
itemHoverBgBackground color of menu item when hoverstringrgba(0,0,0,0.06)
itemHoverColorHover color of menu item textstringrgba(0,0,0,0.88)
itemMarginBlockmargin-block of menu itemundefined | MarginBlock<string | number>4
itemMarginInlineHorizontal margin of menu itemnumber4
itemPaddingInlinepadding-inline of menu itemundefined | PaddingInline<string | number>16
itemSelectedBgBackground color of menu item when selectedstring#e6f4ff
itemSelectedColorColor of selected menu item textstring#1677ff
popupBgBackground color of popupstring#ffffff
subMenuItemBgBackground color of sub-menu itemstringrgba(0,0,0,0.02)
subMenuItemBorderRadiusRadius of sub-menu itemnumber4
subMenuItemSelectedColorColor of submenu title when submenu has selected itemstring#1677ff
zIndexPopupz-index of popup menunumber1050
Global TokenHow to use?
Top Navigation

Horizontal top navigation menu.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Inline menu

Vertical menu with inline submenus.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Collapsed inline menu

Inline menu could be collapsed.

Here is a complete demo with sider layout.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Open current submenu only

Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Vertical menu

Submenus open as pop-ups.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Menu Themes

There are two built-in themes: light and dark. The default value is light.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Sub-menu theme

You can config SubMenu theme with theme prop to enable different theme color effect. This sample is dark for root and light for SubMenu.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Switch the menu type

Show the dynamic switching mode (between inline and vertical).

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Navigation One
  • Navigation Two
  • Navigation Three - Submenu
  • Navigation Four - Link
  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
  • Navigation Three
  • Group
    • Option 13
    • Option 14
  • Option 1
  • Option 2
  • Option 3
  • Navigation One
    • Option 5
    • Option 6
    • Option 7
    • Option 8
  • Navigation Two
  • Navigation One
  • Navigation Two
    • Option 1
    • Option 2
    • Submenu
      • Option 1
      • Option 2
      • Option 3
    • Submenu 2
  • Navigation Three
  • Navigation One
  • Navigation Two
  • Navigation Three


  • Navigation One
    • Option 1
    • Option 2
    • Option 3
    • Option 4
  • Navigation Two
  • Navigation Three


  • Navigation One
  • Option 5
  • Option 6
Change Mode
Change Style

  • Navigation One
  • Navigation Two
  • Navigation Two
    • Option 3
    • Option 4
    • Submenu
  • Navigation Three
  • Ant Design