Breadcrumb

import { Breadcrumb } from '@bbc/front-end-kit/vue'

Accessible, flexible breadcrumb navigation component with optional Vue Router integration and customizable separators. This component was introduced to the front-end kit to enable consistent breadcrumb navigation across all projects while maintaining project-specific customization through props and slots.

Getting started

<template>
    <Breadcrumb :breadcrumb-store="breadcrumbStore" />
</template>

<script setup>
import { Breadcrumb } from '@bbc/front-end-kit/vue'
import { useBreadcrumbStore } from '@bbc/front-end-kit/vue'

const breadcrumbStore = useBreadcrumbStore()
</script>

Alternative with items prop:

<template>
    <Breadcrumb :items="items" />
</template>

<script setup>
import { Breadcrumb } from '@bbc/front-end-kit/vue'

const items = [
    { label: 'Home', to: { name: 'home' } },
    { label: 'Library', to: { name: 'library' } },
    { label: 'Data', href: '/library/data' },
]
</script>

Preview

Guidelines

• Prefer breadcrumbStore: Pass a store object containing a breadcrumbs array for centralized control. This is the recommended approach used in production projects.
• Active item: Override with activeIndex when the last item is not the current page.
• Router integration: When to is present, the item renders as router-link. Provide linkComponent to use a custom link wrapper.
• Tracking: Use getItemAttrs to add project-specific tracking attributes to each link.
• Fallback options: You can also use items prop directly or inject breadcrumbItems/breadcrumbStore for dependency injection scenarios.
• Accessibility: Component is accessible by default with proper ARIA attributes including aria-label and aria-current="page" for active items.

API

Properties

items

Array of breadcrumb items to render. Each item should include a label and either to (route) or href (URL).

Values: Array<{ label: string, to?: RouteLocationRaw, href?: string }>

Default: null

breadcrumbStore

Store object containing a breadcrumbs array. Used when items is not provided.

Each breadcrumb in the store can define label, optional to, href, or view (named route) which will be converted to { name: view }.

Values: Object | null

Default: null

separatorIcon

Vue component used between items. Defaults to a chevron right icon.

Values: Vue Component

Default: IconChevronRight

navLabel

Accessible aria-label for the breadcrumb nav element.

Values: string

Default: 'Breadcrumb'

linkComponent

Component to use for link rendering. Overrides automatic selection between router-link and a.

Values: string | Vue Component | null

Default: null

activeIndex

Index of the active item. Defaults to the last item.

Values: number

Default: -1

getItemAttrs

Callback returning extra attributes for a given item. Useful for analytics/tracking.

Signature: (item) => Record<string, any>

When not provided, a data-sp attribute is automatically generated combining the breadcrumb path and current label. For example: data-sp="{{ path }}.Products.Current Page"

Values: Function | null

Default: null

dataSpRegion

Region identifier applied to the nav via data-sp-region for Showpad tracking.

Values: string

Default: 'breadcrumb'

Slots

item

Customize how each item is rendered. Receives { item, index, isActive }.

separator

Customize the separator between items. Receives { index }.

Real-world Usage

Store-based Architecture (Recommended)

The component was designed to solve code duplication and inconsistent UX across projects. It provides a generic base that can be wrapped by project-specific UI kits while maintaining full customization capabilities.

The most common pattern uses a centralized breadcrumb store with dependency injection:

<!-- MSBreadcrumb.vue -->
<template>
    <RocheBreadcrumb />
</template>

<script setup>
import { provide } from 'vue';
import RocheBreadcrumb from "@bylt/roche.ui-kit/vue/components/RocheBreadcrumb.vue";
import { useBreadcrumbStore } from '@bbc/front-end-kit/vue';

// Provide the breadcrumb store to child components
const breadcrumbStore = useBreadcrumbStore();
provide('breadcrumbStore', breadcrumbStore);
</script>

<!-- RocheBreadcrumb.vue (roche.ui-kit wrapper) -->
<template>
    <Breadcrumb :breadcrumb-store="breadcrumbStore" />
</template>

<script setup>
import { inject } from 'vue';
import { Breadcrumb } from '@bbc/front-end-kit/vue';

const breadcrumbStore = inject('breadcrumbStore');
</script>

Route-based Breadcrumb Management

Breadcrumbs are typically managed at the router level and updated when routes change:

// router/index.js
export const routes = [
    {
        path: '/products/:name',
        name: 'product-detail',
        component: () => import('../views/ProductDetailView.vue'),
        meta: {
            breadcrumbs: [
                { label: 'Large Hospital', view: 'home' },
                { label: 'cobas® i601 analyzer', view: 'home' }
            ]
        }
    }
]

<!-- MSHeader.vue -->
<script setup>
import { useRoute } from 'vue-router';
import { useBreadcrumbStore } from '@bbc/front-end-kit/vue';

const route = useRoute();
const breadcrumbStore = useBreadcrumbStore();

onMounted(() => {
    updateBreadcrumbs();
});

watch(route, () => {
    updateBreadcrumbs();
});

function updateBreadcrumbs() {
    breadcrumbStore.setBreadcrumbs(route.meta.breadcrumbs);
}
</script>

Store Structure

The breadcrumb store expects items with this structure:

• label: Display text for the breadcrumb
• view: Named route name (converted to { name: view }) - Preferred for Vue Router
• to: Direct route object (alternative to view)
• href: External URL (alternative to to)

Example store structure:

{
  breadcrumbs: [
    { label: 'Home', view: 'home' },           // Vue Router named route
    { label: 'Products', view: 'products' },   // Vue Router named route
    { label: 'Current Page' }                  // No link (active)
  ]
}

Styling Customization

Both the base component and wrapper components support CSS custom properties for theming:

.breadcrumb-nav {
    --text-color: var(--black);
    --active-text-color: var(--blue-dark);
    --active-a-color: var(--blue-dark);
    --text-decoration: none;
    --active-text-decoration: underline;
    --separator-color: var(--black);
}

Custom Attributes for Tracking

The component automatically generates Showpad tracking attributes when getItemAttrs is not provided:

<Breadcrumb
  :breadcrumb-store="store"
  :get-item-attrs="(item) => ({
    'data-sp': `{{ path }}.${path}.${item.label}`,
    'data-tracking-label': `breadcrumb-${item.label.toLowerCase()}`
  })"
/>

Migration from Project-Specific Components

For existing projects using project-specific breadcrumb components (like Roche UI kit):

1. Replace direct usage with the new base component
2. Update imports to use @bbc/front-end-kit/vue
3. Maintain existing store injection - the component is backward compatible
4. Customize styling using CSS custom properties or wrapper components

The component maintains full backward compatibility while providing a consistent foundation across all projects.