Vue FooterColumns Component

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>
  <B24Footer>
    <template #top>
      <B24Container>
        <B24FooterColumns />
      </B24Container>
    </template>
  </B24Footer>
</template>

Columns

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?: IconComponent
class?: any
b24ui?: { 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 '@bitrix24/b24ui-nuxt'
import GitHubIcon from '@bitrix24/b24icons-vue/social/GitHubIcon'

const columns: FooterColumn[] = [
  {
    label: 'Community',
    children: [
      {
        label: 'Bitrix24 on GitHub',
        to: 'https://github.com/bitrix24',
        icon: GitHubIcon,
        target: '_blank'
      }
    ]
  },
  {
    label: 'Solutions',
    children: [
      {
        label: 'Bitrix24 JsSdk',
        to: 'https://bitrix24.github.io/b24jssdk/',
        target: '_blank'
      },
      {
        label: 'Bitrix24 Icons',
        to: 'https://bitrix24.github.io/b24icons/',
        target: '_blank'
      },
      {
        label: 'Bitrix24 UI',
        to: 'https://bitrix24.github.io/b24ui/',
        target: '_blank'
      }
    ]
  }
]
</script>

<template>
  <B24FooterColumns :columns="columns">
    <template #right>
      <B24FormField name="email" label="Subscribe to our newsletter" size="lg">
        <B24Input type="email" class="w-full">
          <template #trailing>
            <B24Button type="submit" size="xs" label="Subscribe" />
          </template>
        </B24Input>
      </B24FormField>
    </template>
  </B24FooterColumns>
</template>

API

Props

Prop	Default	Type
`as`	`'nav'`	`any` The element or component this component should render as.
`columns`		`FooterColumn<T>[]`
`b24ui`		`{ root?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; label?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkLabelExternalIcon?: ClassNameValue; }`

Slots

Slot	Type
`left`	`{}`
`default`	`{}`
`right`	`{}`
`column-label`	`{ column: FooterColumn<T>; }`
`link`	`{ link: T; active: boolean; b24ui: object; }`
`link-leading`	`{ link: T; active: boolean; b24ui: object; }`
`link-label`	`{ link: T; active: boolean; }`
`link-trailing`	`{ link: T; active: boolean; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    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-(length:--ui-font-size-lg)/[normal] font-(--ui-font-weight-semi-bold)',
        list: 'mt-6 space-y-4',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 focus-visible:outline-primary',
        linkLeadingIcon: 'size-5 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'inline-block size-[14px] text-(--ui-color-design-plain-content-icon-secondary)'
      },
      variants: {
        active: {
          true: {
            link: 'text-primary font-medium'
          },
          false: {
            link: 'text-(--b24ui-typography-description-color) hover:text-(--b24ui-typography-label-color) transition-colors'
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        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-(length:--ui-font-size-lg)/[normal] font-(--ui-font-weight-semi-bold)',
            list: 'mt-6 space-y-4',
            item: 'relative',
            link: 'group text-sm flex items-center gap-1.5 focus-visible:outline-primary',
            linkLeadingIcon: 'size-5 shrink-0',
            linkLabel: 'truncate',
            linkLabelExternalIcon: 'inline-block size-[14px] text-(--ui-color-design-plain-content-icon-secondary)'
          },
          variants: {
            active: {
              true: {
                link: 'text-primary font-medium'
              },
              false: {
                link: 'text-(--b24ui-typography-description-color) hover:text-(--b24ui-typography-label-color) transition-colors'
              }
            }
          }
        }
      }
    })
  ]
})

CommandPalette

A searchable command palette powered by Fuse.js for fast, fuzzy text search.

Link

A wrapper around <NuxtLink> with extra props.

FooterColumns New

Usage

Columns

API

Props

Slots

Theme