Header

GitLab
Um componente de header responsivo.

Uso

O componente Header renderiza um elemento <header>.

Sua altura é definida por meio de uma variável CSS --ui-header-height.

Use os slots left, default e right para personalizar o cabeçalho e os slots body ou content para personalizar o menu do cabeçalho.

Neste exemplo, usamos o componente NavigationMenu para renderizar os links do cabeçalho ao centro.

Título

Use a prop title para alterar o título do cabeçalho. O padrão é Nitro UI.

Nitro UI
<template>
  <NHeader title="Nitro UI" />
</template>

Você também pode usar o slot title para adicionar o seu próprio logo.

Você ainda deve adicionar a prop title para substituir o aria-label padrão do link.
<template>
  <NHeader>
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>
  </NHeader>
</template>

Para

Use a prop to para alterar o link do título. O padrão é /.

Nuxt UI
<template>
  <NHeader to="/docs" />
</template>

Você também pode usar o slot left para sobrescrever o link por completo.

<template>
  <NHeader>
    <template #left>
      <NuxtLink to="/docs">
        <Logo class="h-6 w-auto" />
      </NuxtLink>
    </template>
  </NHeader>
</template>

Modo

Use a prop mode para alterar o modo do menu do cabeçalho. O padrão é modal.

Use o slot body para preencher o corpo do menu (abaixo do cabeçalho) ou o slot content para preencher o menu inteiro.

Você pode usar a prop menu para personalizar o menu do cabeçalho; ele se adapta dependendo do modo que você escolher.

Alternar

Use a prop toggle para personalizar o botão de alternância exibido no mobile.

Você pode passar qualquer propriedade do componente Button para personalizá-lo.

Lado do toggle

Use a prop toggle-side para alterar o lado do botão de toggle. O padrão é right.

Exemplos

Com toggle animado

Use o slot #toggle para substituir o botão de alternância padrão por um ícone de hambúrguer animado personalizado usando o Motion Vue.

Dentro de app.vue

Use o componente Header no seu app.vue ou em um layout:

app.vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@nitro/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/docs/getting-started',
  active: route.path.startsWith('/docs/getting-started')
}, {
  label: 'Components',
  to: '/docs/components',
  active: route.path.startsWith('/docs/components')
}, {
  label: 'Figma',
  to: 'https://go.nuxt.com/figma-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

<template>
  <NApp>
    <NHeader>
      <template #title>
        <Logo class="h-6 w-auto" />
      </template>

      <NNavigationMenu :items="items" />

      <template #right>
        <NColorModeButton />

        <NButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </template>

      <template #body>
        <NNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
      </template>
    </NHeader>

    <NMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </NMain>

    <NFooter />
  </NApp>
</template>

API

Props

Prop Default Type
as'header'any

The element or component this component should render as.

title'Nuxt UI' string
to'/' string
mode'modal' T

The mode of the header menu.

menu HeaderMenu<T>

The props for the header menu component.

toggletrueboolean | Omit<ButtonProps, LinkPropsKeys>

Customize the toggle button to open the header menu displayed when the content slot is used. { color: 'neutral', variant: 'ghost' }

toggleSide'right' "left" | "right"

The side to render the toggle button on.

autoClosetrueboolean

Automatically close when route changes.

openfalseboolean
ui { root?: SlotClass; container?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; title?: SlotClass; toggle?: SlotClass; content?: SlotClass; overlay?: SlotClass; header?: SlotClass; body?: SlotClass; }

Slots

Slot Type
title{}
left{}
default{}
right{}
toggle{ open: boolean; toggle: () => void; ui: object; }
top{}
bottom{}
body{}
content{ close?: (() => void) | undefined; }

Emits

Event Type
update:open[value: boolean]

Tema

app.config.ts
export default defineAppConfig({
  ui: {
    header: {
      slots: {
        root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
        container: 'flex items-center justify-between gap-3 h-full',
        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',
        title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
        toggle: 'lg:hidden',
        content: 'lg:hidden',
        overlay: 'lg:hidden',
        header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
        body: 'p-4 sm:p-6 overflow-y-auto'
      },
      variants: {
        toggleSide: {
          left: {
            toggle: '-ms-1.5'
          },
          right: {
            toggle: '-me-1.5'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        header: {
          slots: {
            root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
            container: 'flex items-center justify-between gap-3 h-full',
            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',
            title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
            toggle: 'lg:hidden',
            content: 'lg:hidden',
            overlay: 'lg:hidden',
            header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
            body: 'p-4 sm:p-6 overflow-y-auto'
          },
          variants: {
            toggleSide: {
              left: {
                toggle: '-ms-1.5'
              },
              right: {
                toggle: '-me-1.5'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Footer

Um componente de footer responsivo.

Main

Um elemento principal que preenche a altura disponível da viewport.