Créer une barre de navigation réactive
Créez une barre de navigation horizontale avec logo, liens et CTA, qui se replie en menu hamburger sur mobile grâce aux utilitaires réactifs hidden et flex.
Créer une barre de navigation réactive 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.
Anatomy of a Navbar
A navigation bar (navbar) sits at the top of a page and typically contains a logo on the left, navigation links in the center or right, and a call-to-action button at the far right. On mobile, the links collapse into a hamburger menu to save space.
The navbar shell uses flex items-center justify-between to distribute these three zones horizontally, with px-6 py-4 for comfortable padding.
<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
<!-- Logo -->
<a href="/" class="text-xl font-bold text-blue-600">Brand</a>
<!-- Nav links (hidden on mobile) -->
<div class="hidden md:flex items-center gap-6">...</div>
<!-- CTA -->
<button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>Logo and Brand Area
The logo area is typically an anchor tag wrapping either an SVG logo or a text-based brand name. Use flex items-center gap-2 if combining an icon and text, so they align vertically.
Keep the logo font bold and use your brand's primary color: font-bold text-xl text-blue-600. Make the anchor keyboard-focusable with a focus:outline-none focus-visible:ring-2 focus style.
<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
<svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
<span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>Desktop Navigation Links
The desktop nav links sit inside a hidden md:flex items-center gap-6 wrapper — invisible on small screens and displayed as a flex row on medium screens and above. Each link uses text-sm font-medium text-gray-600 hover:text-gray-900 for a subtle default style that darkens on hover.
Add transition-colors duration-150 for a smooth color change on hover, and use a different text color or underline to indicate the currently active page.
<div class="hidden md:flex items-center gap-6">
<a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
<a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
<a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
<a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>Desktop CTA and Login Button
The right side of the navbar typically holds a ghost Sign in link and a solid Sign up button. Wrapping them in hidden md:flex items-center gap-3 keeps them hidden on mobile and aligned on desktop.
Using both buttons together creates a clear hierarchy: the ghost link for returning users and the solid button for new user acquisition.
<div class="hidden md:flex items-center gap-3">
<a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
Sign in
</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
Get Started
</a>
</div>Hamburger Menu Button
On mobile, a hamburger button replaces the desktop links. Show it only on small screens with md:hidden and give it an accessible aria-label="Open menu" attribute.
The button renders three horizontal lines (a classic hamburger icon) using an SVG. When clicked, JavaScript toggles a class to reveal the mobile menu panel. The button itself uses p-2 text-gray-600 hover:bg-gray-100 rounded-md for a comfortable tap area.
<button
id="menu-btn"
aria-label="Open menu"
class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
<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>Mobile Menu Panel
The mobile menu is a full-width panel that appears below the navbar when the hamburger button is pressed. It is hidden by default with the hidden class, which JavaScript removes when the button is clicked.
Stack the links vertically with flex flex-col gap-1 px-4 pb-4 and give each link block py-2 text-base font-medium for a large, thumb-friendly tap target.
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
<div class="flex flex-col gap-1 px-4 pb-4 pt-2">
<a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
<a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
<a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
<a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
<a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
Get Started
</a>
</div>
</div>Putting the Full Navbar Together
Assemble all parts into a single <nav> element. The structure is: wrapper nav with shadow, then inside it a max-width container with three zones — logo, desktop links, and desktop CTA — followed by the full-width mobile menu panel outside the container.
The max-w-7xl mx-auto inner wrapper prevents the navbar content from stretching too wide on large monitors while letting the background extend edge to edge.
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="text-xl font-bold text-blue-600">Brand</a>
<div class="hidden md:flex items-center gap-6">
<a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
<a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="/login" class="text-sm text-gray-600">Sign in</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
</div>
<button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
onclick="document.getElementById('mob').classList.toggle('hidden')">
<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>
</div>
<div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
<a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
<a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
<a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
</div>
</nav>Active Link Indicator
An active link indicator shows users which page they are currently on. A common pattern is to use a bottom border or text color change. Apply text-blue-600 border-b-2 border-blue-600 pb-0.5 to the active link so it stands out from the gray links.
In server-rendered apps, add the active classes conditionally on the server. In JS frameworks, compare the current route to the link href and apply the classes programmatically.
<div class="hidden md:flex items-center gap-6">
<!-- Active link -->
<a href="/features"
class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
Features
</a>
<!-- Inactive links -->
<a href="/pricing"
class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
Pricing
</a>
<a href="/blog"
class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
Blog
</a>
</div>Navbar With Search Input
Adding a search field to the navbar is a common requirement for content-heavy sites. Place the search input in the center of the navbar using flex-1 max-w-md mx-8 to give it flexible width while keeping it proportional.
Style the input with w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 for a clean search bar with a focus ring.
<div class="flex-1 max-w-md mx-8">
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
</svg>
<input
type="search"
placeholder="Search..."
class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>Dropdown Nav Item
A dropdown navigation item reveals a submenu when hovered or clicked. Use the group utility on the parent link and group-hover:block on the initially hidden submenu to implement a pure CSS hover dropdown.
Position the dropdown with absolute top-full left-0 mt-1 to place it just below the parent link. Add min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 to give it a proper panel appearance.
<div class="relative group">
<button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
Products
<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="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
<a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
<a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
<a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
</div>
</div>Dark Navbar Variant
A dark navbar uses a dark background like bg-gray-900 with light text. Switch text-gray-600 to text-gray-300 for links, hover:text-white for hover states, and adjust the button to bg-blue-500 since it needs to stand out against the dark background.
Dark navbars are popular for developer tools, SaaS dashboards, and any product targeting a technical audience.
<nav class="bg-gray-900 shadow-lg">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="text-xl font-bold text-white">DevTool</a>
<div class="hidden md:flex items-center gap-6">
<a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
<a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
<a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
</div>
<a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
Dashboard
</a>
</div>
</nav>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: responsive navbar structure with a three-zone flex layout (logo, links, CTA); hamburger button and mobile menu panel toggled with JavaScript and hidden on desktop using md:hidden; and desktop link visibility controlled with hidden md:flex so links collapse on mobile and expand on larger screens. Next up we make navigation sticky and fixed.
Questions Fréquemment Posées
La leçon « Créer une barre de navigation réactive » est-elle gratuite ?
Oui — le texte complet de « Créer une barre de navigation réactive » 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 « Créer une barre de navigation réactive » ?
Créez une barre de navigation horizontale avec logo, liens et CTA, qui se replie en menu hamburger sur mobile grâce aux utilitaires réactifs hidden et flex. 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 « Créer une barre de navigation réactive » ?
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