useHeader

GitHub View source

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:

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:

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

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.

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

No recent changes

PageLastCommit

PageLastCommit automatically displays the last update time, commit author, and commit message below a documentation page's title, with automatic author detection in PR squash-merge scenarios. Requires NUXT_GITHUB_TOKEN and github.rootDir, and supports custom date formats via Intl.DateTimeFormatOptions.

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.