<ContentNavigation>

Building complex navigation from your content has never been easier.

The <ContentNavigation> is a renderless component shortening the access to the navigation.

Props

• query: A query to be passed to fetchContentNavigation().
  • Type: QueryBuilderParams | QueryBuilder
  • Default: undefined

Slots

The default slot can be used to render the content with v-slot="{ navigation }" syntax.

<template>  <nav>    <ContentNavigation v-slot="{ navigation }">      <ul>        <li v-for="link of navigation" :key="link._path">          <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>        </li>      </ul>    </ContentNavigation>  </nav></template>

Query

By providing the query prop you can customise the content used for navigation.

Here we pass along a QueryBuilder instance.

<script setup>const catsQuery = queryContent('cats')/*// If you'd prefer to pass along raw `QueryBuilderParams`:const catsQuery = {  where: [    { _path: /^\/cats/ },  ],}*/</script><template><ContentNavigation v-slot="{ navigation }" :query="catsQuery">  <NuxtLink    v-for="link of navigation"    :key="link._path"    :to="link._path"  >    {{ link.navTitle || link.title }}  </NuxtLink></ContentNavigation></template>