logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • 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

Menu
导航菜单

为页面和功能提供导航的菜单列表。
使用import { Menu } from "antd";
源码components/menu
文档
编辑此页更新日志

相关资源

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
Twitter
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-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

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

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

开发者注意事项

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

代码演示

  • Navigation One
  • Navigation Two
  • Navigation Three - Submenu
  • Navigation Four - Link
顶部导航

水平的顶部导航菜单。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
  • Navigation Three
  • Group
    • Option 13
    • Option 14
内嵌菜单

垂直菜单,子菜单内嵌在菜单区域。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
  • Option 1
  • Option 2
  • Option 3
  • Navigation One
    • Option 5
    • Option 6
    • Option 7
    • Option 8
  • Navigation Two
缩起内嵌菜单

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

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

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
  • Navigation One
  • Navigation Two
    • Option 1
    • Option 2
    • Submenu
      • Option 1
      • Option 2
      • Option 3
    • Submenu 2
  • Navigation Three
只展开当前父级菜单

点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
  • Navigation One
  • Navigation Two
  • Navigation Three
垂直菜单

子菜单是弹出的形式。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code


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

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

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code


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

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

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Change Mode
Change Style

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

展示动态切换模式。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

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横向菜单行高undefined | LineHeight<string | number>46px
iconMarginInlineEnd图标与文字间距undefined | MarginInlineEnd<string | number>10
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菜单项纵向外间距undefined | MarginBlock<string | number>4
itemMarginInline菜单项横向外间距number4
itemPaddingInline菜单项横向内间距undefined | PaddingInline<string | number>16
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如何定制?