---
title: "Footer"
description: "A responsive footer for your site links and legal notices."
canonical_url: "https://vinicunca.dev/pohon/components/footer"
---
# Footer

> A responsive footer for your site links and legal notices.

## Usage

The Footer component renders a `<footer>` element.

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

```vue [FooterExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui';

const items: Array<NavigationMenuItem> = [{
  label: 'Theme Studio',
  to: '/theme',
  target: '_blank',
}, {
  label: 'Playground',
  to: 'https://play-pohon.vinicunca.dev/',
  target: '_blank',
}, {
  label: 'Releases',
  to: 'https://github.com/vinicunca/pohon/releases',
  target: '_blank',
}];
</script>

<template>
  <PFooter>
    <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-github"
        color="neutral"
        variant="ghost"
        to="https://github.com/vinicunca/pohon/discussions"
        target="_blank"
        aria-label="Discussions"
      />
      <PButton
        icon="i-lucide-book-open"
        color="neutral"
        variant="ghost"
        to="https://pohon.vinicunca.dev/"
        target="_blank"
        aria-label="Documentation"
      />
      <PButton
        icon="i-simple-icons-github"
        color="neutral"
        variant="ghost"
        to="https://github.com/vinicunca/pohon"
        target="_blank"
        aria-label="GitHub"
      />
    </template>
  </PFooter>
</template>
```

> [!NOTE]
> 
> In this example, we use the [NavigationMenu](https://vinicunca.dev/pohon/components/navigation-menu) component to render the footer links in the center.

> [!TIP]
> See: /pohon/components/footer-columns
> 
> 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:

```vue [app.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui';

const items: Array<NavigationMenuItem> = [{
  label: 'Theme Studio',
  to: '/theme',
  target: '_blank'
}, {
  label: 'Playground',
  to: 'https://play-pohon.vinicunca.dev/',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/vinicunca/pohon/releases',
  target: '_blank'
}];
</script>

<template>
  <PApp>
    <PHeader />

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

    <PSeparator
      icon="i-lucide-leaf"
      type="dashed"
      class="h-px"
    />

    <PFooter>
      <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-github"
          color="neutral"
          variant="ghost"
          to="https://github.com/vinicunca/pohon/discussions"
          target="_blank"
          aria-label="Discussions"
        />
        <PButton
          icon="i-lucide-book-open"
          color="neutral"
          variant="ghost"
          to="https://vinicunca.dev/"
          target="_blank"
          aria-label="Documentation"
        />
        <PButton
          icon="i-simple-icons-github"
          color="neutral"
          variant="ghost"
          to="https://github.com/vinicunca/pohon"
          target="_blank"
          aria-label="GitHub"
        />
      </template>
    </PFooter>
  </PApp>
</template>
```

> [!NOTE]
> 
> In this example, we use the [Separator](https://vinicunca.dev/pohon/components/separator) component to add a border above the footer.

## API

### Props

```ts
/**
 * Props for the Footer component
 */
interface FooterProps {
  /**
   * The element or component this component should render as.
   * @default 'footer'
   */
  as?: any;
  ui?: { root?: SlotClass; top?: SlotClass; bottom?: SlotClass; container?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Footer component
 */
interface FooterSlots {
  left(): any;
  default(): any;
  right(): any;
  top(): any;
  bottom(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    footer: {
      slots: {
        root: '',
        top: 'py-8 lg:py-12',
        bottom: 'py-8 lg:py-12',
        container: 'py-8 lg:py-4 lg:flex lg:gap-x-3 lg:items-center lg:justify-between',
        left: 'mt-3 flex gap-x-1.5 items-center justify-center lg:mt-0 lg:flex-1 lg:justify-start lg:order-1',
        center: 'mt-3 flex items-center justify-center lg:mt-0 lg:order-2',
        right: 'flex gap-x-1.5 items-center justify-center lg:flex-1 lg:justify-end lg:order-3'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/Footer.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/footer.ts).

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/Footer.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.