> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu 菜单

> Menu 菜单组件使用文档，涵盖顶部导航与侧边导航的配置方式、属性说明及示例，构建页面间跳转的导航结构。

## 何时使用

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

## 组件示例

<iframe src="https://www.aliwork.com/developer/menu-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性            | 说明               | 类型                                                                      | 默认值                                                                                                                                                                                                                                                                                                                                                        |
| ------------- | ---------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dataSource`  | 菜单的数据源           | [MenuDataSource\[\]](/zh/open/yida/components/interface#menudatasource) | `[ { label: "菜单项一", key: "key1", children: [ { label: "选项一", key: "key1-1", tag: { text: "初始化", color: "blue", }, }, { label: "选项二", key: "key1-2", }, ], }, { isDivider: true, }, { label: "菜单项二", key: "key2", children: [ { label: "选项一", key: "key2-1", }, { label: "选项二", key: "key2-2", }, ], }, { label: "菜单项三", key: "key3", disabled: true, }, ]` |
| `direction`   | 菜单第一层展示方向        | `'ver' \| 'hoz'`                                                        | -                                                                                                                                                                                                                                                                                                                                                          |
| `footer`      | 自定义菜单尾部          | `string`                                                                | -                                                                                                                                                                                                                                                                                                                                                          |
| `header`      | 自定义菜单头部          | `string`                                                                | -                                                                                                                                                                                                                                                                                                                                                          |
| `mode`        | 设置子菜单打开的模式       | `'inline' \| 'popup'`                                                   | `inline`                                                                                                                                                                                                                                                                                                                                                   |
| `onItemClick` | 点击菜单项触发的事件       | `(key: string,item: MenuDataSource, event: any) => void`                | -                                                                                                                                                                                                                                                                                                                                                          |
| `onSelect`    | 选中或取消选中菜单项时触发的事件 | `(selectedKeys: string[] ,extraObj: any) => void`                       | -                                                                                                                                                                                                                                                                                                                                                          |
| `popupAlign`  | 弹层的对齐方式          | `'follow' \| 'outside'`                                                 | `'follow'`                                                                                                                                                                                                                                                                                                                                                 |
| `selectMode`  | 菜单组件的选择模式        | `'single' \| 'multiple' \| false`                                       | `false`                                                                                                                                                                                                                                                                                                                                                    |
| `triggerType` | 设置子菜单打开的触发行为     | `'click' \| 'hover'`                                                    | `'click'`                                                                                                                                                                                                                                                                                                                                                  |