選單列

選單列，也稱為導覽列，是一種水平選單元件。

匯入 #


import Menubar from 'primevue/menubar';

基本 #

選單列需要一個選單項目集合作為其模型。


<Menubar :model="items" />

進階 #

選單列是一個簡單的水平導覽元件，對於進階的使用案例，請考慮 PrimeBlocks 中的行銷和應用程式導覽列，或是在應用程式範本中使用水平選單的範本。

範本 #

選單列提供使用項目範本的項目自訂功能，該範本接收模型中的選單項目執行個體作為參數。另外還提供名為開始和結束的插槽，以在選單之前或之後嵌入內容。


<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>{{ 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 ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !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>{{ 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>{{ item.label }}</span>
            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
        </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 屬性的 navigation 金鑰從地區設定 API 中取得作為 aria-label。

鍵盤支援

按鍵	功能
tab	如果焦點移入選單，則將焦點新增至第一個項目。如果焦點已在選單內，則焦點將移至頁面 tab 序列中的下一個可聚焦項目。
shift + tab	如果焦點移入選單，則將焦點新增至第一個項目。如果焦點已在選單內，則焦點將移至頁面 tab 序列中的上一個可聚焦項目。
enter	如果選單項目有子選單，則切換子選單的顯示，否則啟動選單項目並關閉所有開啟的覆蓋層。
space	如果選單項目有子選單，則切換子選單的顯示，否則啟動選單項目並關閉所有開啟的覆蓋層。
escape	如果焦點在彈出子選單內，則關閉子選單並將焦點移至已關閉子選單的根項目。
向下箭頭	如果焦點位於根元素上，則開啟子選單並將焦點移至子選單中的第一個元素，否則將焦點移至子選單中的下一個選單項目。
向上箭頭	如果焦點位於根元素上，則開啟子選單並將焦點移至子選單中的最後一個元素，否則將焦點移至子選單中的上一個選單項目。
向右箭頭	如果焦點位於根元素上，則將焦點移至下一個選單項目，否則開啟子選單（如果有），並將焦點移至第一個項目。
向左箭頭	如果焦點位於根元素上，則將焦點移至上一個選單項目，否則關閉子選單並將焦點移至已關閉子選單的根項目。
home	將焦點移至子選單中的第一個選單項目。
end	將焦點移至子選單中的最後一個選單項目。
任何可列印字元	將焦點移至標籤以正在輸入的字元開頭的選單項目。

選單列