Vue Footer Component - Bitrix24 UI

Usage

The Footer component renders a <footer> element.

Use the left, default and right slots to customize the footer.

<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import GitHubIcon from '@bitrix24/b24icons-vue/social/GitHubIcon'
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'

const items: NavigationMenuItem[] = [
  {
    label: 'REST API',
    to: 'https://apidocs.bitrix24.com',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases',
    target: '_blank'
  }
]
</script>

<template>
  <B24Footer>
    <template #left>
      <ProseP small accent="less"> Copyright © {{ new Date().getFullYear() }} </ProseP>
    </template>

    <B24NavigationMenu :items="items" variant="link" />

    <template #right>
      <B24Button
        color="air-selection"
        :icon="Bitrix24Icon"
        to="https://apidocs.bitrix24.com"
        target="_blank"
        aria-label="Bitrix24 REST API"
      />
      <B24Button
        :icon="GitHubIcon"
        to="https://github.com/bitrix24/b24ui"
        target="_blank"
        aria-label="GitHub"
      />
    </template>
  </B24Footer>
</template>

In this example, we use the NavigationMenu component to render the footer links in the center.

You can use the FooterColumns component to display a list of links inside the top slot.

Examples

Within `app.vue`

Use the Footer component in your app.vue or in a layout:

app.vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import GitHubIcon from '@bitrix24/b24icons-vue/social/GitHubIcon'
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-b24/Bitrix24Icon'

const items: NavigationMenuItem[] = [
  {
    label: 'REST API',
    to: 'https://apidocs.bitrix24.com',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases',
    target: '_blank'
  }
]
</script>

<template>
  <B24App>
    <B24Header />

    <B24Main>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </B24Main>

    <B24Separator type="dashed" class="h-px" />

    <B24Footer>
      <template #left>
        <ProseP small accent="less">
          Copyright © {{ new Date().getFullYear() }}
        </ProseP>
      </template>

      <B24NavigationMenu :items="items" variant="link" />

      <template #right>
        <B24Button
          color="air-selection"
          :icon="Bitrix24Icon"
          to="https://apidocs.bitrix24.com"
          target="_blank"
          aria-label="Bitrix24 REST API"
        />
        <B24Button
          :icon="GitHubIcon"
          to="https://github.com/bitrix24/b24ui"
          target="_blank"
          aria-label="GitHub"
        />
      </template>
    </B24Footer>
  </B24App>
</template>

In this example, we use the Separator component to add a border above the footer.

API

Props

Prop	Default	Type
`as`	`'footer'`	`any` The element or component this component should render as.
`b24ui`		`{ root?: ClassNameValue; top?: ClassNameValue; bottom?: ClassNameValue; container?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; }`

Slots

Slot	Type
`left`	`{}`
`default`	`{}`
`right`	`{}`
`top`	`{}`
`bottom`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    footer: {
      slots: {
        root: '',
        top: 'py-8 lg:py-12',
        bottom: 'py-8 lg:py-12',
        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'
      }
    }
  }
})

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: {
        footer: {
          slots: {
            root: '',
            top: 'py-8 lg:py-12',
            bottom: 'py-8 lg:py-12',
            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'
          }
        }
      }
    })
  ]
})

Error

A pre-built error component with NuxtError support.

Header

A header that adapts its structure and content to different screen sizes.

Footer New