queryCollectionNavigation

Collection Navi Tree

Remove Apex entry

<script setup lang="ts">
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
const navigationWithoutApex = computed(() => navigation.value?.[0]?.children ?? [])
</script>

<template>
  <UContentNavigation
    highlight
    :navigation="navigationWithoutApex"
  />
</template>

Request Additional Frontmatter

    const { data: navigation } = await useAsyncData(
        'navigation',
        () => queryCollectionNavigation('someCollectionName', ['description']))

Programmatically Control Expanded Items

<script setup lang='ts'>
    ...
    const expanded = ref([]) // No items expanded by default
</script>
<template>
    ...
    <UTree v-model:expanded="expanded" :items="items" />
<template>

Map Navi for UI Components

Convert 'title' to 'label'

function mapTitlesToLabels(items) {
  return items.map(item => ({
    ...item,
    label: item.title,
    children: item.children ? mapTitlesToLabels(item.children) : undefined
  }))
}

const navigationWithoutApex = computed(() =>
  navigation.value?.[0]?.children
    ? mapTitlesToLabels(navigation.value[0].children)
    : []
)

function mapTitlesToLabels(items) {
  return items.map(item => ({
    ...item,
    label: item.title,
    children: item.children ? mapTitlesToLabels(item.children) : undefined
  }))
}

const navigationWithoutApex = computed(() =>
  navigation.value?.[0]?.children
    ? mapTitlesToLabels(navigation.value[0].children)
    : []
)

Persist Navi Tree

Maintain Navi Tree State

Simple Nav

Simple Nav Passed Btw Components