收纳、排列并展示一系列选项的列表。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 顶部导航菜单：设置
mode 为 horizontal 时，使用水平菜单。
- 深色模式导航：通过
theme 指定主题，分为 light 和 dark 两种。
- 缩起内嵌菜单：通过
collapse 来指定菜单收起。通过 renderItemInTooltip 指定菜单收起时，Tooltip 中展示的菜单项内容。
- 内嵌菜单：菜单内可以嵌入多个子项，通过
defaultOpenKeys 可以设置默认打开的子项。
- 不同大小菜单：通过
style 自由指定菜单的宽度和菜单项的高度。
- 悬浮菜单：指定
mode 为 pop 可以使用悬浮菜单。
- 悬浮按钮菜单：指定
mode 为 popButton 使用按钮组样式的悬浮菜单。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|
| accordion | 开启手风琴效果 | boolean | - | - |
| autoOpen | 默认展开所有多级菜单 | boolean | - | - |
| autoScrollIntoView | 是否自动滚动选中项目到可见区域 | boolean | - | - |
| collapse | 是否水平折叠收起菜单 | boolean | - | - |
| hasCollapseButton | 是否内置折叠按钮 | boolean | - | - |
| selectable | 菜单选项是否可选 | boolean | true | - |
| levelIndent | 层级之间的缩进量 | number | - | - |
| mode | 菜单类型，目前支持垂直（vertical）、水平菜单（horizontal）、弹出（pop） | 'vertical' | 'horizontal' | 'pop' | 'popButton' | vertical | - |
| theme | 菜单风格 | 'light' | 'dark' | light | - |
| className | 节点类名 | string | string[] | - | - |
| defaultOpenKeys | 初始展开的子菜单 key 数组 | string[] | - | - |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | - |
| ellipsis | 水平菜单是否自动溢出省略 | | boolean| {text?: ReactNode;} | true | 2.24.0 |
| icons | 用于定制图标 | {horizontalArrowDown?: ReactNode | null;popArrowRight?: ReactNode | null;collapseDefault?: ReactNode | null;collapseActive?: ReactNode | null;} | - | - |
| openKeys | 展开的子菜单 key 数组（受控模式） | string[] | - | - |
| scrollConfig | 滚动到可见区域的配置项，接收所有scroll-into-view-if-needed的参数 | { [key: string]: any } | - | - |
| selectedKeys | 选中的菜单项 key 数组（受控模式） | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| tooltipProps | 弹出模式下可接受所有 ToolTip 的 Props | Partial<TooltipProps> | - | - |
| triggerProps | 弹出模式下可接受所有 Trigger 的 Props | Partial<TriggerProps> | - | - |
| onClickMenuItem | 点击菜单项的回调 | (key: string, event, keyPath: string[]) => any | - | event in 2.15.0, keyPath in 2.19.0 |
| onClickSubMenu | 点击子菜单标题的回调 | (key: string, openKeys: string[], keyPath: string[]) => void | - | keyPath in 2.19.0 |
| onCollapseChange | 折叠状态改变时的回调 | (collapse: boolean) => void | - | - |
| onEllipsisChange | 水平菜单自动超出省略发生变化时的回调 | (status: { lastVisibleIndex: number; overflowNodes: ReactNode[] }) => void | - | 2.57.0 |
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|
| selectable | 是否将多级菜单头也作为一个菜单项，支持点击选中等状态。 | boolean | - | - |
| key | 唯一标志 | string (必填) | - | - |
| title | 子菜单的标题 | string | ReactNode | - | - |
| className | 节点类名 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| triggerProps | 弹出模式下可接受所有 Trigger 的 Props | Partial<TriggerProps> | - | 2.19.0 |
| popup | 是否强制使用弹出模式，level 表示当前子菜单的层级 | boolean | ((level: number) => boolean) | - | 2.8.0 |
| 参数名 | 描述 | 类型 | 默认值 |
|---|
| title | 菜单组的标题 | string | ReactNode | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|
| disabled | 菜单项禁止选中 | boolean | - | - |
| key | 唯一标志 | string (必填) | - | - |
| className | 节点类名 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| wrapper | 配置最外层标签，可以是 html 标签或是组件 | string | React.FC<any> | React.ComponentClass<any> | div | 2.16.0 |
| renderItemInTooltip | 菜单折叠时，指定在 Tooltip 中展示的菜单项节点 | () => ReactNode | - | 2.51.0 |
