<ContentNavigation> - Nuxt Content

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

components/Navbar.vue

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

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.

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>

The fastest way to query your content with a component.

The fastest way to query and display your content.