---
title: "useHeader"
description: "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."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/composables/use-header"
---
# 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.

## Overview

`useHeader()` configures the desktop and mobile navigation links for the Header component.

### Default implementation

It returns empty arrays by default:

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

## Usage examples

### Overriding the default configuration

Create `composables/useHeader.ts` in your project to override the default configuration:

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

  return {
    desktopLinks: computed(() => [
      {
        label: 'Docs',
        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: 'Home',
        to: '/',
        icon: 'i-lucide-square-play'
      },
      {
        label: 'Docs',
        to: '/docs',
        icon: 'i-lucide-book'
      }
    ])
  }
}
```

### Internationalization support

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

Returns the Header navigation link configuration.

### Return values

**desktopLinks** (`ComputedRef<NavigationLink[]>`): The desktop navigation menu items.

**mobileLinks** (`ComputedRef<NavigationLink[]>`): The mobile navigation menu items.

### Link object fields

**label** (`string`) *required*: The display text.

**to** (`string`) *required*: The link URL.

**icon** (`string`): The icon class name.

**active** (`boolean`): Whether it is in the active state.

**badge** (`string`): The badge text.

**children** (`NavigationLink[]`): The submenu.

## Changelog

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

---

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


## Sitemap

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