Breadcrumbs managing ​

In this chapter you will learn how to

• Build breadcrumbs for static page
• How breadcrumbs are built for CMS pages

Quick reference ​

• useBreadcrumbs is a composable used for a breadcrumbs management with sharable state
• getCategoryBreadcrumbs is a helper used for converting Category to the Breadcrumb object

Building breadcrumbs for a static page ​

useBreadcrumbs([
  {
    name: "Shopware",
    path: "/shopware",
  },
]);

Building breadcrumbs for CMS pages ​

Each CMS page contains the Category with breadcrumb array, which contains a list of names, like:

breadcrumb: ["Home", "Main navigation ", "Summer Party"]

we can convert current string array to the Breadcrumb object using getCategoryBreadcrumbs helper, and then pass it to useBreadcrumbs composable.

import { getCategoryBreadcrumbs } from "@shopware-pwa/helpers-next";

let breadcrumbs = getCategoryBreadcrumbs(
  productResponse.value?.product?.seoCategory
);
useBreadcrumbs(breadcrumbs);

Clearing breadcrumbs list ​

It's important to clear breadcrumbs list when you leave the page, otherwise you'll see breadcrumbs from the previous page if your not setting them on that page.

const { clearBreadcrumbs } = useBreadcrumbs();

onBeforeRouteLeave(() => {
  clearBreadcrumbs();
});

Displaying Breadcrumbs ​

Breadcrumbs are stored in sharable variable breadcrumbs in useBreadcrumbs composable.

<script setup lang="ts">
const { breadcrumbs } = useBreadcrumbs();
</script>
<template>
  <nav>
    <ol>
      <li v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.path">
        <NuxtLink v-if="breadcrumb.path" :to="breadcrumb.path">
          {{ breadcrumb.name }}
        </NuxtLink>
        <span v-else>
          {{ breadcrumb.name }}
        </span>
        <div v-if="index < breadcrumbs.length - 1"></div>
      </li>
    </ol>
  </nav>
</template>