logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.27.5
  • 组件总览
  • 更新日志
    v5.27.5
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • 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树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0
何时使用
开发者注意事项
代码演示
顶部导航
内嵌菜单
缩起内嵌菜单
只展开当前父级菜单
垂直菜单
主题
子菜单主题
切换菜单类型
API
Menu
ItemType
FAQ
为何 Menu 的子元素会渲染两次?
在 Flex 布局中,Menu 没有按照预期响应式省略菜单?
主题变量(Design Token)

Menu
导航菜单

为页面和功能提供导航的菜单列表。
使用import { Menu } from "antd";
源码components/menu
文档
编辑此页
文档贡献者
Dropdown下拉菜单Pagination分页

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
X
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
WeaveFox logoWeaveFox-前端智能研发
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。

更多布局和导航的使用可以参考:通用布局。

开发者注意事项

  • Menu 元素为 ul,因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。
  • Menu 需要计算节点结构,因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。

代码演示

API

通用属性参考:通用属性

Menu

参数说明类型默认值版本
defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组string[]-
defaultSelectedKeys初始选中的菜单项 key 数组string[]-
expandIcon自定义展开图标ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode-4.9.0
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态boolean-
inlineIndentinline 模式的菜单缩进宽度number24
items菜单内容ItemType[]-4.20.0
mode菜单类型,现在支持垂直、水平、和内嵌模式三种vertical | horizontal | inlinevertical
multiple是否允许多选booleanfalse
openKeys当前展开的 SubMenu 菜单项 key 数组string[]-
overflowedIndicator用于自定义 Menu 水平空间不足时的省略收缩的图标ReactNode<EllipsisOutlined />
selectable是否允许选中booleantrue
selectedKeys当前选中的菜单项 key 数组string[]-
style根节点样式CSSProperties-
subMenuCloseDelay用户鼠标离开子菜单后关闭延时,单位:秒number0.1
subMenuOpenDelay用户鼠标进入子菜单后开启延时,单位:秒number0
theme主题颜色light | darklight
triggerSubMenuActionSubMenu 展开/关闭的触发行为hover | clickhover
onClick点击 MenuItem 调用此函数function({ item, key, keyPath, domEvent })-
onDeselect取消选中时调用,仅在 multiple 生效function({ item, key, keyPath, selectedKeys, domEvent })-
onOpenChangeSubMenu 展开/关闭的回调function(openKeys: string[])-
onSelect被选中时调用function({ item, key, keyPath, selectedKeys, domEvent })-  

更多属性查看 rc-menu

ItemType

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;

MenuItemType

参数说明类型默认值版本
danger展示错误状态样式booleanfalse
disabled是否禁用booleanfalse
extra额外节点ReactNode-5.21.0
icon菜单图标ReactNode-
keyitem 的唯一标志string-
label菜单项标题ReactNode-
title设置收缩时展示的悬浮标题string-

SubMenuType

参数说明类型默认值版本
children子菜单的菜单项ItemType[]-
disabled是否禁用booleanfalse
icon菜单图标ReactNode-
key唯一标志string-
label菜单项标题ReactNode-
popupClassName子菜单样式,mode="inline" 时无效string-
popupOffset子菜单偏移量,mode="inline" 时无效[number, number]-
onTitleClick点击子菜单标题function({ key, domEvent })-
theme设置子菜单的主题,默认从 Menu 上继承light | dark-

MenuItemGroupType

定义类型为 group 时,会作为分组处理:

ts
const groupItem = {
type: 'group', // Must have
label: 'My Group',
children: [],
};
参数说明类型默认值版本
children分组的菜单项MenuItemType[]-
label分组标题ReactNode-

MenuDividerType

菜单项分割线,只用在弹出菜单内,需要定义类型为 divider:

ts
const dividerItem = {
type: 'divider', // Must have
};
参数说明类型默认值版本
dashed是否虚线booleanfalse

FAQ

为何 Menu 的子元素会渲染两次?

Menu 通过二次渲染收集嵌套结构信息以支持 HOC 的结构。合并成一个推导结构会使得逻辑变得十分复杂,欢迎 PR 以协助改进该设计。

在 Flex 布局中,Menu 没有按照预期响应式省略菜单?

Menu 初始化时会先全部渲染,然后根据宽度裁剪内容。当处于 Flex 布局中,你需要告知其预期宽度为响应式宽度(在线 Demo):

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

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
activeBarBorderWidth菜单项指示条边框宽度string | number1
activeBarHeight菜单项指示条高度number2
activeBarWidth菜单项指示条宽度string | number0
collapsedIconSize收起时图标尺寸number16
collapsedWidth收起后的宽度string | number80
dangerItemActiveBg危险菜单项激活态背景色string#fff2f0
dangerItemColor危险菜单项文字颜色string#ff4d4f
dangerItemHoverColor危险菜单项文字悬浮颜色string#ff4d4f
dangerItemSelectedBg危险菜单项选中背景色string#fff2f0
dangerItemSelectedColor危险菜单项文字选中颜色string#ff4d4f
darkDangerItemActiveBg暗色模式下的危险菜单项激活态背景string#ff4d4f
darkDangerItemColor暗色模式下的危险菜单项文字颜色string#ff4d4f
darkDangerItemHoverColor暗色模式下的危险菜单项悬浮文字背景string#ff7875
darkDangerItemSelectedBg暗色模式下的危险菜单项选中背景string#ff4d4f
darkDangerItemSelectedColor暗色模式下的危险菜单项选中文字颜色string#fff
darkGroupTitleColor暗色模式下的分组标题文字颜色stringrgba(255,255,255,0.65)
darkItemBg暗色模式下的菜单项背景string#001529
darkItemColor暗色模式下的菜单项文字颜色stringrgba(255,255,255,0.65)
darkItemDisabledColor暗色模式下的菜单项禁用颜色stringrgba(255,255,255,0.25)
darkItemHoverBg暗色模式下的菜单项悬浮背景stringtransparent
darkItemHoverColor暗色模式下的菜单项悬浮颜色string#fff
darkItemSelectedBg暗色模式下的菜单项选中背景string#1677ff
darkItemSelectedColor暗色模式下的菜单项选中颜色string#fff
darkPopupBg暗色模式下的浮层菜单的背景颜色string#001529
darkSubMenuItemBg暗色模式下的子菜单项背景string#000c17
dropdownWidth弹出菜单的宽度string | number160
groupTitleColor分组标题文字颜色stringrgba(0,0,0,0.45)
groupTitleFontSize分组标题文字大小number14
groupTitleLineHeight分组标题文字高度string | number1.5714285714285714
horizontalItemBorderRadius横向菜单项圆角number0
horizontalItemHoverBg横向菜单项横悬浮态背景色stringtransparent
horizontalItemHoverColor水平菜单项文字悬浮颜色string#1677ff
horizontalItemSelectedBg水平菜单项选中态背景色stringtransparent
horizontalItemSelectedColor水平菜单项文字选中颜色string#1677ff
horizontalLineHeight横向菜单行高LineHeight<string | number> | undefined46px
iconMarginInlineEnd图标与文字间距MarginInlineEnd<string | number> | undefined10
iconSize图标尺寸number14
itemActiveBg菜单项激活态背景色string#e6f4ff
itemBg菜单项背景色string#ffffff
itemBorderRadius菜单项的圆角number8
itemColor菜单项文字颜色stringrgba(0,0,0,0.88)
itemDisabledColor菜单项文字禁用颜色stringrgba(0,0,0,0.25)
itemHeight菜单项高度string | number40
itemHoverBg菜单项悬浮态背景色stringrgba(0,0,0,0.06)
itemHoverColor菜单项文字悬浮颜色stringrgba(0,0,0,0.88)
itemMarginBlock菜单项纵向外间距MarginBlock<string | number> | undefined4
itemMarginInline菜单项横向外间距number4
itemPaddingInline菜单项横向内间距PaddingInline<string | number> | undefined16
itemSelectedBg菜单项选中态背景色string#e6f4ff
itemSelectedColor菜单项文字选中颜色string#1677ff
popupBg弹出框背景色string#ffffff
subMenuItemBg子菜单项背景色stringrgba(0,0,0,0.02)
subMenuItemBorderRadius子菜单项的圆角number4
subMenuItemSelectedColor子菜单内有选中项时,子菜单标题色string#1677ff
zIndexPopup弹出菜单的 z-indexnumber1050
全局 Token如何定制?
  • 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
缩起内嵌菜单

内嵌菜单可以被缩起/展开。

你可以在 Layout 里查看侧边布局结合的完整示例。

  • 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
主题

内建了两套主题 light 和 dark,默认 light。



  • Navigation One
  • Option 5
  • Option 6
子菜单主题

你可以通过 theme 属性来设置 SubMenu 的主题从而达到不同目录树下不同主题色的效果。该例子默认为根目录深色,子目录浅色效果。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Change Mode
Change Style

  • Navigation One
  • Navigation Two
  • Navigation Two
    • Option 3
    • Option 4
    • Submenu
  • Navigation Three
  • Ant Design
切换菜单类型

展示动态切换模式。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon