DashboardSidebarToggle

ButtonGitHub
Customize the toggle button to open the sidebar. { color: 'neutral', variant: 'ghost' }

Usage

The DashboardSidebarToggle component is used by the DashboardNavbar and DashboardSidebar components.

It is automatically displayed on mobile to toggle the sidebar, you don't have to add it manually.

<template>
  <UDashboardSidebarToggle />
</template>

It extends the Button component, so you can pass any property such as color, variant, size, etc.

<template>
  <UDashboardSidebarToggle variant="subtle" />
</template>
The button defaults to color="neutral" and variant="ghost".

Examples

Within toggle slot

Even though this component is automatically displayed on mobile, you can use the toggle slot of the DashboardNavbar and DashboardSidebar components to customize the button.

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <template #toggle>
        <UDashboardSidebarToggle variant="subtle" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>
When using the toggle-side prop of the DashboardSidebar and DashboardNavbar components, the button will be displayed on the specified side.

API

Props

Prop Default Type
as

'button'

any

The element or component this component should render as when not a link.

side

'left'

"left" | "right"

color

'neutral'

"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"

variant

'ghost'

"link" | "ghost" | "solid" | "outline" | "soft" | "subtle"

disabled

boolean

size

'md'

"xs" | "sm" | "md" | "lg" | "xl"

ui

{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    dashboardSidebarToggle: {
      base: 'lg:hidden',
      variants: {
        side: {
          left: '',
          right: ''
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSidebarToggle: {
          base: 'lg:hidden',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Changelog

5cb65 — feat: import @nuxt/ui-pro components

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.