MegaMenu

MegaMenuはサブメニューをまとめて表示するナビゲーションコンポーネントです。

インポート#


import { MegaMenu } from 'primereact/megamenu';

基本#

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


<MegaMenu model={items}  breakpoint="960px" />

垂直#

MegaMenuのレイアウトは、orientationプロパティで変更され、horizontalとverticalをオプションとして受け入れます。


<MegaMenu model={items} orientation="vertical" breakpoint="960px" />

テンプレート#

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


<MegaMenu model={items} orientation="horizontal" start={start} end={end} breakpoint="960px" className="p-3 surface-0 shadow-2" style={{ borderRadius: '3rem' }} />

コマンド#

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


{
    label: 'Log out',
    icon: 'pi pi-signout',
    command: () => {
        // Callback to run
    }
}

ルーター#

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


{
    label: 'Log out',
    icon: 'pi pi-signout',
    url: 'https://www.react.dev/',
    command: () => {
        router.push('/installation');
    }
}

アクセシビリティ#

スクリーンリーダー

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

キーボードサポート

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