メニューバー

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

インポート # 


import Menubar from 'primevue/menubar';

基本 #

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


<Menubar :model="items" />

テンプレート #

メニューバーは、アイテムテンプレートを使用して項目のカスタマイズを提供します。このテンプレートは、モデルからメニュー項目インスタンスをパラメーターとして受け取ります。メニューの前または後にコンテンツを埋め込むために、開始と終了という名前の追加スロットが提供されています。


<Menubar :model="items">
    <template #start>
        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
            <path d="..." fill="var(--p-primary-color)" />
            <path d="..." fill="var(--p-text-color)" />
        </svg>
    </template>
    <template #item="{ item, props, hasSubmenu, root }">
        <a v-ripple class="flex items-center" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
            <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
            <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
        </a>
    </template>
    <template #end>
        <div class="flex items-center gap-2">
            <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
        </div>
    </template>
</Menubar>

コマンド #

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


<Menubar :model="items" />
<Toast />

ルーター #

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


<Menubar :model="items">
    <template #item="{ item, props, hasSubmenu }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                <span :class="item.icon" />
                <span class="ml-2">{{ item.label }}</span>
            </a>
        </router-link>
        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
        </a>
    </template>
</Menubar>

アクセシビリティ #

スクリーンリーダー

メニューバーコンポーネントはmenubarロールを使用し、メニューを記述する値は、aria-labelledbyまたはaria-labelプロップを使用して提供できます。各リスト項目にはmenuitemロールがあり、aria-labelは項目のラベルを参照し、aria-disabledは項目が無効かどうかを定義します。メニューバー内のサブメニューは、menuロールを使用し、aria-labelledbyはサブメニューのルートメニュー項目ラベルのIDとして定義されます。さらに、サブメニューを開くメニュー項目には、aria-haspopup、aria-expanded、aria-controlsがあり、項目とサブメニュー間の関係を定義します。

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

キーボードサポート

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