Nativ ui
Documentation

Dashboard

Dashboard layout template structure.

Layout Structure

┌─────────────────────────────────────────────┐
│                  Header                      │
├──────────┬──────────────────────────────────┤
│          │                                   │
│ Sidebar  │           Main Content            │
│          │                                   │
│  200px   │            flex-1                 │
│          │                                   │
└──────────┴──────────────────────────────────┘

Components

Header

  • Logo/Brand
  • Search
  • Notifications
  • User menu

Sidebar

  • Navigation links
  • Collapsible sections
  • Active state indicators

Main Content

  • Page title
  • Action buttons
  • Content cards/tables

Code Structure

<div class="min-h-screen flex">
  <!-- Sidebar -->
  <aside class="w-64 border-r bg-muted/40">
    <nav class="p-4">
      <!-- Navigation items -->
    </nav>
  </aside>
 
  <!-- Main -->
  <div class="flex-1 flex flex-col">
    <!-- Header -->
    <header class="h-14 border-b flex items-center px-6">
      <!-- Header content -->
    </header>
 
    <!-- Content -->
    <main class="flex-1 p-6">
      <!-- Page content -->
    </main>
  </div>
</div>

Best Practices

  1. Persistent sidebar - Always visible on desktop
  2. Collapsible on mobile - Drawer pattern
  3. Breadcrumbs - Show location in hierarchy
  4. Quick actions - Common tasks easily accessible