菜单栏

菜单栏，也称为导航栏，是一种水平菜单组件。

导入 #


import Menubar from 'primevue/menubar';

基本 #

菜单栏需要一个菜单项的集合作为其模型。


<Menubar :model="items" />

高级 #

菜单栏是一个简单的水平导航组件，对于高级用例，请考虑 PrimeBlocks 中的营销和应用程序导航栏，或应用程序模板中带有水平菜单的模板。

模板 #

菜单栏使用item模板提供项自定义，该模板接收模型中的菜单项实例作为参数。提供了名为start和end的附加插槽，用于在菜单之前或之后嵌入内容。


<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-label 或 aria-labelledby，默认情况下使用 locale API 中 aria 属性的 navigation 键作为 aria-label。

键盘支持

按键	功能
tab	如果焦点移入菜单，则将焦点添加到第一项。如果焦点已在菜单中，则焦点将移动到页面选项卡序列中的下一个可聚焦项。
shift + tab	如果焦点移入菜单，则将焦点添加到第一项。如果焦点已在菜单中，则焦点将移动到页面选项卡序列中的上一个可聚焦项。
enter	如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的叠加层。
空格键	如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的叠加层。
escape	如果焦点在弹出子菜单内，则关闭子菜单并将焦点移动到已关闭子菜单的根项。
向下箭头	如果焦点在根元素上，则打开子菜单并将焦点移动到子菜单中的第一个元素，否则将焦点移动到子菜单内的下一个菜单项。
向上箭头	如果焦点在根元素上，则打开子菜单并将焦点移动到子菜单中的最后一个元素，否则将焦点移动到子菜单内的上一个菜单项。
向右箭头	如果焦点在根元素上，则将焦点移动到下一个菜单项，否则打开子菜单（如果有）并将焦点移动到第一项。
向左箭头	如果焦点在根元素上，则将焦点移动到上一个菜单项，否则关闭子菜单并将焦点移动到已关闭子菜单的根项。
home	将焦点移动到子菜单内的第一个菜单项。
end	将焦点移动到子菜单内的最后一个菜单项。
任何可打印字符	将焦点移动到标签以正在键入的字符开头的菜单项。

菜单栏