---
title: "FooterColumns"
description: "A list of links as columns to display in your Footer."
canonical_url: "https://vinicunca.dev/pohon/components/footer-columns"
---
# FooterColumns

> A list of links as columns to display in your Footer.

## Usage

The FooterColumns component renders a list of columns to display in your Footer.

Use it in the `top` slot of the [Footer](https://vinicunca.dev/pohon/components/footer) component:

```vue
<template>
  <PFooter>
    <template #top>
      <PContainer>
        <PFooterColumns />
      </PContainer>
    </template>
  </PFooter>
</template>
```

### Columns `Soon`

Use the `columns` prop as an array of objects with the following properties:

- `label: string`
- `children?: FooterColumnLink[]`

Each column contains a `children` array of objects that define the links. Each link can have the following properties:

- `label?: string`
- `icon?: string`
- `class?: any`
- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }`

You can pass any property from the [Link](https://vinicunca.dev/pohon/components/link#props) component such as `to`, `target`, etc.

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

const columns: Array<FooterColumn> = [{
  label: 'Community',
  children: [{
    label: 'Nuxters',
    to: 'https://nuxters.nuxt.com',
    target: '_blank',
  }, {
    label: 'Video Courses',
    to: 'https://masteringnuxt.com/nuxt3?ref=nuxt',
    target: '_blank',
  }, {
    label: 'Nuxt on GitHub',
    to: 'https://github.com/nuxt',
    target: '_blank',
  }],
}, {
  label: 'Solutions',
  children: [{
    label: 'Nuxt Content',
    to: 'https://content.nuxt.com/',
    target: '_blank',
  }, {
    label: 'Nuxt DevTools',
    to: 'https://devtools.nuxt.com/',
    target: '_blank',
  }, {
    label: 'Nuxt Image',
    to: 'https://image.nuxt.com/',
    target: '_blank',
  }, {
    label: 'Pohon UI',
    to: 'https://pohon.vinicunca.dev/',
    target: '_blank',
  }],
}];
</script>

<template>
  <PFooterColumns :columns="columns">
    <template #right>
      <PFormField
        name="email"
        label="Subscribe to our newsletter"
        size="lg"
      >
        <PInput
          type="email"
          class="w-full"
        >
          <template #trailing>
            <PButton
              type="submit"
              size="xs"
              color="neutral"
              label="Subscribe"
            />
          </template>
        </PInput>
      </PFormField>
    </template>
  </PFooterColumns>
</template>
```

> [!TIP]
> 
> The column label is rendered as an `h3` by default. Use the `as` prop with an object to change it, for example `:as="{ label: 'h4' }"`. You can also set the root element this way: `:as="{ root: 'div', label: 'h4' }"`.

## API

### Props

```ts
/**
 * Props for the FooterColumns component
 */
interface FooterColumnsProps {
}
```

### Slots

```ts
/**
 * Slots for the FooterColumns component
 */
interface FooterColumnsSlots {
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    footerColumns: {
      slots: {
        root: 'xl:grid xl:grid-cols-3 xl:gap-8',
        left: 'mb-10 xl:mb-0',
        center: 'flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2',
        right: 'mt-10 xl:mt-0',
        label: 'text-sm font-600',
        list: 'mt-6 space-y-4',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3',
        linkLeadingIcon: 'size-5 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-3 absolute top-0 color-text-dimmed inline-block'
      },
      variants: {
        active: {
          true: {
            link: 'color-primary font-500'
          },
          false: {
            link: [
              'color-text-muted hover:color-text',
              'transition-colors'
            ]
          }
        }
      }
    }
  }
})
```

## Changelog

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

---

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


## Sitemap

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