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".header slotYou 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>
leading slotYou 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>
| Prop | Default | Type |
|---|---|---|
as | 'button' | anyThe element or component this component should render as when not a link. |
color | 'neutral' | "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" |
variant | 'ghost' | "link" | "ghost" | "solid" | "outline" | "soft" | "subtle" |
side | 'left' | "left" | "right"The side of the sidebar to collapse. |
name | string | |
label | string | |
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGenericRoute Location the link should navigate to when clicked on.
| |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
type | 'button' | "reset" | "submit" | "button"The type of the button when not a link. |
download | any | |
hreflang | string | |
media | string | |
ping | string | |
target | null | string & {} | "_blank" | "_parent" | "_self" | "_top"Where to display the linked URL, as the name for a browsing context. | |
referrerpolicy | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | |
active | boolean Force the link to be active independent of the current route. | |
trailingSlash | "append" | "remove"An option to either add or remove trailing slashes in the | |
activeColor | "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | |
activeVariant | "link" | "ghost" | "solid" | "outline" | "soft" | "subtle" | |
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 | string | objectDisplay an icon based on the | |
avatar | AvatarPropsDisplay an avatar on the left side.
| |
leading | boolean When | |
leadingIcon | string | objectDisplay an icon on the left side. | |
trailing | boolean When | |
trailingIcon | string | objectDisplay an icon on the right side. | |
loading | boolean When | |
loadingIcon | appConfig.ui.icons.loading | string | objectThe icon when the |
ui | { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; } |
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: ''
}
}
}
}
})
]
})