Footer

A responsive footer component.

Usage

The Footer component renders a <footer> element.

Use the left, default and right slots to customize the footer.

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui'
import { PButton, PFooter, PNavigationMenu } from '#components'

const items: Array<PNavigationMenuItem> = [
  {
    label: 'Figma Kit',
    to: 'https://akar.vinicunca.dev/figma-ui',
    target: '_blank'
  },
  {
    label: 'Playground',
    to: 'https://stackblitz.com/edit/pohon-ui',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/vinicunca/akar/releases',
    target: '_blank'
  }
]
</script>

<template>
  <PFooter class="w-full">
    <template #left>
      <p class="text-sm color-text-muted">Copyright © {{ new Date().getFullYear() }}</p>
    </template>

    <PNavigationMenu :items="items" variant="link" />

    <template #right>
      <PButton
        icon="i-simple-icons:discord"
        color="neutral"
        variant="ghost"
        to="https://akar.vinicunca.dev/discord"
        target="_blank"
        aria-label="Discord"
      />
      <PButton
        icon="i-simple-icons:x"
        color="neutral"
        variant="ghost"
        to="https://akar.vinicunca.dev/x"
        target="_blank"
        aria-label="X"
      />
      <PButton
        icon="i-simple-icons:github"
        color="neutral"
        variant="ghost"
        to="https://github.com/nuxt/nuxt"
        target="_blank"
        aria-label="GitHub"
      />
    </template>
  </PFooter>
</template>

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

You can use the FooterColumns component to display a list of links inside the top slot.

Examples

Within `app.vue`

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

app.vue

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

const items: PNavigationMenuItem[] = [{
  label: 'Figma Kit',
  to: 'https://go.vinicunca.dev/figma-ui',
  target: '_blank'
}, {
  label: 'Playground',
  to: 'https://stackblitz.com/edit/pohon-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/vinicunca/akar/releases',
  target: '_blank'
}]
</script>

<template>
  <PApp>
    <PHeader />

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

    <PSeparator icon="i-simple-icons:nuxtdotjs" type="dashed" class="h-px" />

    <PFooter>
      <template #left>
        <p class="text-muted text-sm">
          Copyright © {{ new Date().getFullYear() }}
        </p>
      </template>

      <PNavigationMenu :items="items" variant="link" />

      <template #right>
        <PButton
          icon="i-simple-icons:discord"
          color="neutral"
          variant="ghost"
          to="https://akar.vinicunca.dev/discord"
          target="_blank"
          aria-label="Discord"
        />
        <PButton
          icon="i-simple-icons:x"
          color="neutral"
          variant="ghost"
          to="https://akar.vinicunca.dev/x"
          target="_blank"
          aria-label="X"
        />
        <PButton
          icon="i-simple-icons:github"
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/nuxt"
          target="_blank"
          aria-label="GitHub"
        />
      </template>
    </PFooter>
  </PApp>
</template>

In this example, we use the Separator component to add a border above the footer.

API

Props

Prop	Default	Type
`as`	`'footer'`	`any` The element or component this component should render as.
`pohon`		`{ root?: ClassValue; top?: ClassValue; bottom?: ClassValue; container?: ClassValue; left?: ClassValue; center?: ClassValue; right?: ClassValue; }`

Slots

Slot	Type
`left`	`object`
`default`	`object`
`right`	`object`
`top`	`object`
`bottom`	`object`

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 PFooter. 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: {
    footer: {
      slots: {
        root: '',
        top: '',
        bottom: '',
        container: '',
        left: '',
        center: '',
        right: ''
      }
    }
  }
};

vite.config.ts

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

export default defineAppConfig({
  pohon: {
    footer: {
      slots: {
        root: '',
        top: '',
        bottom: '',
        container: '',
        left: '',
        center: '',
        right: ''
      }
    }
  }
};

Changelog

No recent changes

Error

A pre-built error component with NuxtError support.

Header

A responsive header component.