The FooterColumns component renders a list of columns to display in your Footer.
Use it in the top slot of the Footer component:
<template>
<PFooter>
<template #top>
<PContainer>
<PFooterColumns />
</PContainer>
</template>
</PFooter>
</template>
Use the columns prop as an array of objects with the following properties:
label: stringchildren?: FooterColumnLink[]Each column contains a children array of objects that define the links. Each link can have the following properties:
label?: stringicon?: stringclass?: anypohon?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }You can pass any property from the Link component such as to, target, etc.
<script setup lang="ts">
import type { PFooterColumn } from 'pohon-ui'
const columns: Array<PFooterColumn> = [
{
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: 'Akar',
to: 'https://akar.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>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
Below is the theme configuration skeleton for the PFooterColumns. 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.
export default defineAppConfig({
pohon: {
footerColumns: {
slots: {
root: '',
left: '',
center: '',
right: '',
label: '',
list: '',
item: '',
link: '',
linkLeadingIcon: '',
linkLabel: '',
linkLabelExternalIcon: ''
},
variants: {
active: {
true: {
link: ''
},
false: {
link: ''
}
}
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
footerColumns: {
slots: {
root: '',
left: '',
center: '',
right: '',
label: '',
list: '',
item: '',
link: '',
linkLeadingIcon: '',
linkLabel: '',
linkLabelExternalIcon: ''
},
variants: {
active: {
true: {
link: ''
},
false: {
link: ''
}
}
}
}
}
};