メニュー

メニューは、動的および静的な配置をサポートするナビゲーション/コマンドコンポーネントです。

インポート#


import { Menu } from 'primereact/menu';

基本#

メニューには、モデルとしてメニュー項目のコレクションが必要です。


<Menu model={items} />

グループ#


<Toast ref={toast} />
<Menu model={items} />

ポップアップ#

ポップアップモードは、popupプロパティを追加し、ターゲットのイベントでtoggleメソッドを呼び出すことで有効になります。popupAlignmentプロパティを使用すると、オーバーレイがターゲットに対してどのように配置されるかを制御できます。


<Toast ref={toast}></Toast>
<Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
<Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
<Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
<Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />

テンプレート#

カスタムコンテンツは、templateプロパティを使用してメニュー項目内に配置できます。


<Menu model={items} className="w-full md:w-15rem"  />

コマンド#

commandプロパティは、アイテムがクリックまたはキーイベントによってアクティブ化されたときに実行するコールバックを定義します。


<Menu model={items} />
<Toast ref={toast} />

ルーター#

ナビゲーションを持つアイテムは、ルーターリンクコンポーネント、外部リンク、またはプログラムによるナビゲーションを使用できるように、commandプロパティとurlプロパティで定義されます。


<Menu model={items} />

アクセシビリティ#

スクリーンリーダー

メニューコンポーネントは、menuロールを使用し、メニューを説明する値は、aria-labelledbyまたはaria-labelプロパティで提供できます。各リスト項目にはpresentationロールがあり、アンカー要素には menuitemロールがあり、アイテムのラベルを参照するaria-labelと、アイテムが無効になっている場合はaria-disabledが定義されています。メニュー内のサブメニューは、サブメニュールートのメニュー項目ラベルのIDとして定義されたaria-labelledbyを持つgroupロールを使用します。

ポップアップモードでは、コンポーネントは、ターゲットとポップアップの関係を定義するために、ターゲット要素のaria-expanded、aria-haspopup、およびaria-controls属性を暗黙的に管理します。

キーボードサポート

キー	機能
tab	フォーカスがメニューに移動した場合、最初の項目にフォーカスを追加します。フォーカスがすでにメニュー内にある場合、フォーカスはページのタブシーケンス内の次のフォーカス可能な項目に移動します。
shift + tab	フォーカスがメニューに移動した場合、最後の項目にフォーカスを追加します。フォーカスがすでにメニュー内にある場合、フォーカスはページのタブシーケンス内の前のフォーカス可能な項目に移動します。
enter	フォーカスされたメニュー項目をアクティブ化します。メニューがオーバーレイモードの場合、ポップアップが閉じ、フォーカスがターゲットに移動します。
space	フォーカスされたメニュー項目をアクティブ化します。メニューがオーバーレイモードの場合、ポップアップが閉じ、フォーカスがターゲットに移動します。
escape	メニューがオーバーレイモードの場合、ポップアップが閉じ、フォーカスがターゲットに移動します。
下矢印	フォーカスを次のメニュー項目に移動します。
上矢印	フォーカスを前のメニュー項目に移動します。
home	フォーカスを最初のメニュー項目に移動します。
end	フォーカスを最後のメニュー項目に移動します。