Tailwind CSS Academy · Lesson

Dashboard Shell and Sidebar

Set up the two-column dashboard shell with a fixed sidebar containing navigation links, icons, and a user profile section at the bottom.

Dashboard Layout Overview

An admin dashboard is structured around a persistent sidebar on the left and a main content area on the right. The sidebar is fixed-width and typically full viewport height, while the main area fills the remaining space and scrolls independently. This two-column shell is the foundation on which all dashboard widgets, tables, and charts are placed.

<!-- Dashboard shell structure -->
<div class="flex h-screen overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <aside class="w-64 flex-shrink-0">
    <!-- Navigation -->
  </aside>

  <!-- Main content area -->
  <div class="flex flex-1 flex-col overflow-hidden">
    <!-- Top bar -->
    <main class="flex-1 overflow-y-auto p-6">
      <!-- Page content -->
    </main>
  </div>
</div>

Building the Sidebar Shell

The sidebar uses flex h-full w-64 flex-col bg-gray-900 for a dark, full-height panel. flex-shrink-0 prevents it from compressing when the main content grows. Divide it into three sections using flex column layout: a logo area at the top, a scrollable nav section in the middle with flex-1 overflow-y-auto, and a user profile area pinned to the bottom.

<aside class="flex h-screen w-64 flex-shrink-0 flex-col bg-gray-900">
  <!-- Logo area -->
  <div class="flex h-16 items-center border-b border-gray-800 px-4">
    <div class="flex items-center gap-2 font-bold text-white">
      <div class="h-7 w-7 rounded-lg bg-blue-500"></div>
      Dashboard
    </div>
  </div>

  <!-- Scrollable navigation -->
  <nav class="flex-1 overflow-y-auto px-3 py-4">
    <!-- Navigation links -->
  </nav>

  <!-- User profile -->
  <div class="border-t border-gray-800 p-4">
    <!-- User info -->
  </div>
</aside>

All lessons in this course

← Back to Tailwind CSS Academy