麵包屑

麵包屑提供關於頁面階層的上下文資訊。

匯入 #


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"。

鍵盤支援

不需要特殊的鍵盤互動，所有選單項目都可根據頁面的 Tab 鍵順序聚焦。

麵包屑