<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>