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 | QueryBuilder
undefined
The 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>