Building complex navigation from your content has never been easier.
The <ContentNavigation> is a renderless component shortening the access to the navigation.
query: A query to be passed to fetchContentNavigation().QueryBuilderParams | QueryBuilderundefinedThe default slot can be used to render the content with v-slot="{ navigation }" syntax.
<template> <nav> <ContentNavigation v-slot="{ navigation }"> <div v-for="link of navigation" :key="link._path"> <NuxtLink :to="link._path">{{ link.title }}</NuxtLink> </div> </ContentNavigation> </nav></template>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>