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

https://github.com/bitrix24/b24ui/tree/main/src/theme/dashboard-toolbar.ts

export default {
  slots: {
    root: 'shrink-0 flex items-center justify-between border-0 px-4 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.

Chat

Develop AI-powered chat interfaces with streaming responses, reasoning capabilities, and tool calling.