Header

A responsive header component.

Usage

The Header component renders a <header> element.

Use the left, default and right slots to customize the header and the body or content slots to customize the header menu.

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui'
import { useRoute } from '#app'
import { BaseLogo, PColorModeButton, PNavigationMenu } from '#components'
import { computed } from 'vue'

const route = useRoute()

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

<template>
  <PHeader>
    <template #title>
      <BaseLogo class="h-6 w-auto" />
    </template>

    <PNavigationMenu :items="items" />

    <template #right>
      <PColorModeButton />

      <PTooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <PButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons:github"
          aria-label="GitHub"
        />
      </PTooltip>
    </template>
  </PHeader>
</template>

In this example, we use the NavigationMenu component to render the header links in the center.

Title

Use the title prop to change the title of the header. Defaults to Akar.

title

Akar

<template>
  <PHeader title="Akar" />
</template>

You can also use the title slot to add your own logo.

You should still add the title prop to replace the default aria-label of the link.

<template>
  <PHeader>
    <template #title>
      <BaseLogo class="h-6 w-auto" />
    </template>
  </PHeader>
</template>

To

Use the to prop to change the link of the title. Defaults to /.

Pohon

<template>
  <PHeader to="/docs/pohon" />
</template>

You can also use the left slot to override the link entirely.

<template>
  <PHeader>
    <template #left>
      <NuxtLink to="/docs/pohon">
        <BaseLogo class="h-6 w-auto" />
      </NuxtLink>
    </template>
  </PHeader>
</template>

Mode

Use the mode prop to change the mode of the header menu. Defaults to dialog.

Use the body slot to fill the menu body (under the header) or the content slot to fill the entire menu.

You can use the menu prop to customize the menu of the header, it will adapt depending on the mode you choose.

mode

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';
import { useRoute } from '#app';
import { BaseLogo, PButton, PColorModeButton, PNavigationMenu, PTooltip } from '#components';
import { computed } from 'vue';

const route = useRoute();

const items = computed<Array<PNavigationMenuItem>>(() => [
  {
    label: 'Docs',
    to: '/docs/pohon/getting-started',
    icon: 'i-lucide:book-open',
    active: route.path.startsWith('/docs/pohon/getting-started'),
  },
  {
    label: 'Components',
    to: '/docs/pohon/components',
    icon: 'i-lucide:box',
    active: route.path.startsWith('/docs/pohon/components'),
  },
  {
    label: 'Figma',
    icon: 'i-simple-icons:figma',
    to: 'https://akar.vinicunca.dev/figma-ui',
    target: '_blank',
  },
  {
    label: 'Releases',
    icon: 'i-lucide:rocket',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank',
  },
]);
</script>

<template>
  <PHeader>
    <template #title>
      <BaseLogo class="h-6 w-auto" />
    </template>

    <PNavigationMenu :items="items" />

    <template #right>
      <PColorModeButton />

      <PTooltip
        text="Open on GitHub"
        :kbds="['meta', 'G']"
      >
        <PButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons:github"
          aria-label="GitHub"
        />
      </PTooltip>
    </template>

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

Toggle

Use the toggle prop to customize the toggle button displayed on mobile.

You can pass any property from the Button component to customize it.

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';
import { useRoute } from '#app';
import { PButton, PColorModeButton, PNavigationMenu, PTooltip } from '#components';
import { computed } from 'vue';

const route = useRoute();

const items = computed<Array<PNavigationMenuItem>>(() => [
  {
    label: 'Docs',
    to: '/docs/pohon/getting-started',
    icon: 'i-lucide:book-open',
    active: route.path.startsWith('/docs/pohon/getting-started'),
  },
  {
    label: 'Components',
    to: '/docs/pohon/components',
    icon: 'i-lucide:box',
    active: route.path.startsWith('/docs/pohon/components'),
  },
  {
    label: 'Figma',
    icon: 'i-simple-icons:figma',
    to: 'https://akar.vinicunca.dev/figma-ui',
    target: '_blank',
  },
  {
    label: 'Releases',
    icon: 'i-lucide:rocket',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank',
  },
]);
</script>

<template>
  <PHeader
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full',
    }"
  >
    <template #title>
      <BaseLogo class="h-6 w-auto" />
    </template>

    <PNavigationMenu :items="items" />

    <template #right>
      <PColorModeButton />

      <PTooltip
        text="Open on GitHub"
        :kbds="['meta', 'G']"
      >
        <PButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons:github"
          aria-label="GitHub"
        />
      </PTooltip>
    </template>

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

Toggle Side

Use the toggle-side prop to change the side of the toggle button. Defaults to right.

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';
import { useRoute } from '#app';
import { BaseLogo, PButton, PColorModeButton, PNavigationMenu, PTooltip } from '#components';
import { computed } from 'vue';

const route = useRoute();

const items = computed<Array<PNavigationMenuItem>>(() => [
  {
    label: 'Docs',
    to: '/docs/pohon/getting-started',
    icon: 'i-lucide:book-open',
    active: route.path.startsWith('/docs/pohon/getting-started'),
  },
  {
    label: 'Components',
    to: '/docs/pohon/components',
    icon: 'i-lucide:box',
    active: route.path.startsWith('/docs/pohon/components'),
  },
  {
    label: 'Figma',
    icon: 'i-simple-icons:figma',
    to: 'https://akar.vinicunca.dev/figma-ui',
    target: '_blank',
  },
  {
    label: 'Releases',
    icon: 'i-lucide:rocket',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank',
  },
]);
</script>

<template>
  <PHeader toggle-side="left">
    <template #title>
      <BaseLogo class="h-6 w-auto" />
    </template>

    <PNavigationMenu :items="items" />

    <template #right>
      <PColorModeButton />

      <PTooltip
        text="Open on GitHub"
        :kbds="['meta', 'G']"
      >
        <PButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons:github"
          aria-label="GitHub"
        />
      </PTooltip>
    </template>

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

Examples

Within `app.vue`

Use the Header component in your app.vue or in a layout:

app.vue

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';

const route = useRoute();

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

<template>
  <PApp>
    <PHeader>
      <template #title>
        <LayoutHeaderLogo class="h-6 w-auto" />
      </template>

      <PNavigationMenu :items="items" />

      <template #right>
        <PColorModeButton />

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

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

    <PMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </PMain>

    <PFooter />
  </PApp>
</template>

API

Props

Prop	Default	Type

Slots

Slot	Type

Emits

Event	Type

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PHeader. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    header: {
      slots: {
        root: '',
        container: '',
        left: '',
        center: '',
        right: '',
        title: '',
        toggle: '',
        content: '',
        overlay: '',
        header: '',
        body: ''
      },
      variants: {
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: ''
          }
        }
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    header: {
      slots: {
        root: '',
        container: '',
        left: '',
        center: '',
        right: '',
        title: '',
        toggle: '',
        content: '',
        overlay: '',
        header: '',
        body: ''
      },
      variants: {
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: ''
          }
        }
      }
    }
  }
};

Changelog

No recent changes

Footer

A responsive footer component.

Main

A main element that fills the available viewport height.