---
title: "useHeader"
description: "useHeader 用于配置头部导航链接，通过 desktopLinks 定义桌面端菜单项，支持当前路由高亮检测。在 app/composables/useHeader.ts 中创建同名文件覆盖此 Composable，即可完全自定义头部导航结构和链接内容。"
seo_title: "useHeader"
seo_description: "Configure Movk Nuxt Docs header navigation with useHeader, desktop links, active route detection, and project-level composable overrides."
canonical_url: "https://docs.mhaibaraai.cn/docs/composables/use-header"
---
# useHeader

> useHeader 用于配置头部导航链接，通过 desktopLinks 定义桌面端菜单项，支持当前路由高亮检测。在 app/composables/useHeader.ts 中创建同名文件覆盖此 Composable，即可完全自定义头部导航结构和链接内容。

## 概述

`useHeader()` 配置 Header 组件的桌面端和移动端导航链接。

### 默认实现

默认返回空数组：

```ts [composables/useHeader.ts]
export function useHeader() {
  return {
    desktopLinks: computed(() => []),
    mobileLinks: computed(() => [])
  }
}
```

## 使用示例

### 覆盖默认配置

在项目中创建 `composables/useHeader.ts` 覆盖默认配置：

```ts [composables/useHeader.ts]
export function useHeader() {
  const route = useRoute()

  return {
    desktopLinks: computed(() => [
      {
        label: '文档',
        to: '/docs',
        icon: 'i-lucide-book',
        active: route.path.startsWith('/docs')
      },
      {
        label: 'API',
        to: '/api',
        icon: 'i-lucide-code',
        active: route.path.startsWith('/api')
      }
    ]),

    mobileLinks: computed(() => [
      {
        label: '首页',
        to: '/',
        icon: 'i-lucide-square-play'
      },
      {
        label: '文档',
        to: '/docs',
        icon: 'i-lucide-book'
      }
    ])
  }
}
```

### 多语言支持

```ts [composables/useHeader.ts]
export function useHeader() {
  const { t } = useI18n()

  return {
    desktopLinks: computed(() => [
      {
        label: t('nav.docs'),
        to: '/docs',
        icon: 'i-lucide-book'
      },
      {
        label: t('nav.api'),
        to: '/api',
        icon: 'i-lucide-code'
      }
    ]),

    mobileLinks: computed(() => [
      {
        label: t('nav.home'),
        to: '/',
        icon: 'i-lucide-square-play'
      },
      {
        label: t('nav.docs'),
        to: '/docs',
        icon: 'i-lucide-book'
      }
    ])
  }
}
```

## API

### `useHeader()`

返回 Header 导航链接配置。

### 返回值

**desktopLinks** (`ComputedRef<NavigationLink[]>`): 桌面端导航菜单项。

**mobileLinks** (`ComputedRef<NavigationLink[]>`): 移动端导航菜单项。

### 链接对象字段

**label** (`string`) *required*: 显示文本。

**to** (`string`) *required*: 链接地址。

**icon** (`string`): 图标类名。

**active** (`boolean`): 是否激活状态。

**badge** (`string`): 徽章文本。

**children** (`NavigationLink[]`): 子菜单。

## Changelog

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


## Sitemap

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