Vertical Sidebar Layout
Build a full-height sidebar with a logo, icon links, and an active state indicator, positioned alongside the main content area.
Vertical Sidebar Layout is a free Tailwind CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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>Navigation Link Styles
Sidebar navigation links sit inside a scrollable <nav> element with flex-1 overflow-y-auto px-4 py-6. Each link is a block with padding for a comfortable click target: flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium.
The default (inactive) state uses text-gray-400 hover:bg-gray-800 hover:text-white. The active link uses bg-gray-800 text-white to show where the user currently is.
<nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
<!-- Active link -->
<a href="/dashboard"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-gray-800 text-white">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Dashboard
</a>
<!-- Inactive link -->
<a href="/users"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
Users
</a>
</nav>Sidebar Section Groups
For dashboards with many links, organize them into labeled sections. Add a small uppercase section label like px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 before each group of related links.
Separate sections with mt-6 spacing for visual breathing room. This makes large sidebars much easier to scan.
<nav class="flex-1 overflow-y-auto px-4 py-6">
<!-- Section: Main -->
<p class="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Main</p>
<div class="space-y-1">
<a href="/" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-gray-800 text-white">Overview</a>
<a href="/analytics" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">Analytics</a>
</div>
<!-- Section: Settings -->
<p class="mt-6 px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Settings</p>
<div class="space-y-1">
<a href="/profile" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">Profile</a>
<a href="/billing" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">Billing</a>
</div>
</nav>Active State With Left Border Accent
An alternative active state style uses a left border accent instead of a background fill. Apply border-l-2 border-blue-500 text-white on the active link and border-l-2 border-transparent on inactive links.
This creates a subtle indicator that does not visually block the entire link row. The transparent border on inactive links ensures all links stay the same width, preventing layout shifts when the active state changes.
<nav class="flex-1 px-4 py-6 space-y-1">
<!-- Active with left border -->
<a href="/"
class="flex items-center gap-3 pl-4 pr-3 py-2 text-sm font-medium
text-white border-l-2 border-blue-500">
Overview
</a>
<!-- Inactive with transparent left border -->
<a href="/analytics"
class="flex items-center gap-3 pl-4 pr-3 py-2 text-sm font-medium
text-gray-400 border-l-2 border-transparent
hover:text-white hover:border-gray-600 transition-colors">
Analytics
</a>
</nav>Badge Counts on Sidebar Links
Sidebar links often display notification counts or status badges. Use flex items-center justify-between on the link and add a ml-auto badge to push it to the right side of the link row.
Keep the badge small (px-2 py-0.5 rounded-full text-xs font-bold) and use a color that contrasts against the sidebar background.
<a href="/messages"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium
text-gray-400 hover:bg-gray-800 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5-1-5z"/>
</svg>
Messages
<span class="ml-auto px-2 py-0.5 rounded-full text-xs font-bold bg-blue-600 text-white">4</span>
</a>Collapsible Sidebar Section
Large dashboards sometimes need expandable/collapsible sections within the sidebar. A section header button toggles visibility of child links using JavaScript class toggling. The toggle arrow rotates with a CSS transition to indicate open or closed state.
Use rotate-90 on the arrow when the section is open, controlled by toggling a class. Child links appear in a mt-1 ml-4 space-y-1 nested list.
<div>
<button
onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-90')"
class="w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">
<span class="flex items-center gap-3">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
Reports
</span>
<svg class="w-4 h-4 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
<div class="hidden mt-1 ml-4 space-y-1">
<a href="/reports/weekly" class="block px-3 py-2 rounded-lg text-xs text-gray-400 hover:bg-gray-800 hover:text-white">Weekly</a>
<a href="/reports/monthly" class="block px-3 py-2 rounded-lg text-xs text-gray-400 hover:bg-gray-800 hover:text-white">Monthly</a>
</div>
</div>User Profile Section at Bottom
The bottom of the sidebar typically holds a user profile section. Use mt-auto on this section so it naturally pushes to the bottom of the flex column. Show the user's avatar, name, and email in a compact row.
Adding a settings or logout button gives users quick access to account actions without cluttering the main navigation area.
<aside class="w-64 bg-gray-900 text-white flex flex-col h-screen">
<!-- Logo -->
<div class="px-6 py-5 border-b border-gray-800">
<span class="font-bold text-white">AdminKit</span>
</div>
<!-- Nav links (fills space) -->
<nav class="flex-1 px-4 py-6">
<!-- links... -->
</nav>
<!-- User profile at bottom -->
<div class="mt-auto border-t border-gray-800 p-4">
<div class="flex items-center gap-3">
<img src="avatar.jpg" alt="" class="w-8 h-8 rounded-full object-cover" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-white truncate">Jane Doe</p>
<p class="text-xs text-gray-400 truncate">jane@example.com</p>
</div>
<button class="text-gray-400 hover:text-white">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
</button>
</div>
</div>
</aside>Icon-Only Compact Sidebar
A compact icon sidebar shows only icons (no text labels) to save space. This variant uses w-16 instead of w-64 and removes the text spans from each link, keeping only the SVG icon inside a centered container.
Tooltips on hover reveal the link's name. Use group relative on each link and an absolutely positioned tooltip that appears with group-hover:opacity-100.
<aside class="w-16 bg-gray-900 flex flex-col items-center py-6 gap-2">
<a href="/"
class="group relative p-3 rounded-xl bg-gray-800 text-white"
aria-label="Dashboard">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
<span class="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-2 py-1 rounded
bg-gray-900 text-white text-xs whitespace-nowrap
opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
Dashboard
</span>
</a>
</aside>Light Theme Sidebar Variant
Not all sidebars use dark backgrounds. A light sidebar uses bg-white border-r border-gray-200 for a clean, minimal look popular in productivity apps. Link colors switch to text-gray-600 hover:bg-gray-100 hover:text-gray-900 and the active state uses bg-blue-50 text-blue-700.
Light sidebars blend well with light-themed main content areas and are less visually heavy than dark variants.
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
<div class="px-6 py-5 border-b border-gray-100">
<span class="text-lg font-bold text-gray-900">AppDash</span>
</div>
<nav class="flex-1 px-4 py-6 space-y-1">
<a href="/"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-blue-50 text-blue-700">
Overview
</a>
<a href="/users"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors">
Users
</a>
<a href="/settings"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors">
Settings
</a>
</nav>
</aside>Responsive Sidebar Visibility
On mobile, the sidebar should be hidden and replaced by a hamburger menu in the top bar. Use hidden lg:flex on the sidebar so it only appears on large screens. On smaller screens, the mobile drawer (covered in the next lesson) takes its place.
This responsive pattern is the industry standard for dashboard applications — sidebar on desktop, drawer on mobile.
<div class="flex min-h-screen">
<!-- Sidebar: hidden on small screens -->
<aside class="hidden lg:flex w-64 flex-shrink-0 flex-col bg-gray-900 text-white">
<!-- ... sidebar content ... -->
</aside>
<!-- Main content -->
<div class="flex-1 flex flex-col">
<!-- Top bar: shown on small screens, hidden when sidebar is visible -->
<header class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
<span class="font-bold text-gray-900">AppDash</span>
<button aria-label="Open menu" class="p-2 text-gray-600 hover:bg-gray-100 rounded-md">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</header>
<main class="flex-1 p-8 bg-gray-50"><!-- page content --></main>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: the sidebar shell uses flex min-h-screen on the page wrapper with a fixed-width sidebar and flex-1 main content; active link styles are expressed with background fill (bg-gray-800 text-white) or a left border accent; and the user profile section is pinned to the sidebar's bottom using mt-auto on a flex column. Next up we build a collapsible mobile sidebar drawer.
Frequently asked questions
Is the “Vertical Sidebar Layout” lesson free?
Yes — the full text of “Vertical Sidebar Layout” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Vertical Sidebar Layout”?
Build a full-height sidebar with a logo, icon links, and an active state indicator, positioned alongside the main content area. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Vertical Sidebar Layout” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Building a Responsive Navbar
- Sticky and Fixed Navigation
- Vertical Sidebar Layout
- Collapsible Mobile Sidebar