Footer
A responsive <footer> component.
Usage
Use the links prop to display a list of links in the center of the footer. You can also use the #left, #center and #right slots to customize it further.
<script setup lang="ts">
const links = [{
label: 'Nuxt UI',
to: 'https://ui.nuxt.com/'
}, {
label: 'Nuxt Docs',
to: 'https://nuxt.com'
}, {
label: 'Nuxt Studio',
to: 'https://nuxt.studio'
}]
</script>
<template>
<UFooter :links="links">
<template #left>
Copyright © {{ new Date().getFullYear() }}
</template>
<template #right>
<UButton icon="i-simple-icons-x" color="gray" variant="ghost" to="https://x.com/nuxt_js" target="_blank" />
<UButton icon="i-simple-icons-discord" color="gray" variant="ghost" to="https://discord.com/invite/ps2h6QT" target="_blank" />
<UButton icon="i-simple-icons-github" color="gray" variant="ghost" to="https://github.com/nuxt/nuxt" target="_blank" />
</template>
</UFooter>
</template>
There is also a
#top slot available, check out the FooterColumns component.Slots
top
{}
right
{}
center
{}
left
{}
Props
ui
DeepPartial<{ wrapper: string; top: { wrapper: string; container: string; }; bottom: { wrapper: string; container: string; left: string; center: string; right: string; }; }>
{}links
FooterLink[]
[]Config
{
wrapper: 'relative',
top: {
wrapper: '',
container: 'py-8 lg:py-12'
},
bottom: {
wrapper: '',
container: 'py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3',
left: 'flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1',
center: 'mt-3 lg:mt-0 lg:order-2 flex items-center justify-center',
right: 'lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3'
}
}