Nuxt UI v3-alpha has been released!

Try it out

FooterColumns

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

Usage

Use the links prop to display a list of links. Each link will be a column with its children underneath.

<script setup lang="ts">
const links = [{
  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: 'Nuxt UI',
    to: 'https://ui.nuxt.com/',
    target: '_blank'
  }]
}]
</script>

<template>
  <UFooterColumns :links="links">
    <template #right>
      <UFormGroup name="email" label="Subscribe to our newsletter" size="lg">
        <UInput type="email" :ui="{ icon: { trailing: { pointer: '' } } }">
          <template #trailing>
            <UButton type="submit" size="2xs" color="black" label="Subscribe" />
          </template>
        </UInput>
      </UFormGroup>
    </template>
  </UFooterColumns>
</template>

The FooterColumns component is meant to be used in the #top slot of the Footer.

AppFooter.vue
<template>
  <UFooter>
    <template #top>
      <UFooterColumns :links="links" />
    </template>
  </UFooter>
</template>

Slots

left
{}
right
{}

Props

ui
any
{}
links
{ label: string; children: FooterLink[]; }[]
[]

Config

{
  wrapper: '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/6 font-semibold text-gray-900 dark:text-white',
  list: 'mt-6 space-y-4',
  base: 'text-sm relative',
  active: 'text-gray-900 dark:text-white font-medium',
  inactive: 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white',
  externalIcon: {
    name: 'i-heroicons-arrow-up-right-20-solid',
    base: 'w-3 h-3 absolute top-0.5 -right-3.5 text-gray-400 dark:text-gray-500'
  }
}