---
title: "useNavigation"
description: "useNavigation 管理文档侧边栏导航树结构，提供按分类分组的子导航列表、根级导航项集合和面包屑导航数据。基于 Nuxt Content 的 queryCollectionNavigation API 构建，配合 useCategory 使用实现侧边栏分组导航。"
seo_title: "useNavigation"
seo_description: "Manage Movk Nuxt Docs sidebar navigation, category groups, root navigation items, and breadcrumbs with Nuxt Content navigation data."
canonical_url: "https://docs.mhaibaraai.cn/docs/composables/use-navigation"
---
# useNavigation

> useNavigation 管理文档侧边栏导航树结构，提供按分类分组的子导航列表、根级导航项集合和面包屑导航数据。基于 Nuxt Content 的 queryCollectionNavigation API 构建，配合 useCategory 使用实现侧边栏分组导航。

## 概述

管理文档导航结构，提供导航树处理和面包屑生成功能。

## 使用示例

### 基础用法

```vue
<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>
    <!-- 顶级导航 -->
    <UNavigationMenu :items="rootNavigation" />

    <!-- 侧边栏分类导航 -->
    <UContentNavigation :navigation="navigationByCategory" />

    <!-- 面包屑 -->
    <UBreadcrumb :items="breadcrumb" />
  </div>
</template>
```

### 在 Layout 中使用

```vue
<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)`

处理导航树，提供导航和面包屑功能。

### 参数

**navigation** (`Ref<ContentNavigationItem[]>`) *required*: Nuxt Content 提供的导航数据。

### 返回值

**rootNavigation** (`ComputedRef<ContentNavigationItem[]>`): 根级导航项数组。

**navigationByCategory** (`ComputedRef<ContentNavigationItem[]>`): 按分类分组的当前页面子导航。

**findBreadcrumb** (`(path: string) => ContentNavigationItem[]`): 生成指定路径的面包屑导航。

## Changelog

See commit history for [layer/app/composables/useNavigation.ts](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/composables/useNavigation.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.