Een responsieve navbar bouwen
Maak een horizontale navbar met logo, links en CTA die op mobiel inklapt tot een hamburgermenu met hidden- en responsieve flex-utilities.
Een responsieve navbar bouwen is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Anatomie van een navigatiebalk
Een navigatiebalk (navbar) staat bovenaan een pagina en bevat meestal links een logo, in het midden of rechts navigatielinks en helemaal rechts een actieknop. Op mobiele apparaten worden de links samengevouwen tot een hamburgermenu om ruimte te besparen.
Het omhulsel van de navigatiebalk gebruikt flex items-center justify-between om deze drie zones horizontaal te verdelen, met px-6 py-4 voor comfortabele binnenruimte.
<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- en merkgebied
Het logogebied is meestal een ankerelement met daarin een SVG-logo of een tekstgebaseerde merknaam. Gebruik flex items-center gap-2 als je een pictogram en tekst combineert, zodat ze verticaal uitgelijnd zijn.
Gebruik een vet lettertype voor het logo en de primaire kleur van je merk: font-bold text-xl text-blue-600. Maak het anker toegankelijk voor toetsenbordfocus met de focusstijl focus:outline-none focus-visible:ring-2.
<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>Navigatielinks voor desktops
De navigatielinks voor desktops staan in een wrapper met hidden md:flex items-center gap-6 — onzichtbaar op kleine schermen en weergegeven als een flexrij op middelgrote schermen en groter. Elke link gebruikt text-sm font-medium text-gray-600 hover:text-gray-900 voor een subtiele standaardstijl die donkerder wordt bij aanwijzen.
Voeg transition-colors duration-150 toe voor een vloeiende kleurverandering bij aanwijzen en gebruik een andere tekstkleur of onderstreping om de huidige pagina aan te geven.
<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>Desktopactie en aanmeldknop
De rechterkant van de navigatiebalk bevat meestal een transparante link Aanmelden en een effen knop Registreren. Door ze in hidden md:flex items-center gap-3 te wikkelen, blijven ze verborgen op mobiele apparaten en zijn ze uitgelijnd op desktops.
Door beide knoppen samen te gebruiken ontstaat een duidelijke hiërarchie: de transparante link voor terugkerende gebruikers en de effen knop om nieuwe gebruikers aan te trekken.
<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>Hamburgermenuknop
Op mobiele apparaten vervangt een hamburgerknop de desktoplinks. Toon deze alleen op kleine schermen met md:hidden en geef hem het toegankelijke attribuut aria-label="Open menu".
De knop geeft drie horizontale lijnen weer (een klassiek hamburgerpictogram) met behulp van een SVG. Wanneer erop wordt geklikt, schakelt JavaScript een klasse in of uit om het mobiele menupaneel zichtbaar te maken. De knop zelf gebruikt p-2 text-gray-600 hover:bg-gray-100 rounded-md voor een comfortabel tikgebied.
<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>Mobiel menupaneel
Het mobiele menu is een paneel over de volledige breedte dat onder de navigatiebalk verschijnt wanneer je op de hamburgerknop drukt. Standaard is het verborgen met de klasse hidden; JavaScript verwijdert deze wanneer je op de knop klikt.
Stapel de links verticaal met flex flex-col gap-1 px-4 pb-4 en geef elke link block py-2 text-base font-medium voor een groot tikdoel dat prettig met de duim te bedienen is.
<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>De volledige navigatiebalk samenvoegen
Voeg alle onderdelen samen in één <nav>-element. De structuur is: wrapper voor de navigatiebalk met schaduw, met daarin een container met maximale breedte en drie zones — logo, desktoplinks en desktopactie — gevolgd door het mobiele menupaneel over de volledige breedte buiten de container.
De binnenste wrapper max-w-7xl mx-auto voorkomt dat de inhoud van de navigatiebalk op grote schermen te breed wordt, terwijl de achtergrond wel van rand tot rand doorloopt.
<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>Indicator voor actieve link
Een indicator voor een actieve link laat gebruikers zien op welke pagina ze zich bevinden. Een veelgebruikt patroon is een onderrand of een verandering van tekstkleur. Pas text-blue-600 border-b-2 border-blue-600 pb-0.5 toe op de actieve link, zodat deze opvalt tussen de grijze links.
Voeg in servergerenderde apps de actieve klassen conditioneel toe op de server. Vergelijk in JS-frameworks de huidige route met de href van de link en pas de klassen programmatisch toe.
<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>Navigatiebalk met zoekveld
Een zoekveld toevoegen aan de navigatiebalk is een veelvoorkomende vereiste voor inhoudsrijke websites. Plaats het zoekveld in het midden van de navigatiebalk met flex-1 max-w-md mx-8, zodat het een flexibele breedte krijgt maar wel in verhouding blijft.
Geef het invoerveld de stijl 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 voor een duidelijke zoekbalk met een focusring.
<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>Navigatie-item met vervolgkeuzemenu
Een navigatie-item met vervolgkeuzemenu toont een submenu wanneer je erover beweegt of erop klikt. Gebruik het hulpprogramma group op de bovenliggende link en group-hover:block op het aanvankelijk hidden submenu om een vervolgkeuzemenu op basis van alleen CSS te implementeren.
Plaats het vervolgkeuzemenu met absolute top-full left-0 mt-1 direct onder de bovenliggende link. Voeg min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 toe voor het uiterlijk van een volwaardig paneel.
<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>Donkere variant van de navigatiebalk
Een donkere navigatiebalk gebruikt een donkere achtergrond zoals bg-gray-900 met lichte tekst. Vervang text-gray-600 door text-gray-300 voor links, gebruik hover:text-white voor aanwijstoestanden en pas de knop aan naar bg-blue-500, omdat deze moet opvallen tegen de donkere achtergrond.
Donkere navigatiebalken zijn populair voor ontwikkelaarstools, SaaS-dashboards en alle producten die zich richten op een technisch publiek.
<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>Korte controle
Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.
Samenvatting van de les
In deze les heb je geleerd hoe je een responsieve structuur voor een navigatiebalk maakt met een flexindeling in drie zones (logo, links, actie); hoe je een hamburgerknop en mobiel menupaneel met JavaScript in- en uitschakelt en op desktops verbergt met md:hidden; en hoe je de zichtbaarheid van desktoplinks beheert met hidden md:flex, zodat links op mobiele apparaten samenvouwen en op grotere schermen uitklappen. Hierna maken we de navigatiebalk plakkerig en vastgezet.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Een responsieve navbar bouwen” gratis?
Ja — de volledige tekst van “Een responsieve navbar bouwen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Een responsieve navbar bouwen”?
Maak een horizontale navbar met logo, links en CTA die op mobiel inklapt tot een hamburgermenu met hidden- en responsieve flex-utilities. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Een responsieve navbar bouwen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een responsieve navbar bouwen
- Sticky en vaste navigatie
- Verticale sidebarindeling
- Inklapbare mobiele sidebar