--- title: Menu - 导航菜单 path: nav: order: 1 title: 桌面组件 path: /design group: order: 5 title: 导航 path: /nav --- ## 带菜单导航 用于功能比较复杂的中后台，可承载更多页面内容。 ## 单层侧边导航 只存在单层结构的侧边导航，点击即跳转。 ## 可分组的侧边导航 侧边导航可承载 1-3 级页面导航，并平铺展示。适用于层级较深的网站。 ## 可收起的侧边导航 在侧边导航上提供收起按钮，点击后可以将侧边栏最小化，常见于带有图标的侧边导航。 ## 可分组的侧边导航 在侧边导航上提供收起按钮，点击后可以将侧备份 ## API ### Menu | 参数 | 说明 | 类型 | 默认值 | | -------------------- | ---------------------------------------------- | -------------------------------------------------------------------------- | ---------------------- | | defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | - | | defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | - | | expandIcon | 自定义展开图标 | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | - | | forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | | inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | | inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | | items | 菜单内容 | [ItemType\[\]](#ItemType) | - | | mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` | | multiple | 是否允许多选 | boolean | false | | openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | - | | | overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode | `` | | 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({ item, key, keyPath, domEvent }) | - | | onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - | | onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   | | navigation | 是否导航模式 | boolean | false   | | leftNode | 导航模式下 menu 左边内容 | ReactNode | -   | | RightNode | 导航模式下导航右边内容 | ReactNode | -   | > 更多属性查看 [rc-menu](https://github.com/react-component/menu#api) ### ItemType > type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType); #### MenuItemType | 参数 | 说明 | 类型 | 默认值 | | -------- | ------------------------ | --------- | ------ | | danger | 展示错误状态样式 | boolean | false | | disabled | 是否禁用 | boolean | false | | icon | 菜单图标 | ReactNode | - | | key | item 的唯一标志 | string | - | | label | 菜单项标题 | ReactNode | - | | title | 设置收缩时展示的悬浮标题 | string | - | #### SubMenuType | 参数 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------------ | --------------------------- | ------ | | children | 子菜单的菜单项 | [ItemType\[\]](#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` | - | #### MenuItemGroupType 定义类型为 `group` 时，会作为分组处理: ```ts const groupItem = { type: 'group', // Must have label: 'My Group', children: [], }; ``` | 参数 | 说明 | 类型 | 默认值 | | -------- | ------------ | --------------------------------- | ------ | | children | 分组的菜单项 | [MenuItemType\[\]](#MenuItemType) | - | | label | 分组标题 | ReactNode | - | #### MenuDividerType 菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`： ```ts const dividerItem = { type: 'divider', // Must have }; ``` | 参数 | 说明 | 类型 | 默认值 | | ------ | -------- | ------- | ------ | | dashed | 是否虚线 | boolean | false | ## FAQ ### 为何 Menu 的子元素会渲染两次？ Menu 通过[二次渲染](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543)收集嵌套结构信息以支持 HOC 的结构。合并成一个推导结构会使得逻辑变得十分复杂，欢迎 PR 以协助改进该设计。