Breadcrumbは、ページ階層に関するコンテキスト情報を提供します。
import Breadcrumb from 'primevue/breadcrumb';
Breadcrumbは、modelとしてmenuitemsのコレクションを必要とします。ルートアイテムは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>
Breadcrumbはnav要素を使用し、属性は暗黙的にルートに渡されるため、コンポーネントを説明するためにaria-labelledbyまたはaria-labelを使用できます。順序付きリストが使用され、リスト項目の区切り文字には、スクリーンリーダーによって無視されるようにaria-hiddenが設定されています。最後のリンクが現在のルートを表す場合、aria-currentが「page」という値で追加されます。
特別なキーボード操作は必要ありません。すべてのメニューアイテムは、ページのタブシーケンスに基づいてフォーカス可能です。