メニューバー

メニューバーは、ナビゲーションバーとも呼ばれ、水平メニューコンポーネントです。

インポート#


import { Menubar } from 'primereact/menubar';

基本#

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


<Menubar model={items} />

テンプレート#

startとendプロパティを使用して、メニューバー内にカスタムコンテンツを配置できます。


<Menubar model={items} start={start} end={end} />

コマンド#

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


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

ルーター#

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


<Menubar model={items} />

アクセシビリティ#

スクリーンリーダー

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

モバイルビューポートでは、オーバーレイメニューバーとボタンの関係を管理するために、aria-haspopup、aria-expanded、およびaria-controlsを備えたbuttonロールのメニューアイコンが表示されます。ボタンを説明する値は、buttonPropsを使用して指定されたaria-labelまたはaria-labelledbyで定義できます。デフォルトでは、ロケール APIからのariaプロパティのnavigationキーが aria-label.

キーボードサポート

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