import{_ as s}from"./chunks/plugin-vue_export-helper.BCo6x5W8.js";import{c as i,a,o as e}from"./chunks/runtime-core.esm-bundler.Xt1Ml84y.js";const t=JSON.parse('{"title":"Breadcrumbs managing","description":"","frontmatter":{"head":[["meta",{"name":"og:title","content":"Breadcrumbs"}],["meta",{"name":"og:description","content":"In this chapter, you will learn how to manage breadcrumbs."}],["meta",{"name":"og:image","content":"https://frontends-og-image.vercel.app/Breadcrumbs.png?fontSize=150px"}]],"nav":{"position":30}},"headers":[{"level":3,"title":"Quick reference","slug":"quick-reference","link":"#quick-reference","children":[]},{"level":2,"title":"Building breadcrumbs for a static page","slug":"building-breadcrumbs-for-a-static-page","link":"#building-breadcrumbs-for-a-static-page","children":[]},{"level":2,"title":"Building breadcrumbs for a category/product page","slug":"building-breadcrumbs-for-a-category-product-page","link":"#building-breadcrumbs-for-a-category-product-page","children":[]},{"level":2,"title":"Building breadcrumbs for CMS pages - without additional request","slug":"building-breadcrumbs-for-cms-pages-without-additional-request","link":"#building-breadcrumbs-for-cms-pages-without-additional-request","children":[]},{"level":2,"title":"Clearing breadcrumbs list","slug":"clearing-breadcrumbs-list","link":"#clearing-breadcrumbs-list","children":[]},{"level":2,"title":"Displaying Breadcrumbs","slug":"displaying-breadcrumbs","link":"#displaying-breadcrumbs","children":[]}],"relativePath":"getting-started/page-elements/breadcrumbs.md","filePath":"getting-started/page-elements/breadcrumbs.md"}');const n=s({name:"getting-started/page-elements/breadcrumbs.md"},[["render",function(s,t,n,l,h,r){return e(),i("div",null,t[0]||(t[0]=[a('

Breadcrumbs managing ​

In this chapter you will learn how to

Quick reference ​

Building breadcrumbs for a static page ​

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

Building breadcrumbs for a category/product page ​

ts
// props.navigationId is a page id\n\nconst { buildDynamicBreadcrumbs } = useBreadcrumbs();\nbuildDynamicBreadcrumbs(props.navigationId);

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.

ts
import { getCategoryBreadcrumbs } from "@shopware/helpers";\n\nlet breadcrumbs = getCategoryBreadcrumbs(\n  productResponse.value?.product?.seoCategory,\n);\nuseBreadcrumbs(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.

ts
const { clearBreadcrumbs } = useBreadcrumbs();\n\nonBeforeRouteLeave(() => {\n  clearBreadcrumbs();\n});

Displaying Breadcrumbs ​

Breadcrumbs are stored in sharable variable breadcrumbs in useBreadcrumbs composable.

vue
<script setup lang="ts">\nconst { breadcrumbs } = useBreadcrumbs();\n</script>\n<template>\n  <nav>\n    <ol>\n      <li v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.path">\n        <NuxtLink v-if="breadcrumb.path" :to="breadcrumb.path">\n          {{ breadcrumb.name }}\n        </NuxtLink>\n        <span v-else>\n          {{ breadcrumb.name }}\n        </span>\n        <div v-if="index < breadcrumbs.length - 1"></div>\n      </li>\n    </ol>\n  </nav>\n</template>
',20)]))}]]);export{t as __pageData,n as default};