メニュー

メニューは項目を垂直方向に一覧表示します。

インポート #


import Menu from 'primevue/menu';

基本 #

メニューは、モデルとしてメニューアイテムのコレクションを必要とします。


<Menu :model="items" />

グループ #

メニューは、itemsプロパティで子要素を定義することで、単一レベルのグループ化をサポートします。


<Menu :model="items" />

ポップアップ #

オーバーレイモードは、popupプロパティを追加し、ターゲットのイベントでメニューrefのtoggle関数を呼び出すことで有効になります。


<Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />

テンプレート #

メニューは、itemテンプレートを使用してアイテムのカスタマイズを提供します。このテンプレートは、モデルからメニューアイテムインスタンスをパラメーターとして受け取ります。サブメニューラベルには独自のsubmenulabelテンプレートがあり、startとendという名前の追加スロットが提供され、メニューの前後にコンテンツを埋め込むことができます。


<Menu :model="items" class="w-full md:w-60">
    <template #start>
        <span class="inline-flex items-center gap-1 px-2 py-2">
            <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>
            <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
        </span>
    </template>
    <template #submenulabel="{ item }">
        <span class="text-primary font-bold">{{ item.label }}</span>
    </template>
    <template #item="{ item, props }">
        <a v-ripple class="flex items-center" v-bind="props.action">
            <span :class="item.icon" />
            <span>{{ item.label }}</span>
            <Badge v-if="item.badge" class="ml-auto" :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>
        </a>
    </template>
    <template #end>
        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
            <span class="inline-flex flex-col items-start">
                <span class="font-bold">Amy Elsner</span>
                <span class="text-sm">Admin</span>
            </span>
        </button>
    </template>
</Menu>

コマンド #

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


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

ルーター #

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


<Menu :model="items">
    <template #item="{ item, props }">
        <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>
        </a>
    </template>
</Menu>

アクセシビリティ #

スクリーンリーダー

メニューコンポーネントはmenuロールを使用し、メニューを記述する値は、aria-labelledbyまたはaria-labelプロップで提供できます。各リストアイテムにはmenuitemロールがあり、aria-labelはアイテムのラベルを参照し、aria-disabledはアイテムが無効な場合に定義されます。

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

キーボードサポート

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