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

<script setup lang="ts">
const { loadNavigationElements, navigationElements } = useNavigation();
await loadNavigationElements({ depth: 2 });
</script>

<template>
  <ul>
    <li
      v-for="navigationElement in navigationElements"
      :key="navigationElement.id"
    >
      <RouterLink :to="'/' + navigationElement.seoUrls[0]?.seoPathInfo">
        {{ navigationElement.translated.name }}
      </RouterLink>
    </li>
  </ul>
</template>

Next steps ​