useNavigation
Overview
Manages the documentation navigation structure, providing navigation tree processing and breadcrumb generation.
Usage examples
Basic usage
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
const { rootNavigation, navigationByCategory, findBreadcrumb } = useNavigation(navigation!)
const route = useRoute()
const breadcrumb = computed(() => findBreadcrumb(route.path))
</script>
<template>
<div>
<!-- Top-level navigation -->
<UNavigationMenu :items="rootNavigation" />
<!-- Sidebar category navigation -->
<UContentNavigation :navigation="navigationByCategory" />
<!-- Breadcrumb -->
<UBreadcrumb :items="breadcrumb" />
</div>
</template>
Using it in a layout
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () =>
fetchContentNavigation()
)
provide('navigation', navigation)
const { navigationByCategory } = useNavigation(navigation!)
</script>
<template>
<div class="flex">
<aside>
<UContentNavigation :navigation="navigationByCategory" />
</aside>
<main>
<slot />
</main>
</div>
</template>
API
useNavigation(navigation)
Processes the navigation tree, providing navigation and breadcrumb functionality.
Parameters
Return values
Changelog
useHeader
useHeader configures the header navigation links, defining the desktop menu items via desktopLinks with active route highlighting support. Create a file of the same name at app/composables/useHeader.ts to override this composable and fully customize the header navigation structure and link content.
useCategory
useCategory manages the category configuration system for the documentation sidebar, defining each category's display title and ordering rules via the categories property to group component or composable documentation by feature. Override the implementation at app/composables/useCategory.ts to customize the category configuration.