Building complex navigation from your content has never been easier.

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

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


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


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


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/ },

<ContentNavigation v-slot="{ navigation }" :query="catsQuery">
    v-for="link of navigation"
    {{ link.navTitle || link.title }}