Create a navigation

In this chapter you will learn how to

• Fetch the navigation of a store
• Display navigation items

Fetch the navigation

We can retrieve the navigation of a store using the useNavigation composable hook.

const { loadNavigationElements, navigationElements } = useNavigation();

The navigationElements property is a reactive reference to the navigation items which is updated as we fetch the navigation elements:

await loadNavigationElements({ depth: 2 });

Build a navigation template

Now all values can be accessed in the template to build a navigation menu

Note that all the navigation items are in type Category, and thanks to this the getCategoryUrl helper can be used to extract the correct pretty URL or technical URL as a fallback.

<script setup lang="ts">
import { getCategoryUrl } from "@shopware-pwa/helpers-next";
const { loadNavigationElements, navigationElements } = useNavigation();
await loadNavigationElements({ depth: 2 });
</script>

<template>
  <ul>
    <li
      v-for="navigationElement in navigationElements"
      :key="navigationElement.id"
    >
      <RouterLink
        :to="getCategoryRoute(navigationElement)"
        :target="
          navigationElement.externalLink || navigationElement.linkNewTab
            ? '_blank'
            : ''
        "
      >
        {{ navigationElement.translated.name }}
      </RouterLink>
    </li>
  </ul>
</template>

There is an additional attribute target used, in order to open a link in another window (external links or configured as new tab link).

Next steps