Menu 菜单

何时使用

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

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

开发者注意事项

• Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。

代码演示

顶部导航

loading

内嵌菜单

loading

缩起内嵌菜单

loading

只展开当前父级菜单

loading

垂直菜单

loading

主题

loading

子菜单主题

loading

API

Menu

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

更多属性查看 @rc-component/menu

ItemType

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;

MenuItemType

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

SubMenuType

参数	说明	类型	默认值	版本
children	子菜单的菜单项	ItemType[]	-
disabled	是否禁用	boolean	false
icon	菜单图标	VNode	-
key	唯一标志	string	-
label	菜单项标题	VNode	-
popupClassName	子菜单样式，mode="inline" 时无效	string	-
popupOffset	子菜单偏移量，mode="inline" 时无效	[number, number]	-
onTitleClick	点击子菜单标题	function({ key, domEvent })	-
theme	设置子菜单的主题，默认从 Menu 上继承	light | dark	-
popupRender	自定义当前子菜单的弹出框	(node: VNode, props: { item: SubMenuProps; keys: string[] }) => VNode	-

MenuItemGroupType

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

const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
  children: [],
};

参数	说明	类型	默认值	版本
children	分组的菜单项	MenuItemType[]	-
label	分组标题	VNode	-

MenuDividerType

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

const dividerItem = {
  type: 'divider', // Must have
};

参数	说明	类型	默认值	版本
dashed	是否虚线	boolean	false

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