Usage

The DashboardNavbar component is a responsive navigation bar that integrates with the DashboardSidebar component. It includes a mobile toggle button to enable responsive navigation in dashboard layouts.

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 />
    </template>
  </B24DashboardPanel>
</template>

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

Inbox

<template>
  <B24DashboardNavbar title="Inbox">
    <template #leading>
      <B24DashboardSidebarCollapse />
    </template>

    <template #trailing>
      <B24Badge label="4" />
    </template>

    <template #right>
      <B24FieldGroup>
        <B24Button label="All" />
        <B24Button label="Unread" />
      </B24FieldGroup>
    </template>
  </B24DashboardNavbar>
</template>

Title

Use the title prop to set the title of the navbar.

title

Dashboard

<template>
  <B24DashboardNavbar title="Dashboard" />
</template>

Icon

Use the icon prop to set the icon of the navbar.

Dashboard

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24DashboardNavbar title="Dashboard" :icon="RocketIcon" />
</template>

Toggle

Use the toggle prop to customize the toggle button displayed on mobile that opens the DashboardSidebar component.

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

<template>
  <B24DashboardNavbar
    title="Dashboard"
    :toggle="{
      color: 'air-primary',
      rounded: true
    }"
  />
</template>

Toggle Side

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

<template>
  <B24DashboardNavbar
    title="Dashboard"
    toggle-side="right"
  />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`icon`		`IconComponent` The icon displayed next to the title.
`title`		`string`
`toggle`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Customize the toggle button to open the sidebar. `{ color: 'air-tertiary', size: 'md' }`
`toggleSide`	`'left'`	`"left" \| "right"` The side to render the toggle button on.
`b24ui`		`{ root?: ClassNameValue; left?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; toggle?: ClassNameValue; }`

Slots

Slot	Type
`title`	`{}`
`leading`	`DashboardNavbarSlotsProps & { b24ui: object; }`
`trailing`	`DashboardNavbarSlotsProps & { b24ui: object; }`
`left`	`DashboardNavbarSlotsProps`
`default`	`DashboardNavbarSlotsProps`
`right`	`DashboardNavbarSlotsProps`
`toggle`	`DashboardNavbarSlotsProps & { b24ui: object; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    dashboardNavbar: {
      slots: {
        root: 'h-(--b24ui-header-height) shrink-0 flex items-center justify-between border-b border-(--ui-color-divider-default) px-4 gap-1.5',
        left: 'flex items-center gap-1.5 min-w-0',
        icon: 'shrink-0 size-5 self-center me-1.5',
        title: 'flex items-center gap-1.5 font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-label-color) truncate',
        center: 'hidden lg:flex',
        right: 'flex items-center shrink-0 gap-1.5',
        toggle: ''
      },
      variants: {
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: ''
          }
        }
      }
    }
  }
})

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: {
        dashboardNavbar: {
          slots: {
            root: 'h-(--b24ui-header-height) shrink-0 flex items-center justify-between border-b border-(--ui-color-divider-default) px-4 gap-1.5',
            left: 'flex items-center gap-1.5 min-w-0',
            icon: 'shrink-0 size-5 self-center me-1.5',
            title: 'flex items-center gap-1.5 font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-label-color) truncate',
            center: 'hidden lg:flex',
            right: 'flex items-center shrink-0 gap-1.5',
            toggle: ''
          },
          variants: {
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: ''
              }
            }
          }
        }
      }
    })
  ]
})

DashboardGroup

A fixed-layout dashboard container with sidebar state management and persistent UI state.

DashboardPanel

A resizable panel component for dashboards.

DashboardNavbar New

Inbox

Dashboard

Dashboard