---
title: "useNavigation"
description: "useNavigation manages the documentation sidebar navigation tree, providing a sub-navigation list grouped by category, the set of root-level navigation items, and breadcrumb navigation data. Built on Nuxt Content's queryCollectionNavigation API, it works with useCategory to implement grouped sidebar navigation."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/composables/use-navigation"
---
# useNavigation

> useNavigation manages the documentation sidebar navigation tree, providing a sub-navigation list grouped by category, the set of root-level navigation items, and breadcrumb navigation data. Built on Nuxt Content's queryCollectionNavigation API, it works with useCategory to implement grouped sidebar navigation.

## Overview

Manages the documentation navigation structure, providing navigation tree processing and breadcrumb generation.

## Usage examples

### Basic usage

```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>
    <!-- Top-level navigation -->
    <UNavigationMenu :items="rootNavigation" />

    <!-- Sidebar category navigation -->
    <UContentNavigation :navigation="navigationByCategory" />

    <!-- Breadcrumb -->
    <UBreadcrumb :items="breadcrumb" />
  </div>
</template>
```

### Using it in a 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)`

Processes the navigation tree, providing navigation and breadcrumb functionality.

### Parameters

**navigation** (`Ref<ContentNavigationItem[]>`) *required*: The navigation data provided by Nuxt Content.

### Return values

**rootNavigation** (`ComputedRef<ContentNavigationItem[]>`): The array of root-level navigation items.

**navigationByCategory** (`ComputedRef<ContentNavigationItem[]>`): The current page's sub-navigation grouped by category.

**findBreadcrumb** (`(path: string) => ContentNavigationItem[]`): Generates the breadcrumb navigation for a given path.

## Changelog

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

---

- [GitHub](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/composables/useNavigation.ts)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.