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>
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:
<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:
<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' | anyThe element or component this component should render as when not a link. |
color | 'neutral' | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error" |
variant | 'ghost' | "ghost" | "solid" | "outline" | "soft" | "subtle" | "link" |
side | 'left' | "left" | "right"The side of the sidebar to collapse. |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
name | string | |
type | 'button' | "button" | "submit" | "reset"The type of the button when not a link. |
label | string | |
activeColor | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error" | |
activeVariant | "ghost" | "solid" | "outline" | "soft" | "subtle" | "link" | |
size | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
square | boolean Render the button with equal padding on all sides. | |
block | boolean Render the button full width. | |
loadingAuto | boolean Set loading state automatically based on the | |
icon | anyDisplay an icon based on the | |
avatar | AvatarPropsDisplay an avatar on the left side.
| |
leading | boolean When | |
leadingIcon | anyDisplay an icon on the left side. | |
trailing | boolean When | |
trailingIcon | anyDisplay an icon on the right side. | |
loading | boolean When | |
loadingIcon | appConfig.ui.icons.loading | anyThe icon when the |
ui | { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; } |
Theme
export default defineAppConfig({
ui: {
dashboardSidebarCollapse: {
base: 'hidden lg:flex',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
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: ''
}
}
}
}
})
]
})