> ## 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

> Documentation for the Menu component, covering configuration methods, properties, and examples for top and side navigation to build a page-to-page navigation structure.

## When to Use

* Navigation menus are the soul of a website. Users rely on them to move between pages. Menus are generally divided into top navigation and side navigation. Top navigation provides global categories and features, while side navigation offers a multi-level structure to organize the site architecture.

## Component Example

## Component Property

| Attribute     | Description                                                | Type                                                                 | Default                                                                                                                                                                                                                                                                                                                                                                                                     |
| ------------- | ---------------------------------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dataSource`  | Data Source of the menu                                    | [MenuDataSource\[\]](/open/yida/components/interface#menudatasource) | `[ { label: "Menu Item 1", key: "key1", children: [ { label: "Option 1", key: "key1-1", tag: { text: "Initialized", color: "blue", }, }, { label: "Option 2", key: "key1-2", }, ], }, { isDivider: true, }, { label: "Menu Item 2", key: "key2", children: [ { label: "Option 1", key: "key2-1", }, { label: "Option 2", key: "key2-2", }, ], }, { label: "Menu Item 3", key: "key3", disabled: true, }, ]` |
| `direction`   | Display direction of the first-level menu                  | `'ver' \| 'hoz'`                                                     | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `footer`      | Custom menu footer                                         | `string`                                                             | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `header`      | Custom menu header                                         | `string`                                                             | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `mode`        | Opening mode of the submenu                                | `'inline' \| 'popup'`                                                | `inline`                                                                                                                                                                                                                                                                                                                                                                                                    |
| `onItemClick` | Event triggered when a menu item is clicked                | `(key: string, item: MenuDataSource, event: any) => void`            | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `onSelect`    | Event triggered when a menu item is selected or unselected | `(selectedKeys: string[], extraObj: any) => void`                    | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `popupAlign`  | Align mode of the popup layer                              | `'follow' \| 'outside'`                                              | `'follow'`                                                                                                                                                                                                                                                                                                                                                                                                  |
| `selectMode`  | Selection mode of the Menu component                       | `'single' \| 'multiple' \| false`                                    | `false`                                                                                                                                                                                                                                                                                                                                                                                                     |
| `triggerType` | Trigger behavior for opening the submenu                   | `'click' \| 'hover'`                                                 | `'click'`                                                                                                                                                                                                                                                                                                                                                                                                   |