Disposition avec barre latérale verticale
Créez une barre latérale pleine hauteur avec logo, liens accompagnés d’icônes et indicateur d’état actif, positionnée à côté de la zone de contenu principale.
Disposition avec barre latérale verticale est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Disposition avec barre latérale verticale » est-elle gratuite ?
Oui — le texte complet de « Disposition avec barre latérale verticale » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Disposition avec barre latérale verticale » ?
Créez une barre latérale pleine hauteur avec logo, liens accompagnés d’icônes et indicateur d’état actif, positionnée à côté de la zone de contenu principale. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Disposition avec barre latérale verticale » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer une barre de navigation réactive
- Navigation fixe et collante
- Disposition avec barre latérale verticale
- Barre latérale mobile rétractable