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

# メニュー

> YiDAのメニューコンポーネントの設定方法、プロパティ、使用例を解説します。トップナビゲーションとサイドナビゲーションを構築し、ページ間遷移を実現するナビゲーション構造の作成手順を紹介します。

## 使用シーン

* ナビゲーションメニューはWebサイトの要です。ユーザーはナビゲーションを頼りにページ間を移動します。一般的に、トップナビゲーションとサイドナビゲーションに分けられます。トップナビゲーションはグローバルな分類と機能を提供し、サイドナビゲーションはサイト構造を整理・配置するための多階層構造を提供します。

## コンポーネント例

## コンポーネントプロパティ

| 属性            | 説明                               | タイプ                                                                     | デフォルト                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------- | -------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dataSource`  | メニューのデータソース                      | [MenuDataSource\[\]](/ja/open/yida/components/interface#menudatasource) | `[ { label: "メニュー項目 1", key: "key1", children: [ { label: "オプション 1", key: "key1-1", tag: { text: "初期化済み", color: "blue", }, }, { label: "オプション 2", key: "key1-2", }, ], }, { isDivider: true, }, { label: "メニュー項目 2", key: "key2", children: [ { label: "オプション 1", key: "key2-1", }, { label: "オプション 2", key: "key2-2", }, ], }, { label: "メニュー項目 3", 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'`                                                                                                                                                                                                                                                                                                                                                                                |