Tailwind CSS Academy · Lesson

Vertical Sidebar Layout

Build a full-height sidebar with a logo, icon links, and an active state indicator, positioned alongside the main content area.

Purpose of a Vertical Sidebar

A vertical sidebar is a fixed-width column on the left (or right) side of a dashboard that holds primary navigation links. Unlike a top navbar, a sidebar keeps all navigation visible at once without taking up horizontal screen space.

The sidebar is paired with a main content area using a flex row: flex min-h-screen on the page wrapper, w-64 flex-shrink-0 on the sidebar, and flex-1 on the main content so it expands to fill remaining space.

<div class="flex min-h-screen">
  <aside class="w-64 flex-shrink-0 bg-gray-900 text-white"><!-- sidebar --></aside>
  <main class="flex-1 bg-gray-50 p-8"><!-- content --></main>
</div>

Sidebar Header With Logo

The sidebar header contains the product logo and name. Use flex items-center gap-3 px-6 py-5 border-b border-gray-800 to create a clean header section separated from the navigation links below.

Keep the logo small (w-7 h-7) so it does not overwhelm the sidebar's width. The product name uses text-lg font-bold text-white for prominence against the dark background.

<aside class="w-64 bg-gray-900 text-white flex flex-col">
  <div class="flex items-center gap-3 px-6 py-5 border-b border-gray-800">
    <div class="w-7 h-7 bg-blue-500 rounded-lg flex items-center justify-center">
      <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
        <path d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"/>
      </svg>
    </div>
    <span class="text-lg font-bold text-white">AdminKit</span>
  </div>
</aside>

All lessons in this course

← Back to Tailwind CSS Academy