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>
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<UDashboardPanel>
<template #header>
<UDashboardNavbar title="Home">
<template #toggle>
<UDashboardSidebarToggle variant="subtle" />
</template>
</UDashboardNavbar>
</template>
</UDashboardPanel>
</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 |
|---|
Theme
app.config.ts
export default defineAppConfig({
uiPro: {
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({
uiPro: {
dashboardSidebarToggle: {
base: 'lg:hidden',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
dashboardSidebarToggle: {
base: 'lg:hidden',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
]
})