何时使用

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

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

开发者注意事项

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

代码演示

API

通用属性参考：通用属性

Menu

更多属性查看 rc-menu

ItemType

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;

MenuItemType

SubMenuType

MenuItemGroupType

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

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

MenuDividerType

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

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

FAQ

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

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

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

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

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

主题变量（Design Token）