Header

Usage

Use the links prop to display a list of links in the center of the header. Those links will transform into a styled Popover if they have children. You can also use the #left, #center and #right slots to customize it further.

By default, a link labeled Nuxt UI Pro that goes to the / route will be displayed on the left. You can change the link by using the to prop and use the #logo slot to put your own logo. If you want to completely override this, use the #left slot.

<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'

const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))

const links = [{
  label: 'Docs',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro'
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: '/releases'
}]
</script>

<template>
  <UHeader :links="links">
    <template #logo>
      <Logo class="w-auto h-6" />
    </template>

    <template #right>
      <UDocsSearchButton label="" />

      <UColorModeButton />

      <UButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" color="gray" variant="ghost" />
    </template>

    <template #panel>
      <UNavigationTree :links="mapContentNavigation(navigation)" />
    </template>
  </UHeader>
</template>

The links prop will be displayed in the center of the header using the HeaderLinks component.

You can override this by using the #center slot, for example you could put the DocsSearchButton component there, it will fit perfectly.

<template>
  <UHeader>
    <template #center>
      <UDocsSearchButton />
    </template>
  </UHeader>
</template>

On mobile, the links in the #center slot will be hidden and a hamburger menu will be displayed instead.

To customize the panel that opens when clicking on the hamburger menu, use the #panel slot. You could put the NavigationTree component and/or the AsideLinks components there for example, they will fit perfectly too.

<template>
  <UHeader>
    <template #panel>
      <UAsideLinks :links="links" />

      <UNavigationTree :links="mapContentNavigation(navigation)" />
    </template>
  </UHeader>
</template>

Slots

Props