Breadcrumbs managing

In this chapter you will learn how to

• Build breadcrumbs for static page
• Build dynamic breadcrumbs for category/product page

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
• getCmsBreadcrumbs is a helper used for building breadcrumbs for Landing Pages

Building breadcrumbs for a static page

import { useBreadcrumbs } from "#imports";

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

Building breadcrumbs for a category/product page

// props.navigationId is a page id

import { useBreadcrumbs } from "#imports";
import type { Schemas } from "#shopware";

const props = {
  breadcrumbs: [
    {
      apiAlias: "breadcrumb",
      categoryId: "example-navigation-id",
      name: "Example category",
      path: "example-category",
      translated: {
        categoryId: "example-navigation-id",
        name: "Example category",
        path: "example-category",
      },
      type: "page",
    },
  ] satisfies Schemas["Breadcrumb"][],
};

const { buildDynamicBreadcrumbs } = useBreadcrumbs();
buildDynamicBreadcrumbs(props.breadcrumbs);

Building breadcrumbs for CMS pages - without additional request

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/helpers";

import { useBreadcrumbs } from "#imports";

const productResponse = {
  product: {
    seoCategory: {
      breadcrumb: ["Home", "Example category"],
      translated: {
        breadcrumb: ["Home", "Example category"],
      },
    },
  },
};

const breadcrumbs = getCategoryBreadcrumbs(productResponse.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.

import { onBeforeRouteLeave, useBreadcrumbs } from "#imports";

const { clearBreadcrumbs } = useBreadcrumbs();

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

Displaying Breadcrumbs

Breadcrumbs are stored in sharable variable breadcrumbs in useBreadcrumbs composable.

<script setup lang="ts">
import { useBreadcrumbs } from "#imports";
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>