useBreadcrumbStore

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

A simple Pinia store for managing a reactive breadcrumb trail. The store has no persistence and no router awareness — consumers are responsible for wiring it into route changes or component lifecycle hooks.

Getting started

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

const breadcrumbStore = useBreadcrumbStore()

// Set the full trail on each route change
router.afterEach((to) => {
    breadcrumbStore.setBreadcrumbs(to.meta.breadcrumbs ?? [])
})

<template>
    <nav>
        <span v-for="(crumb, i) in breadcrumbStore.breadcrumbs" :key="i">
            {{ crumb.label }}
        </span>
    </nav>
</template>

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

const breadcrumbStore = useBreadcrumbStore()
</script>