面包屑

面包屑提供关于页面层次结构的上下文信息。

导入 #


import Breadcrumb from 'primevue/breadcrumb';

基本 #

面包屑需要一个菜单项集合作为其模型，根项使用home属性定义。


<Breadcrumb :home="home" :model="items" />

模板 #

可以使用item模板将自定义内容放置在项目内部。项目之间的分隔符有其自己的separator模板。


<Breadcrumb :home="home" :model="items">
    <template #item="{ item }">
        <a class="cursor-pointer" :href="item.url">
            <span :class="item.icon"></span>
        </a>
    </template>
    <template #separator> / </template>
</Breadcrumb>

路由器 #

带有导航的项目使用模板定义，以便能够使用路由器链接组件、外部链接或程序化导航。


<Breadcrumb :home="home" :model="items">
    <template #item="{ item, props }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a :href="href" v-bind="props.action" @click="navigate">
                <span :class="[item.icon, 'text-color']" />
                <span class="text-primary font-semibold">{{ item.label }}</span>
            </a>
        </router-link>
        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
            <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
        </a>
    </template>
</Breadcrumb>

可访问性 #

屏幕阅读器

面包屑使用nav元素，并且由于任何属性都隐式传递给根元素，因此可以使用aria-labelledby或aria-label来描述该组件。在内部使用有序列表，其中列表项分隔符具有aria-hidden属性，以便屏幕阅读器忽略它们。如果最后一个链接表示当前路由，则会添加aria-current属性，其值为“page”。

键盘支持

不需要特殊的键盘交互，所有菜单项都可以基于页面选项卡顺序进行聚焦。

面包屑