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 component:

<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 component such as to, target, etc.

<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>

<script setup lang="ts">
import { ref } from 'vue'
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>

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

Prop	Default	Type

Slots

Slot	Type

Theme

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'
            ]
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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

No recent changes

CommandPalette

A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.

Link

A wrapper around NuxtLink with extra props.