1# Dashboard Layout
2 
3Build admin interfaces with resizable sidebars, multi-panel layouts, and toolbars.
4 
5## When to use
6 
7- Admin panels, back-office UIs
8- Email clients, project management tools
9- Any app with a persistent sidebar and content panels
10- Combine with chat or editor layouts for specialized dashboards
11 
12## Component tree
13 
14```
15UApp
16└── NuxtLayout (dashboard)
17    └── UDashboardGroup
18        ├── UDashboardSidebar
19        │   ├── #header (logo, search button)
20        │   ├── #default (navigation) — receives { collapsed } slot prop
21        │   └── #footer (user menu)
22        └── NuxtPage
23            └── UDashboardPanel
24                ├── #header → UDashboardNavbar + UDashboardToolbar
25                ├── #body (scrollable content)
26                └── #footer (optional)
27```
28 
29## Layout
30 
31```vue [layouts/dashboard.vue]
32<script setup lang="ts">
33import type { NavigationMenuItem } from '@nuxt/ui'
34 
35const items = computed<NavigationMenuItem[]>(() => [{
36  label: 'Home',
37  icon: 'i-lucide-house',
38  to: '/dashboard'
39}, {
40  label: 'Inbox',
41  icon: 'i-lucide-inbox',
42  to: '/dashboard/inbox'
43}, {
44  label: 'Users',
45  icon: 'i-lucide-users',
46  to: '/dashboard/users'
47}, {
48  label: 'Settings',
49  icon: 'i-lucide-settings',
50  to: '/dashboard/settings'
51}])
52</script>
53 
54<template>
55  <UDashboardGroup>
56    <UDashboardSidebar collapsible resizable>
57      <template #header="{ collapsed }">
58        <UDashboardSearchButton :collapsed="collapsed" />
59      </template>
60 
61      <template #default="{ collapsed }">
62        <UNavigationMenu
63          :collapsed="collapsed"
64          :items="items"
65          orientation="vertical"
66        />
67      </template>
68 
69      <template #footer="{ collapsed }">
70        <UButton
71          :icon="collapsed ? 'i-lucide-log-out' : undefined"
72          :label="collapsed ? undefined : 'Sign out'"
73          color="neutral"
74          variant="ghost"
75          block
76        />
77      </template>
78    </UDashboardSidebar>
79 
80    <slot />
81  </UDashboardGroup>
82</template>
83```
84 
85## Page
86 
87```vue [pages/dashboard/index.vue]
88<script setup lang="ts">
89definePageMeta({ layout: 'dashboard' })
90</script>
91 
92<template>
93  <UDashboardPanel>
94    <template #header>
95      <UDashboardNavbar title="Home">
96        <template #leading>
97          <UDashboardSidebarCollapse />
98        </template>
99        <template #right>
100          <UButton icon="i-lucide-plus" label="New" />
101        </template>
102      </UDashboardNavbar>
103    </template>
104 
105    <template #body>
106      <!-- Page content -->
107    </template>
108  </UDashboardPanel>
109</template>
110```
111 
112### Common mistakes
113 
114- Forgetting `definePageMeta({ layout: 'dashboard' })` — the page won't use the dashboard layout without it.
115- Putting content directly in `UDashboardPanel` without using `#body` slot — content won't scroll properly.
116- Not handling the `collapsed` slot prop — sidebar content should adapt when collapsed (hide labels, center icons).
117 
118## Key components
119 
120### DashboardGroup
121 
122Root wrapper. Manages sidebar state and persistence.
123 
124| Prop | Default | Purpose |
125|---|---|---|
126| `storage` | `'cookie'` | `'cookie'`, `'localStorage'`, `false` |
127| `storage-key` | `'dashboard'` | Storage key name |
128 
129### DashboardSidebar
130 
131Resizable, collapsible sidebar. Must be inside `DashboardGroup`.
132 
133| Prop | Default | Purpose |
134|---|---|---|
135| `resizable` | `false` | Drag to resize |
136| `collapsible` | `false` | Collapse when dragged to edge |
137| `side` | `'left'` | `'left'` or `'right'` |
138| `mode` | `'slideover'` | Mobile: `'modal'`, `'slideover'`, `'drawer'` |
139 
140All slots receive `{ collapsed, collapse }` — `collapsed` is the boolean state, `collapse(value)` toggles it programmatically. Use `v-model:collapsed` and `v-model:open` (mobile) for state control.
141 
142### DashboardPanel
143 
144Content panel with `#header`, `#body` (scrollable), `#footer`, and `#default` (raw, no scroll) slots.
145 
146### DashboardNavbar / DashboardToolbar
147 
148Navbar: `#leading`, `#left`, `#default`, `#right` slots + `title` prop. Use `UDashboardSidebarCollapse` in `#leading` to toggle sidebar on mobile.
149Toolbar: same slots, sits below navbar for filters/actions.
150 
151### UNavigationMenu in sidebar
152 
153Always pass `:collapsed="collapsed"` to `UNavigationMenu` inside a collapsible sidebar — it auto-hides labels and centers icons. Use `NavigationMenuItem[][]` (array of arrays) for separate groups (main nav + footer links).
154 
155## Multi-panel (list-detail)
156 
157```vue [pages/dashboard/inbox.vue]
158<script setup lang="ts">
159definePageMeta({ layout: 'dashboard' })
160</script>
161 
162<template>
163  <UDashboardPanel id="inbox-list" resizable>
164    <template #header>
165      <UDashboardNavbar title="Inbox" />
166    </template>
167    <template #body>
168      <!-- Email list -->
169    </template>
170  </UDashboardPanel>
171 
172  <UDashboardPanel id="inbox-detail" class="hidden lg:flex">
173    <template #header>
174      <UDashboardNavbar title="Message" />
175    </template>
176    <template #body>
177      <!-- Email content -->
178    </template>
179  </UDashboardPanel>
180</template>
181```
182 
183## With toolbar
184 
185```vue
186<UDashboardPanel>
187  <template #header>
188    <UDashboardNavbar title="Users" />
189    <UDashboardToolbar>
190      <template #left>
191        <UInput icon="i-lucide-search" placeholder="Search..." />
192      </template>
193      <template #right>
194        <USelect :items="['All', 'Active', 'Inactive']" />
195      </template>
196    </UDashboardToolbar>
197  </template>
198</UDashboardPanel>
199```
200 
201## With search
202 
203```vue [layouts/dashboard.vue]
204<template>
205  <UDashboardGroup>
206    <UDashboardSidebar>
207      <template #header>
208        <UDashboardSearchButton />
209      </template>
210    </UDashboardSidebar>
211 
212    <slot />
213 
214    <UDashboardSearch :groups="searchGroups" />
215  </UDashboardGroup>
216</template>
217```
218 
219## Right sidebar
220 
221```vue
222<UDashboardGroup>
223  <UDashboardSidebar collapsible resizable>
224    <!-- Left sidebar -->
225  </UDashboardSidebar>
226 
227  <slot />
228 
229  <UDashboardSidebar side="right" resizable>
230    <!-- Right sidebar -->
231  </UDashboardSidebar>
232</UDashboardGroup>
233```
234