Vue Header Component - Bitrix24 UI

Usage

The Header component renders a <header> element.

Its height is defined through a --b24ui-header-height CSS variable.

Use the left, default and right slots to customize the header and the body or content slots to customize the header menu.

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/docs/getting-started',
    active: route.path.startsWith('/docs/getting-started')
  },
  {
    label: 'Components',
    to: '/docs/components',
    active: route.path.startsWith('/docs/components')
  },
  {
    label: 'REST API',
    to: 'https://apidocs.bitrix24.com',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases',
    target: '_blank'
  }
])
</script>

<template>
  <B24Header>
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>

    <B24NavigationMenu :items="items" />

    <template #right>
      <B24ColorModeButton />

      <B24Tooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <B24Button
          to="https://github.com/bitrix24/b24ui"
          target="_blank"
          :icon="GitHubIcon"
          aria-label="GitHub"
        />
      </B24Tooltip>
    </template>
  </B24Header>
</template>

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

Title

Use the title prop to change the title of the header. Defaults to Bitrix24 UI.

title

Bitrix24 UI

<template>
  <B24Header title="Bitrix24 UI" />
</template>

You can also use the title slot to add your own logo.

You should still add the title prop to replace the default aria-label of the link.

<template>
  <B24Header>
    <template #title>
      <Logo class="h-6 w-auto text-(--b24ui-typography-label-color)" />
    </template>
  </B24Header>
</template>

To

Use the to prop to change the link of the title. Defaults to /.

Bitrix24 UI

<template>
  <B24Header to="/docs/" />
</template>

You can also use the left slot to override the link entirely.

<template>
  <B24Header>
  <template #left>

<NuxtLink to="/docs"">
  <Logo class="h-6 w-auto text-(--b24ui-typography-label-color)" />
</NuxtLink>

  </template>
</B24Header>
</template>

Mode

Use the mode prop to change the mode of the header menu. Defaults to modal.

Use the body slot to fill the menu body (under the header) or the content slot to fill the entire menu.

You can use the menu prop to customize the menu of the header, it will adapt depending on the mode you choose.

mode

<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'
import PlayLIcon from '@bitrix24/b24icons-vue/outline/PlayLIcon'
import DeveloperResourcesIcon from '@bitrix24/b24icons-vue/outline/DeveloperResourcesIcon'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/docs/getting-started',
    icon: PlayLIcon,
    active: route.path.startsWith('/docs/getting-started')
  },
  {
    label: 'Components',
    to: '/docs/components',
    icon: DeveloperResourcesIcon,
    active: route.path.startsWith('/docs/components')
  },
  {
    label: 'REST API',
    to: 'https://apidocs.bitrix24.com',
    icon: Bitrix24Icon,
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases',
    icon: GitHubIcon,
    target: '_blank'
  }
])
</script>

<template>
  <B24Header
    :menu="{
      side: 'left',
      inset: true
    }"
    :b24ui="{ overlay: 'bg-(--ui-color-bg-content-primary) base-mode' }"
  >
    <template #title>
      <Logo class="h-6 w-auto text-(--b24ui-typography-label-color)" />
    </template>

    <B24NavigationMenu :items="items" />

    <template #right>
      <B24ColorModeButton />

      <B24Tooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <B24Button
          to="https://github.com/bitrix24/b24ui"
          target="_blank"
          :icon="GitHubIcon"
          aria-label="GitHub"
        />
      </B24Tooltip>
    </template>

    <template #body>
      <B24NavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </B24Header>
</template>

Toggle

Use the toggle prop to customize the toggle button displayed on mobile.

You can pass any property from the Button component to customize it.

<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'
import PlayLIcon from '@bitrix24/b24icons-vue/outline/PlayLIcon'
import DeveloperResourcesIcon from '@bitrix24/b24icons-vue/outline/DeveloperResourcesIcon'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/docs/getting-started',
    icon: PlayLIcon,
    active: route.path.startsWith('/docs/getting-started')
  },
  {
    label: 'Components',
    to: '/docs/components',
    icon: DeveloperResourcesIcon,
    active: route.path.startsWith('/docs/components')
  },
  {
    label: 'REST API',
    to: 'https://apidocs.bitrix24.com',
    icon: Bitrix24Icon,
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases',
    icon: GitHubIcon,
    target: '_blank'
  }
])
</script>

<template>
  <B24Header
    :toggle="{
      color: 'air-boost',
      rounded: true
    }"
  >
    <template #title>
      <Logo class="h-6 w-auto text-(--b24ui-typography-label-color)" />
    </template>

    <B24NavigationMenu :items="items" />

    <template #right>
      <B24ColorModeButton />

      <B24Tooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <B24Button
          to="https://github.com/bitrix24/b24ui"
          target="_blank"
          :icon="GitHubIcon"
          aria-label="GitHub"
        />
      </B24Tooltip>
    </template>

    <template #body>
      <B24NavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </B24Header>
</template>

Toggle Side

Use the toggle-side prop to change the side of the toggle button. Defaults to left.

<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'
import PlayLIcon from '@bitrix24/b24icons-vue/outline/PlayLIcon'
import DeveloperResourcesIcon from '@bitrix24/b24icons-vue/outline/DeveloperResourcesIcon'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/docs/getting-started',
    icon: PlayLIcon,
    active: route.path.startsWith('/docs/getting-started')
  },
  {
    label: 'Components',
    to: '/docs/components',
    icon: DeveloperResourcesIcon,
    active: route.path.startsWith('/docs/components')
  },
  {
    label: 'REST API',
    to: 'https://apidocs.bitrix24.com',
    icon: Bitrix24Icon,
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases',
    icon: GitHubIcon,
    target: '_blank'
  }
])
</script>

<template>
  <B24Header toggle-side="right">
    <template #title>
      <Logo class="h-6 w-auto text-(--b24ui-typography-label-color)" />
    </template>

    <B24NavigationMenu :items="items" />

    <template #right>
      <B24ColorModeButton />

      <B24Tooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <B24Button
          to="https://github.com/bitrix24/b24ui"
          target="_blank"
          :icon="GitHubIcon"
          aria-label="GitHub"
        />
      </B24Tooltip>
    </template>

    <template #body>
      <B24NavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </B24Header>
</template>

Examples

Within `app.vue`

Use the Header 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'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/docs/getting-started',
    active: route.path.startsWith('/docs/getting-started')
  },
  {
    label: 'Components',
    to: '/docs/components',
    active: route.path.startsWith('/docs/components')
  },
  {
    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>
      <template #title>
        <Logo class="h-6 w-auto" />
      </template>

      <B24NavigationMenu :items="items" />

      <template #right>
        <B24ColorModeButton />

        <B24Button
          to="https://github.com/bitrix24/b24ui"
          target="_blank"
          :icon="GitHubIcon"
          aria-label="GitHub"
        />
      </template>

      <template #body>
        <B24NavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
      </template>
    </B24Header>

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

    <B24Footer />
  </B24App>
</template>

API

Props

Prop	Default	Type
`as`	`'header'`	`any` The element or component this component should render as.
`title`	`'Bitrix24 UI'`	`string`
`to`	`'/'`	`string`
`mode`	`'modal'`	`T` The mode of the header menu.
`menu`		`HeaderMenu<T>` The props for the header menu component.
`toggle`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Customize the toggle button to open the header menu displayed when the `content` slot is used. `{ color: 'air-tertiary', size: 'md' }`
`toggleSide`	`'left'`	`"left" \| "right"` The side to render the toggle button on.
`autoClose`	`true`	`boolean` Automatically close when route changes.
`open`	`false`	`boolean`
`b24ui`		`{ root?: ClassNameValue; container?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; title?: ClassNameValue; toggle?: ClassNameValue; content?: ClassNameValue; overlay?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; }`

Slots

Slot	Type
`title`	`{}`
`left`	`{}`
`default`	`{}`
`right`	`{}`
`toggle`	`{ open: boolean; toggle: () => void; b24ui: object; }`
`top`	`{}`
`bottom`	`{}`
`body`	`{}`
`content`	`{ close?: (() => void) \| undefined; }`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    header: {
      slots: {
        root: 'bg-(--ui-color-bg-content-primary)/75 backdrop-blur border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50',
        container: 'flex items-center justify-between gap-3 h-full',
        left: 'lg:flex-1 flex items-center gap-1.5',
        center: 'hidden lg:flex',
        right: 'flex items-center justify-end lg:flex-1 gap-1.5',
        title: 'shrink-0 font-bold text-xl text-(--b24ui-typography-label-color) flex items-end gap-1.5',
        toggle: 'lg:hidden',
        content: 'lg:hidden',
        overlay: 'lg:hidden',
        header: 'px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3',
        body: 'p-4 sm:p-6 overflow-y-auto'
      },
      variants: {
        toggleSide: {
          left: {
            toggle: '-ms-1.5'
          },
          right: {
            toggle: '-me-1.5'
          }
        }
      }
    }
  }
})

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: {
        header: {
          slots: {
            root: 'bg-(--ui-color-bg-content-primary)/75 backdrop-blur border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50',
            container: 'flex items-center justify-between gap-3 h-full',
            left: 'lg:flex-1 flex items-center gap-1.5',
            center: 'hidden lg:flex',
            right: 'flex items-center justify-end lg:flex-1 gap-1.5',
            title: 'shrink-0 font-bold text-xl text-(--b24ui-typography-label-color) flex items-end gap-1.5',
            toggle: 'lg:hidden',
            content: 'lg:hidden',
            overlay: 'lg:hidden',
            header: 'px-4 sm:px-6 h-(--b24ui-header-height) shrink-0 flex items-center justify-between gap-3',
            body: 'p-4 sm:p-6 overflow-y-auto'
          },
          variants: {
            toggleSide: {
              left: {
                toggle: '-ms-1.5'
              },
              right: {
                toggle: '-me-1.5'
              }
            }
          }
        }
      }
    })
  ]
})

Footer

A responsive footer for displaying copyright, links, and additional information.

Main

A main content element that expands to fill the full viewport height.

Header New