logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • 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
When To Use
Notes for developers
Examples
Top Navigation
Inline menu
Collapsed inline menu
Open current submenu only
Vertical menu
Menu Themes
Sub-menu theme
Switch the menu type
API
Menu
ItemType
FAQ
Why will Menu's children be rendered twice?
Why Menu do not responsive collapse in Flex layout?
Design Token

Menu

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

    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

    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Inline menu

    Vertical menu with inline submenus.

    CodeSandbox Icon
    codeblock
    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
    codeblock
    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Vertical menu

    Submenus open as pop-ups.

    CodeSandbox Icon
    codeblock
    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
    codeblock
    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Switch the menu type

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

    CodeSandbox Icon
    codeblock
    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