TieredMenu

TieredMenuは、ネストされたオーバーレイにサブメニューを表示します。

インポート#


import { TieredMenu } from 'primereact/tieredmenu';

基本#

TieredMenuは、modelとしてメニュー項目のコレクションを必要とします。


<TieredMenu model={items} breakpoint="767px" />

ポップアップ#

ポップアップモードは、popupプロパティを追加し、ターゲットのイベントでtoggleメソッドを呼び出すことで有効になります。


<TieredMenu model={items} popup ref={menu} breakpoint="767px" />
<Button label="Show" onClick={(e) => menu.current.toggle(e)} />

テンプレート#

TieredMenuは、アイテムのインスタンスを受け取り、要素を返すアイテムのtemplateプロパティでアイテムのカスタマイズを提供します。


<TieredMenu model={items} breakpoint="767px" />

コマンド#

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


<Toast ref={toast} />
<TieredMenu model={items} breakpoint="767px" />

ルーター#

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


<TieredMenu model={items} breakpoint="767px" />

アクセシビリティ#

スクリーンリーダー

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

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

キーボードサポート

キー	機能
tab	フォーカスがメニューに移動した場合、最初の項目にフォーカスを追加します。フォーカスがすでにメニュー内にある場合、フォーカスはページタブシーケンス内の次のフォーカス可能な項目に移動します。
shift + tab	フォーカスがメニューに移動した場合、最後の項目にフォーカスを追加します。フォーカスがすでにメニュー内にある場合、フォーカスはページタブシーケンス内の前のフォーカス可能な項目に移動します。
enter	メニュー項目にサブメニューがある場合は、サブメニューの表示を切り替えます。それ以外の場合は、メニュー項目をアクティブ化し、開いているすべてのオーバーレイを閉じます。
space	メニュー項目にサブメニューがある場合は、サブメニューの表示を切り替えます。それ以外の場合は、メニュー項目をアクティブ化し、開いているすべてのオーバーレイを閉じます。
escape	フォーカスがポップアップサブメニュー内にある場合は、サブメニューを閉じ、フォーカスを閉じたサブメニューのルート項目に移動します。
下矢印	フォーカスをサブメニュー内の次のメニュー項目に移動します。
上矢印	フォーカスをサブメニュー内の前のメニュー項目に移動します。
右矢印	利用可能なサブメニューがある場合は開き、フォーカスを最初の項目に移動します。
左矢印	サブメニューを閉じ、フォーカスを閉じたサブメニューのルート項目に移動します。
home	フォーカスをサブメニュー内の最初のメニュー項目に移動します。
end	フォーカスをサブメニュー内の最後のメニュー項目に移動します。
印刷可能な文字	ラベルが入力された文字で始まるメニュー項目にフォーカスを移動します。