logoNamu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
1.0.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • 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二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
开发者注意事项
代码演示
顶部导航
内嵌菜单
缩起内嵌菜单
只展开当前父级菜单
垂直菜单
主题
子菜单主题
切换菜单类型
API
Menu
ItemType
FAQ
为何 Menu 的子元素会渲染两次？
在 Flex 布局中，Menu 没有按照预期响应式省略菜单？
Design Token

Menu
导航菜单

    • Dropdown下拉菜单Pagination分页

    相关资源

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    ahooks-React Hooks 库
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design 语雀专栏
    Namu Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Namu Design 开源社区

    为页面和功能提供导航的菜单列表。

    何时使用

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

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

    开发者注意事项

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

    代码演示

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

    水平的顶部导航菜单。

    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
    内嵌菜单

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

    expand codeexpand code
    • Option 1
    • Option 2
    • Option 3
    • Navigation One
      • Option 5
      • Option 6
      • Option 7
      • Option 8
    • Navigation Two
    缩起内嵌菜单

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

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

    expand codeexpand code
    • Navigation One
      • Option 1
      • Option 2
      • Option 3
      • Option 4
    • Navigation Two
    • Navigation Three
    只展开当前父级菜单

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

    expand codeexpand code
    • Navigation One
    • Navigation Two
    • Navigation Three
    垂直菜单

    子菜单是弹出的形式。

    expand codeexpand code


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

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

    expand codeexpand code


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

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

    expand codeexpand code
    Change Mode
    Change Style

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

    展示动态切换模式。

    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
    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 时，会作为分组处理:

    const groupItem = {
      type: 'group', // Must have
      label: 'My Group',
      children: [],
    };
    参数说明类型默认值版本
    children分组的菜单项MenuItemType[]-
    label分组标题ReactNode-

    MenuDividerType

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

    const dividerItem = {
      type: 'divider', // Must have
    };
    参数说明类型默认值版本
    dashed是否虚线booleanfalse

    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

    组件 Token

    全局 Token