NuxtUi: Dashboard Components | Nuxt | Page 1

ashen sentinelBOT Jan 13, 2026, 7:02 PM

#

Hi @ripe sentinel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Here’s a minimal example of how the Nuxt UI dashboard components fit together into a working layout.

1. Create a `dashboard` layout

Use UDashboardGroup as the root, then place UDashboardSidebar and a slot (for panels) inside it. [DashboardGroup; DashboardSidebar]

<!-- layouts/dashboard.vue -->
<template>
  <UDashboardGroup>
    <UDashboardSidebar collapsible resizable>
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" class="h-5 w-auto shrink-0" />
        <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
      </template>

      <template #default="{ collapsed }">
        <UNavigationMenu
          :collapsed="collapsed"
          :items="[
            { label: 'Home', icon: 'i-lucide-house', active: true },
            { label: 'Inbox', icon: 'i-lucide-inbox' }
          ]"
          orientation="vertical"
        />
      </template>
    </UDashboardSidebar>

    <!-- Page content (panels) will be rendered here -->
    <slot />
  </UDashboardGroup>
</template>

2. Use the layout in a page with a panel + navbar (+ optional toolbar)

UDashboardPanel goes inside the group (via the layout slot). Put UDashboardNavbar in the panel’s header slot; you can also add UDashboardToolbar under the navbar. [DashboardPanel; DashboardNavbar; DashboardToolbar]

<!-- pages/index.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

#

  <!-- Optional toolbar under navbar -->
  <UDashboardToolbar>
    <span class="text-sm text-muted-foreground">
      Toolbar content here
    </span>
  </UDashboardToolbar>
</template>

<template #body>
  <!-- Main page content -->
  <div class="p-4">
    Your dashboard content
  </div>
</template>

</UDashboardPanel>
</template>


### 3. Mobile behavior

- On mobile, `UDashboardNavbar` automatically shows a toggle button to open the sidebar; you can customize it with the `toggle` and `toggle-side` props. [[DashboardNavbar](<https://ui.nuxt.com/docs/components/dashboard-navbar>)]
- `UDashboardSidebarToggle` is used internally and can be customized via the `toggle` prop or `toggle` slot on `DashboardNavbar`/`DashboardSidebar` if needed. [[DashboardSidebarToggle](<https://ui.nuxt.com/docs/components/dashboard-sidebar-toggle>); [DashboardSidebar mode](<https://ui.nuxt.com/docs/components/dashboard-sidebar#mode>)]

If you share what you want (single panel, multiple panels, special toolbar, etc.), I can adapt this into a more specific snippet.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@ripe sentinel Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ripe sentinel Jan 13, 2026, 7:04 PM

#

<template>
  <UDashboardGroup>
    <UDashboardPanel>
      <template #header>
        <UDashboardNavbar title="Inbox">
          <template #leading>
            <UDashboardSidebarCollapse />
          </template>

          <template #trailing>
            <UBadge label="4" variant="subtle" />
          </template>

          <template #right>
            <UTabs
              :items="items"
              default-value="students"
              size="sm"
              class="w-40"
              :content="false"
            />
          </template>
        </UDashboardNavbar>
        <UDashboardToolbar>
          <UNavigationMenu
            :items="navigationMenuItems"
            highlight
            class="flex-1"
          />
        </UDashboardToolbar>
      </template>
    </UDashboardPanel>

    <UDashboardSidebar
      dir="rtl"
      id="default"
      v-model:open="open"
      collapsible
      class="bg-elevated/25"
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >
      <template #header="{ collapsed }">
        <TeamsMenu :collapsed="collapsed" />
      </template>

      <template #default="{ collapsed }">
        <UDashboardSearchButton
          :collapsed="collapsed"
          class="bg-transparent ring-default"
        />

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links[0]"
          orientation="vertical"
          popover
        />

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links[1]"
          orientation="vertical"
          class="mt-auto"
        />
      </template>

      <template #footer="{ collapsed }">
        <UserMenu :collapsed="collapsed" />
      </template>
    </UDashboardSidebar>

    <slot />

    <UDashboardSearch :groups="groups" />

    <NotificationsSlideover />
  </UDashboardGroup>
</template>

#

@ashen sentinel what's wrong here?

ashen sentinelBOT Jan 13, 2026, 7:06 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I’m sorry, but the knowledge sources don’t include your current code or error output, so I can’t see what’s wrong in your specific case.

From the docs, a minimal correct setup for Nuxt UI dashboard components looks like this:

Layout (layouts/dashboard.vue) [DashboardGroup; DashboardSidebar]

<template>
  <UDashboardGroup>
    <UDashboardSidebar collapsible resizable>
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" class="h-5 w-auto shrink-0" />
        <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

Page (pages/index.vue) [DashboardPanel; DashboardNavbar; DashboardSidebarCollapse]

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel resizable>
    <template #header>
      <UDashboardNavbar title="Dashboard">
        <template #leading>
          <UDashboardSidebarCollapse variant="subtle" />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <div class="p-4">
        Content
      </div>
    </template>
  </UDashboardPanel>
</template>

Common issues (based on the docs):

#

Using UDashboardSidebarCollapse without collapsible on UDashboardSidebar → it will have no effect. [Sidebar collapsible; SidebarCollapse usage]
Using UDashboardSidebar / UDashboardPanel outside of UDashboardGroup. [DashboardGroup usage]
Forgetting to set the dashboard layout via definePageMeta.

Please paste your layout + page code (or the error message), and I can point out exactly what’s wrong.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@ripe sentinel Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ripe sentinel Jan 13, 2026, 7:07 PM

#

what is panel, what goes inside it?

#

@ashen sentinel

ashen sentinelBOT Jan 13, 2026, 7:07 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

Sorry @ripe sentinel, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

ripe sentinel Jan 13, 2026, 7:17 PM

#

#

why the dashboard is on the left, although the app dir is set to be rtl?

#

@ashen sentinel

ashen sentinelBOT Jan 13, 2026, 7:31 PM

#

Let me check the knowledge base for you again. One moment! :books:

#NuxtUi: Dashboard Components

1. Create a dashboard layout

2. Use the layout in a page with a panel + navbar (+ optional toolbar)

Please paste your layout + page code (or the error message), and I can point out exactly what’s wrong.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

1. Create a `dashboard` layout