Structure du tableau de bord et barre latérale
Configurez la structure du tableau de bord à deux colonnes avec une barre latérale fixe contenant des liens de navigation, des icônes et une section de profil utilisateur en bas.
Structure du tableau de bord et barre latérale est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
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>Sidebar Navigation Links
Navigation items in the sidebar combine an icon and a label. Use flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium as the base link style. Inactive links use text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. The active link is highlighted with bg-gray-800 text-white to show the current page.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Active link -->
<a href="/dashboard"
class="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2
text-sm font-medium text-white">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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-3"/>
</svg>
Overview
</a>
<!-- Inactive link -->
<a href="/users"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
text-gray-400 transition-colors hover:bg-gray-800 hover:text-white">
<!-- Icon + label -->
Users
</a>
</nav>Sidebar Navigation Groups
Group related navigation items under labeled sections for better discoverability. Add a section label with mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 before each group of links. This pattern is common in analytics and SaaS dashboards where there are 10 or more navigation destinations.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Main group -->
<p class="mb-2 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
Main
</p>
<a href="/dashboard" class="flex items-center gap-3 rounded-lg ...">Overview</a>
<a href="/analytics" class="flex items-center gap-3 rounded-lg ...">Analytics</a>
<!-- Settings group -->
<p class="mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
Settings
</p>
<a href="/billing" class="flex items-center gap-3 rounded-lg ...">Billing</a>
<a href="/team" class="flex items-center gap-3 rounded-lg ...">Team</a>
</nav>User Profile Area in Sidebar
The bottom of the sidebar shows the logged-in user's avatar, name, and email. Use flex items-center gap-3 to align the avatar and text. Add a settings icon button on the far right with ml-auto. Wrap the whole section in a subtle hover state: hover:bg-gray-800 rounded-lg p-2 cursor-pointer.
<div class="border-t border-gray-800 p-3">
<div class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-gray-800">
<img src="/avatar.jpg" alt="User" class="h-9 w-9 rounded-full">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-white">Jane Doe</p>
<p class="truncate text-xs text-gray-400">jane@example.com</p>
</div>
<button class="ml-auto rounded-md p-1 text-gray-400 hover:text-white">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35"/>
</svg>
</button>
</div>
</div>Main Content Area Wrapper
The main content area sits to the right of the sidebar. Use flex flex-1 flex-col overflow-hidden so it fills the remaining horizontal space and allows independent scrolling. The top bar docks at the top of this area (not the sidebar), and the main scrolling region sits below it using flex-1 overflow-y-auto.
<div class="flex flex-1 flex-col overflow-hidden">
<!-- Top bar (sticks to top of main area) -->
<header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
<!-- Search, notifications, avatar -->
</header>
<!-- Scrollable page content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
<!-- Dashboard widgets, tables, charts -->
</main>
</div>Mobile Sidebar Strategy
On mobile screens, the sidebar cannot be permanently visible without taking too much space. Hide it off-screen with -translate-x-full by default and slide it in when the hamburger menu is activated by toggling translate-x-0. Overlay the main content with a semi-transparent backdrop bg-black/50 that closes the sidebar on click. This pattern is identical to the one used in the collapsible sidebar lesson.
<!-- Overlay backdrop (shown when sidebar is open) -->
<div id="sidebar-backdrop"
class="fixed inset-0 z-20 hidden bg-black/50 lg:hidden"
onclick="closeSidebar()"></div>
<!-- Sidebar with transition -->
<aside id="sidebar"
class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full flex-col bg-gray-900
transition-transform duration-300 lg:relative lg:translate-x-0 lg:flex">
<!-- ... -->
</aside>Sidebar Width Variants
Some dashboards use a collapsed sidebar that shows only icons and expands on hover or via a toggle. Achieve this with CSS transitions on the sidebar width: default w-16 shows icons only, expanded w-64 shows labels. Transition with transition-all duration-300. Hide the text labels in collapsed mode using opacity-0 w-0 overflow-hidden.
<!-- Collapsible sidebar pattern -->
<aside id="sidebar"
class="flex flex-col bg-gray-900 transition-all duration-300"
:class="expanded ? 'w-64' : 'w-16'">
<a href="/dashboard" class="flex items-center gap-3 rounded-lg px-3 py-2">
<svg class="h-5 w-5 flex-shrink-0 text-gray-400"><!-- icon --></svg>
<span :class="expanded ? 'opacity-100' : 'opacity-0 w-0 overflow-hidden'"
class="transition-opacity duration-200 text-sm text-gray-400">
Overview
</span>
</a>
</aside>Sidebar Section Dividers
Use my-4 border-t border-gray-800 to add horizontal dividers between navigation groups in the sidebar. This creates a cleaner separation than just spacing alone. Keep dividers thin and dark so they blend with the sidebar background while still providing visual structure. Avoid overusing dividers — two or three per sidebar is typically enough.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Main group -->
<a href="/" class="...">Overview</a>
<a href="/analytics" class="...">Analytics</a>
<a href="/reports" class="...">Reports</a>
<!-- Divider -->
<div class="my-4 border-t border-gray-800"></div>
<!-- Settings group -->
<a href="/billing" class="...">Billing</a>
<a href="/api" class="...">API Keys</a>
</nav>Notification Badge on Nav Item
Some sidebar links need a notification badge to indicate unread items or pending actions. Add a small pill badge aligned to the right of the link using ml-auto. Style it as a small circle: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white for a count, or a smaller dot for a simple unread indicator.
<a href="/messages"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
text-gray-400 transition hover:bg-gray-800 hover:text-white">
<svg class="h-5 w-5"><!-- message icon --></svg>
Messages
<!-- Badge -->
<span class="ml-auto flex h-5 min-w-[20px] items-center justify-center
rounded-full bg-blue-500 px-1 text-xs font-semibold text-white">
3
</span>
</a>Dark and Light Sidebar Themes
While dark sidebars are traditional, light sidebars (bg-white border-r border-gray-200) with dark text are increasingly popular for a cleaner, modern look. The choice depends on your brand. A dark sidebar creates strong visual contrast and clearly separates navigation from content. A light sidebar feels airier and pairs well with white main content areas.
<!-- Dark sidebar -->
<aside class="w-64 bg-gray-900 text-gray-400">
<!-- Links: text-gray-400 hover:bg-gray-800 hover:text-white -->
<!-- Active: bg-gray-800 text-white -->
</aside>
<!-- Light sidebar -->
<aside class="w-64 border-r border-gray-200 bg-white text-gray-600">
<!-- Links: text-gray-600 hover:bg-gray-50 hover:text-gray-900 -->
<!-- Active: bg-blue-50 text-blue-700 -->
</aside>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building the two-column dashboard shell with a fixed sidebar and flexible main area, structuring sidebar navigation with groups, active states, and notification badges, and handling mobile sidebars with an off-screen translate and overlay backdrop. Next up we build the top bar and breadcrumbs.
Questions Fréquemment Posées
La leçon « Structure du tableau de bord et barre latérale » est-elle gratuite ?
Oui — le texte complet de « Structure du tableau de bord et barre latérale » 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 « Structure du tableau de bord et barre latérale » ?
Configurez la structure du tableau de bord à deux colonnes avec une barre latérale fixe contenant des liens de navigation, des icônes et une section de profil utilisateur en bas. 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 1 sur 4.
Combien de temps prend la leçon « Structure du tableau de bord et barre latérale » ?
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
- Structure du tableau de bord et barre latérale
- Barre supérieure et fil d’Ariane
- Cartes de statistiques et widgets KPI
- Tableau de données et espaces réservés pour graphiques