メニュー

使用シーン

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

属性	説明	タイプ	デフォルト
`dataSource`	メニューのデータソース	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'`