Ant Design Menu 内联模式inline完全指南垂直菜单与内嵌子菜单的实战解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 的 Menu 组件中modeinline是最常用的垂直菜单形态所有子菜单以内嵌展开的方式显示在菜单区域内部而不是像vertical模式那样以浮层弹出。本文以仓库中的 inline 示例 为主线完整讲解内联模式的数据结构、核心 API、折叠交互与底层实现原理帮助你快速搭建可复用的后台侧边导航。一、示例文档与运行效果components/menu/demo/inline.md对示例的描述极为精炼中文说明垂直菜单子菜单内嵌在菜单区域。英文说明Vertical menu with inline submenus.这两句话正是 inline 模式的核心语义菜单整体呈垂直排列二级及以上子菜单通过**上下展开展开/收起动画**内嵌于当前菜单区域中不脱离父容器。对应的可运行示例代码位于 components/menu/demo/inline.tsx渲染出的效果为宽度 256px 的垂直菜单包含Navigation One / Two / Three三个一级菜单以及分组Group、分割线Divider等结构。二、完整示例代码与逐段解读以下是 inline.tsx 的完整实现我们分段剖析import React from react; import { AppstoreOutlined, MailOutlined, SettingOutlined } from ant-design/icons; import type { MenuProps } from antd; import { Menu } from antd; type MenuItem RequiredMenuProps[items][number]; const items: MenuItem[] [ { key: sub1, label: Navigation One, icon: MailOutlined /, children: [ { key: g1, label: Item 1, type: group, children: [ { key: 1, label: Option 1 }, { key: 2, label: Option 2 }, ]}, { key: g2, label: Item 2, type: group, children: [ { key: 3, label: Option 3 }, { key: 4, label: Option 4 }, ]}, ], }, // ... sub2 / sub3 嵌套、divider、sub4、grp ];1. items 数据驱动type 联合类型RequiredMenuProps[items][number]从 components/menu/interface.ts 中提取出ItemTypeexport type ItemTypeT extends MenuItemType MenuItemType | T // 普通菜单项 | SubMenuTypeT // 子菜单带 children | MenuItemGroupTypeT // 分组 | MenuDividerType // 分割线 | null;MenuItemType普通项除 rc-menu 原有属性外扩展了danger、icon、title见 interface.tsSubMenuType声明了children: ItemTypeT[]支持无限嵌套并扩展了icon与theme见 interface.tsMenuItemGroupType分组容器本示例中的g1、g2、grp即此类型分组标题以灰色小字呈现本身不可点击MenuDividerType分割线支持dashed虚线样式示例中的{ type: divider }即用于区隔菜单区块。2. 关键属性与交互const App: React.FC () { const onClick: MenuProps[onClick] (e) { console.log(click , e); }; return ( Menu onClick{onClick} style{{ width: 256 }} defaultSelectedKeys{[1]} defaultOpenKeys{[sub1]} modeinline items{items} / ); };属性值作用modeinlineinline声明内联垂直模式子菜单内嵌展开本示例主题items数组数据驱动的菜单结构推荐替代旧的 JSX children 写法defaultSelectedKeys{[1]}string[]初始选中的菜单项 key此处选中sub1分组下的Option 1defaultOpenKeys{[sub1]}string[]初始展开的子菜单 key首屏即展开 Navigation OneonClick(e: MenuInfo) void点击菜单项回调参数包含key、keyPath、domEvent等style{{ width: 256 }}CSSProperties常用容器宽度配合侧边布局使用注意defaultSelectedKeys/defaultOpenKeys只在首次挂载时生效后续如需受控应改用selectedKeys/openKeys并配合onOpenChange。三、inline 模式的底层实现原理1. 模式合并与校验在 components/menu/menu.tsx 中最终生效的 mode 由OverrideContext用于 Layout 场景与 props 合并而来const mergedMode overrideObj.mode || mode;开发环境下还会做两项告警校验menu.tsxinlineCollapsed只能在modeinline时使用若菜单处于Sider中应通过Sider的collapsed控制折叠而非直接传inlineCollapsed。2. 内联展开动画inline 模式的子菜单展开动画由 menu.tsx 中的defaultMotions注入const defaultMotions: MenuProps[defaultMotions] { horizontal: { motionName: ${rootPrefixCls}-slide-up }, inline: initCollapseMotion(rootPrefixCls), other: { motionName: ${rootPrefixCls}-zoom-big }, };其中inline对应initCollapseMotion来自 _util/motion这也是内联模式区别于vertical浮层弹出zoom-big与horizontal下拉slide-up的关键子菜单在当前文档流内做高度折叠动画内容原地展开、不遮挡其他区域。3. 折叠态下的图标与 Tooltip当菜单进入inlineCollapsed折叠态时MenuItem.tsx 会做特殊渲染一级菜单若无图标则显示标题首字符有图标时则隐藏文字、仅保留图标同时通过 TooltipMenuItem.tsx在悬停时展示完整标题。这些逻辑在 components/menu/tests/index.test.tsx 中有对应的 Tooltip 渲染断言。四、测试佐证defaultOpenKeys 与折叠行为仓库测试 components/menu/tests/index.test.tsx 为内联模式的多个行为提供了依据defaultOpenKeys在各模式下生效测试分别以horizontal、inline、vertical三种模式挂载defaultOpenKeys{[1]}并断言子菜单正确展开index.test.tsxinlineCollapsed切换跟随openKeys折叠时会收起子菜单、展开时恢复受控的openKeysindex.test.tsxinlineCollapsed在默认展开 key 不存在时仍正常渲染避免空指针或崩溃index.test.tsx。这些测试直接印证了子菜单内嵌在菜单区域这一语义在折叠、展开、受控/非受控状态下的稳定性。五、从 inline 出发相关能力与扩展场景理解内联模式后可顺带掌握以下同源能力均有对应 demo折叠模式 inline-collapsedinlineCollapsed将菜单收窄为仅图标列一级菜单点击或悬停时以 Tooltip/弹出层展示子菜单是后台布局中收起侧边栏的标配模式切换 switch-mode通过受控mode在vertical、horizontal、inline之间动态切换观察内嵌展开与浮层弹出的差异纯垂直浮层 vertical与 inline 外观相似但子菜单以 popup 浮层显示不占文档流空间侧边栏联动 sider-current与Layout.Sider集成将collapsed交给 Sider 管理menu 内部通过SiderContext自动同步折叠状态见 menu.tsx 的mergedInlineCollapsed合并逻辑。六、小结modeinline是 Ant Design Menu 中最贴合后台管理系统的导航形态垂直布局、子菜单内嵌展开、支持分组/分割线/无限嵌套、天然适配侧边栏折叠。通过 inline.tsx 的 items 数据驱动写法结合defaultOpenKeys/defaultSelectedKeys的初始化控制即可在数行代码内搭建出完整的侧边导航骨架深入 menu.tsx 与 SubMenu.tsx 的实现则能理解内联展开动画、折叠态渲染与 Tooltip 兜底等底层细节为定制复杂导航打好基础。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 1:23:36 · 阅读 1.2k Ant Design Menu 内联模式（inline）完全指南：垂直菜单与内嵌子菜单的实战解析
Ant Design Menu 内联模式inline完全指南垂直菜单与内嵌子菜单的实战解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 的 Menu 组件中modeinline是最常用的垂直菜单形态所有子菜单以内嵌展开的方式显示在菜单区域内部而不是像vertical模式那样以浮层弹出。本文以仓库中的 inline 示例 为主线完整讲解内联模式的数据结构、核心 API、折叠交互与底层实现原理帮助你快速搭建可复用的后台侧边导航。一、示例文档与运行效果components/menu/demo/inline.md对示例的描述极为精炼中文说明垂直菜单子菜单内嵌在菜单区域。英文说明Vertical menu with inline submenus.这两句话正是 inline 模式的核心语义菜单整体呈垂直排列二级及以上子菜单通过**上下展开展开/收起动画**内嵌于当前菜单区域中不脱离父容器。对应的可运行示例代码位于 components/menu/demo/inline.tsx渲染出的效果为宽度 256px 的垂直菜单包含Navigation One / Two / Three三个一级菜单以及分组Group、分割线Divider等结构。二、完整示例代码与逐段解读以下是 inline.tsx 的完整实现我们分段剖析import React from react; import { AppstoreOutlined, MailOutlined, SettingOutlined } from ant-design/icons; import type { MenuProps } from antd; import { Menu } from antd; type MenuItem RequiredMenuProps[items][number]; const items: MenuItem[] [ { key: sub1, label: Navigation One, icon: MailOutlined /, children: [ { key: g1, label: Item 1, type: group, children: [ { key: 1, label: Option 1 }, { key: 2, label: Option 2 }, ]}, { key: g2, label: Item 2, type: group, children: [ { key: 3, label: Option 3 }, { key: 4, label: Option 4 }, ]}, ], }, // ... sub2 / sub3 嵌套、divider、sub4、grp ];1. items 数据驱动type 联合类型RequiredMenuProps[items][number]从 components/menu/interface.ts 中提取出ItemTypeexport type ItemTypeT extends MenuItemType MenuItemType | T // 普通菜单项 | SubMenuTypeT // 子菜单带 children | MenuItemGroupTypeT // 分组 | MenuDividerType // 分割线 | null;MenuItemType普通项除 rc-menu 原有属性外扩展了danger、icon、title见 interface.tsSubMenuType声明了children: ItemTypeT[]支持无限嵌套并扩展了icon与theme见 interface.tsMenuItemGroupType分组容器本示例中的g1、g2、grp即此类型分组标题以灰色小字呈现本身不可点击MenuDividerType分割线支持dashed虚线样式示例中的{ type: divider }即用于区隔菜单区块。2. 关键属性与交互const App: React.FC () { const onClick: MenuProps[onClick] (e) { console.log(click , e); }; return ( Menu onClick{onClick} style{{ width: 256 }} defaultSelectedKeys{[1]} defaultOpenKeys{[sub1]} modeinline items{items} / ); };属性值作用modeinlineinline声明内联垂直模式子菜单内嵌展开本示例主题items数组数据驱动的菜单结构推荐替代旧的 JSX children 写法defaultSelectedKeys{[1]}string[]初始选中的菜单项 key此处选中sub1分组下的Option 1defaultOpenKeys{[sub1]}string[]初始展开的子菜单 key首屏即展开 Navigation OneonClick(e: MenuInfo) void点击菜单项回调参数包含key、keyPath、domEvent等style{{ width: 256 }}CSSProperties常用容器宽度配合侧边布局使用注意defaultSelectedKeys/defaultOpenKeys只在首次挂载时生效后续如需受控应改用selectedKeys/openKeys并配合onOpenChange。三、inline 模式的底层实现原理1. 模式合并与校验在 components/menu/menu.tsx 中最终生效的 mode 由OverrideContext用于 Layout 场景与 props 合并而来const mergedMode overrideObj.mode || mode;开发环境下还会做两项告警校验menu.tsxinlineCollapsed只能在modeinline时使用若菜单处于Sider中应通过Sider的collapsed控制折叠而非直接传inlineCollapsed。2. 内联展开动画inline 模式的子菜单展开动画由 menu.tsx 中的defaultMotions注入const defaultMotions: MenuProps[defaultMotions] { horizontal: { motionName: ${rootPrefixCls}-slide-up }, inline: initCollapseMotion(rootPrefixCls), other: { motionName: ${rootPrefixCls}-zoom-big }, };其中inline对应initCollapseMotion来自 _util/motion这也是内联模式区别于vertical浮层弹出zoom-big与horizontal下拉slide-up的关键子菜单在当前文档流内做高度折叠动画内容原地展开、不遮挡其他区域。3. 折叠态下的图标与 Tooltip当菜单进入inlineCollapsed折叠态时MenuItem.tsx 会做特殊渲染一级菜单若无图标则显示标题首字符有图标时则隐藏文字、仅保留图标同时通过 TooltipMenuItem.tsx在悬停时展示完整标题。这些逻辑在 components/menu/tests/index.test.tsx 中有对应的 Tooltip 渲染断言。四、测试佐证defaultOpenKeys 与折叠行为仓库测试 components/menu/tests/index.test.tsx 为内联模式的多个行为提供了依据defaultOpenKeys在各模式下生效测试分别以horizontal、inline、vertical三种模式挂载defaultOpenKeys{[1]}并断言子菜单正确展开index.test.tsxinlineCollapsed切换跟随openKeys折叠时会收起子菜单、展开时恢复受控的openKeysindex.test.tsxinlineCollapsed在默认展开 key 不存在时仍正常渲染避免空指针或崩溃index.test.tsx。这些测试直接印证了子菜单内嵌在菜单区域这一语义在折叠、展开、受控/非受控状态下的稳定性。五、从 inline 出发相关能力与扩展场景理解内联模式后可顺带掌握以下同源能力均有对应 demo折叠模式 inline-collapsedinlineCollapsed将菜单收窄为仅图标列一级菜单点击或悬停时以 Tooltip/弹出层展示子菜单是后台布局中收起侧边栏的标配模式切换 switch-mode通过受控mode在vertical、horizontal、inline之间动态切换观察内嵌展开与浮层弹出的差异纯垂直浮层 vertical与 inline 外观相似但子菜单以 popup 浮层显示不占文档流空间侧边栏联动 sider-current与Layout.Sider集成将collapsed交给 Sider 管理menu 内部通过SiderContext自动同步折叠状态见 menu.tsx 的mergedInlineCollapsed合并逻辑。六、小结modeinline是 Ant Design Menu 中最贴合后台管理系统的导航形态垂直布局、子菜单内嵌展开、支持分组/分割线/无限嵌套、天然适配侧边栏折叠。通过 inline.tsx 的 items 数据驱动写法结合defaultOpenKeys/defaultSelectedKeys的初始化控制即可在数行代码内搭建出完整的侧边导航骨架深入 menu.tsx 与 SubMenu.tsx 的实现则能理解内联展开动画、折叠态渲染与 Tooltip 兜底等底层细节为定制复杂导航打好基础。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考