Header - Nuxt UI Pro

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>
      <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 ContentSearchButton component there, it will fit perfectly.

<template>
  <UHeader>
    <template #center>
      <UContentSearchButton />
    </template>
  </UHeader>
</template>

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

If you've overriden the #center slot, it's up to you to add the hidden lg:flex classes.

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>

Take a look at the mobile version of this documentation to see how it looks like.

Slots

panel

{}

title

{}

top

{}

left

{}

logo

{}

center

{}

right

{}

panel-button

{ open: any; }

bottom

{}

Props

string

"/"

title

string

undefined

links

HeaderLink[]

[]

any

{}

Config

{
  wrapper: 'bg-background/75 backdrop-blur border-b border-gray-200 dark:border-gray-800 -mb-px sticky top-0 z-50',
  container: 'flex items-center justify-between gap-3 h-[--header-height]',
  left: 'lg:flex-1 flex items-center gap-1.5',
  center: 'hidden lg:flex',
  right: 'flex items-center justify-end lg:flex-1 gap-1.5',
  logo: 'flex-shrink-0 font-bold text-xl text-gray-900 dark:text-white flex items-end gap-1.5',
  panel: {
    wrapper: 'fixed inset-0 z-50 overflow-y-auto bg-background lg:hidden',
    header: 'px-4 sm:px-6',
    body: 'px-4 sm:px-6 pt-3 pb-6'
  },
  button: {
    base: 'lg:hidden',
    icon: {
      open: 'i-heroicons-bars-3-20-solid',
      close: 'i-heroicons-x-mark-20-solid'
    }
  }
}

HeaderPopoverLinks

A list of links displayed in a header Popover.

LandingCard

A pre-built Card with slot support and hover effect.