Menu

何时使用 {#when-to-use}

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

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

开发者注意事项 {#notes-for-developers}

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

代码演示 {#examples}

<code src="./demo/horizontal.tsx">顶部导航</code> <code src="./demo/horizontal-dark.tsx" debug>顶部导航（dark）</code> <code src="./demo/inline.tsx">内嵌菜单</code> <code src="./demo/inline-collapsed.tsx">缩起内嵌菜单</code> <code src="./demo/tooltip.tsx">菜单项提示</code> <code src="./demo/sider-current.tsx">只展开当前父级菜单</code> <code src="./demo/vertical.tsx">垂直菜单</code> <code src="./demo/theme.tsx">主题</code> <code src="./demo/submenu-theme.tsx">子菜单主题</code> <code src="./demo/switch-mode.tsx">切换菜单类型</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/style-debug.tsx" debug>Style debug</code> <code src="./demo/menu-v4.tsx" debug>v4 版本 Menu</code> <code src="./demo/component-token.tsx" debug>组件 Token</code> <code src="./demo/extra-style.tsx" debug>Extra Style debug</code> <code src="./demo/custom-popup-render.tsx">自定义弹出框</code> <code src="./demo/collapsed-icon-debug.tsx" debug>折叠菜单 icon 对齐</code>

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-
defaultOpenKeys	初始展开的 SubMenu 菜单项 key 数组	string[]	-
defaultSelectedKeys	初始选中的菜单项 key 数组	string[]	-
expandIcon	自定义展开图标	ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode`	-	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 水平空间不足时的省略收缩的图标	ReactNode	`<EllipsisOutlined />`
selectable	是否允许选中	boolean	true
selectedKeys	当前选中的菜单项 key 数组	string[]	-
style	根节点样式	CSSProperties	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM , CSSProperties> \| (info: { props }) => Record<SemanticDOM , CSSProperties>	-
subMenuCloseDelay	用户鼠标离开子菜单后关闭延时，单位：秒	number	0.1
subMenuOpenDelay	用户鼠标进入子菜单后开启延时，单位：秒	number	0
tooltip	配置 inline 折叠时的 MenuItem 悬浮提示，设为 `false` 可关闭	false \| TooltipProps	-	6.3.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: ReactElement, props: { item: SubMenuProps; keys: string[] }) => ReactElement	-

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

ItemType

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;

MenuItemType

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

SubMenuType

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

MenuItemGroupType

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

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

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

MenuDividerType

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

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

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

FAQ

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

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

jsx

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

Semantic DOM

主题变量（Design Token）{#design-token}