Usage
The DashboardSidebar component provides a flexible sidebar for dashboard layouts with support for resizing, collapsing, and responsive menu modes.
<template>
<UDashboardSidebar v-model:open="sidebarOpen">
<nav>
<UButton label="Dashboard" variant="ghost" block />
<UButton label="Settings" variant="ghost" block />
<UButton label="Profile" variant="ghost" block />
</nav>
</UDashboardSidebar>
</template>
<script setup lang="ts">
const sidebarOpen = ref(false)
</script>
Resizable
Enable resizing to allow users to adjust the sidebar width.
<UDashboardSidebar
id="main-sidebar"
resizable
:min-size="10"
:max-size="30"
:default-size="20"
>
<nav>
<!-- Navigation items -->
</nav>
</UDashboardSidebar>
Collapsible
Enable collapsing to minimize the sidebar.
<UDashboardSidebar
v-model:collapsed="isCollapsed"
collapsible
:collapsed-size="5"
>
<template #default="{ collapsed }">
<nav>
<UButton
:icon="collapsed ? 'i-heroicons-home' : undefined"
:label="collapsed ? undefined : 'Dashboard'"
variant="ghost"
block
/>
</nav>
</template>
</UDashboardSidebar>
<script setup lang="ts">
const isCollapsed = ref(false)
</script>
modal, slideover, and drawer.
<UDashboardSidebar
v-model:open="sidebarOpen"
mode="slideover"
:menu="{ side: 'left' }"
>
<nav>
<!-- Navigation items -->
</nav>
</UDashboardSidebar>
Modal Mode
<UDashboardSidebar
mode="modal"
:menu="{ fullscreen: true }"
>
<!-- Content -->
</UDashboardSidebar>
Drawer Mode
<UDashboardSidebar
mode="drawer"
>
<!-- Content -->
</UDashboardSidebar>
Side
Control which side the sidebar appears on.
<UDashboardSidebar side="right">
<nav>
<!-- Navigation items -->
</nav>
</UDashboardSidebar>
<UDashboardSidebar>
<template #header>
<div class="p-4">
<h2 class="font-bold">My App</h2>
</div>
</template>
<nav>
<!-- Navigation items -->
</nav>
<template #footer>
<div class="p-4">
<UButton label="Logout" block />
</div>
</template>
</UDashboardSidebar>
Custom Toggle
Customize the toggle button.
<UDashboardSidebar
:toggle="{ color: 'primary', variant: 'solid' }"
toggle-side="right"
>
<!-- Content -->
</UDashboardSidebar>
Auto Close
The sidebar automatically closes when the route changes by default. Disable this behavior:
<UDashboardSidebar :auto-close="false">
<!-- Content -->
</UDashboardSidebar>
Props
Unique identifier for the sidebar (used for persistence).
side
'left' | 'right'
default:"'left'"
Which side of the screen the sidebar appears on.
mode
'modal' | 'slideover' | 'drawer'
default:"'slideover'"
The mode of the sidebar menu for responsive layouts.
Props for the sidebar menu component (based on mode).
toggle
boolean | ButtonProps
default:"true"
Customize the toggle button to open the sidebar.
toggleSide
'left' | 'right'
default:"'left'"
The side to render the toggle button on.
Automatically close when route changes.
Enable sidebar collapsing.
Size percentage when collapsed.
Custom class to apply to the root element.
Override default theme classes.
Models
Controls whether the sidebar menu is open.
Controls whether the sidebar is collapsed.
Slots
Customize the sidebar header.
Customize the main sidebar content.
Customize the sidebar footer.
Customize the toggle button.
Customize the menu content.
resize-handle
{ onMouseDown, onTouchStart, onDoubleClick, ui }
Customize the resize handle.