Dashboard

Dashboard layout: sidebar, navbar, toolbar, panels.

Dashboard Layout Overview

Nuxt UI v4 dashboard components create a structured layout hierarchy for admin interfaces and control panels.

The dashboard layout system uses a set of composable components that work together. Each component handles a specific part of the dashboard structure:

DashboardGroup                     // Root layout — manages sidebar state
  DashboardSidebar                 // Left sidebar — resizable, collapsible
    header                         // Logo + collapse button
    NavigationMenu (vertical)      // Sidebar navigation links
  DashboardPanel                   // Main content area
    header                         // Slot for navbar + toolbar
      DashboardNavbar              // Title, breadcrumb, actions
      DashboardToolbar             // Filters, search, bulk actions
    body                           // Scrollable content area
      Content                      // Your page content goes here

DashboardGroup

Wraps everything. Provides context for sidebar state management and persistence.

DashboardSidebar

Resizable and collapsible sidebar with support for drag-to-collapse behavior.

DashboardPanel

Main content panel with header, body (scrollable), and footer slots.

DashboardNavbar + Toolbar

Navbar provides title and actions; toolbar provides filters and search controls.

Full-Page Demos

These demos use UDashboardGroup as the page root to render at full viewport.

Composed Dashboard

Full dashboard with sidebar, navbar, toolbar, and content area

Sidebar Variants

Collapsible and action-button sidebar configurations

Navbar & Toolbar

Standalone demonstrations of the DashboardNavbar and DashboardToolbar components with various configurations.

Navbar with title, icon, and right-side actions

Properties

Navbar with breadcrumb navigation

Toolbar with filter buttons and search input

Toolbar with bulk action controls

3 selected