DashboardSidebarCollapse

ButtonGitHub
A Button to collapse the sidebar on desktop.

Usage

The DashboardSidebarCollapse component is used to collapse/expand the DashboardSidebar component when its collapsible prop is set.

<template>
  <UDashboardSidebarCollapse />
</template>

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

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

Examples

Within header slot

You can put this component in the header slot of the DashboardSidebar component and use the collapsed prop to hide the left part of the header for example:

layouts/dashboard.vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar collapsible>
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" />

        <UDashboardSidebarCollapse variant="subtle" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

Within leading slot

You can put this component in the leading slot of the DashboardNavbar component to display it before the title for example:

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

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Home">
        <template #leading>
          <UDashboardSidebarCollapse variant="subtle" />
        </template>
      </UDashboardNavbar>
    </template>
  </UDashboardPanel>
</template>

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: {
    dashboardSidebarCollapse: {
      base: 'hidden lg:flex',
      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: {
        dashboardSidebarCollapse: {
          base: 'hidden lg:flex',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Changelog

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

DashboardSidebar

A resizable and collapsible sidebar to display in a dashboard.

DashboardSidebarToggle

A Button to toggle the sidebar on mobile.