Vue DashboardToolbar Component

Usage

The DashboardToolbar component is used to display a toolbar under the DashboardNavbar component.

Use it inside the header slot of the DashboardPanel component:

pages/index.vue

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <B24DashboardPanel>
    <template #header>
      <B24DashboardNavbar />

      <B24DashboardToolbar />
    </template>
  </B24DashboardPanel>
</template>

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

<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import InfoCircleIcon from '@bitrix24/b24icons-vue/outline/InfoCircleIcon'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import UserGroupIcon from '@bitrix24/b24icons-vue/common-b24/UserGroupIcon'
import Bell1Icon from '@bitrix24/b24icons-vue/main/Bell1Icon'
import OpenBookIcon from '@bitrix24/b24icons-vue/main/OpenBookIcon'

const items: NavigationMenuItem[][] = [
  [
    {
      label: 'General',
      icon: UserIcon,
      active: true
    },
    {
      label: 'Members',
      icon: UserGroupIcon
    },
    {
      label: 'Notifications',
      icon: Bell1Icon
    }
  ],
  [
    {
      label: 'Documentation',
      icon: OpenBookIcon,
      to: 'https://bitrix24.github.io/b24ui/',
      target: '_blank'
    },
    {
      label: 'Help & Feedback',
      icon: InfoCircleIcon,
      to: 'https://github.com/bitrix24/b24ui',
      target: '_blank'
    }
  ]
]
</script>

<template>
  <B24DashboardToolbar>
    <B24NavigationMenu :items="items" highlight class="flex-1" />
  </B24DashboardToolbar>
</template>

In this example, we use the NavigationMenu component to render some links.

API

Props

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

Slots

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

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    dashboardToolbar: {
      slots: {
        root: 'shrink-0 flex items-center justify-between border-b border-(--ui-color-divider-default) px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
        left: 'flex items-center gap-1.5',
        right: 'flex items-center gap-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: {
        dashboardToolbar: {
          slots: {
            root: 'shrink-0 flex items-center justify-between border-b border-(--ui-color-divider-default) px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
            left: 'flex items-center gap-1.5',
            right: 'flex items-center gap-1.5'
          }
        }
      }
    })
  ]
})

DashboardSidebarToggle

A mobile menu button that shows or hides the sidebar navigation.

ChatMessage

A chat message component with icon, avatar, and action buttons.

DashboardToolbar New

Usage

API

Props

Slots

Theme