Header

Een header is het bovenste gedeelte van een webpagina dat op elke pagina van een website zichtbaar blijft. Het bevat doorgaans het logo, het hoofdmenu, contactinformatie en soms een zoekfunctie of call-to-action. De header vormt een vast oriëntatiepunt waarmee bezoekers door de site navigeren. Voor MKB-bedrijven is de header cruciaal omdat bezoekers binnen drie seconden beslissen of ze blijven, en de header bepaalt die eerste indruk.

Hoe een header is opgebouwd

Een typische header bestaat uit drie tot vijf elementen die samen een functionele eenheid vormen. Het logo staat meestal linksboven en werkt als thuisknop. Het hoofdmenu bevat vier tot zeven categorieën, vaak horizontaal uitgelijnd. Daarnaast zie je contactinformatie zoals een telefoonnummer of e-mailadres, een zoekfunctie voor webshops en een primaire call-to-action zoals 'Offerte aanvragen' of 'Inloggen'. Bij kleinere schermen klapt het menu in tot een hamburgermenu-icoon. Een doordacht ontworpen header volgt de WCAG-richtlijnen voor toegankelijkheid, zodat ook bezoekers met een schermlezer of toetsenbordnavigatie probleemloos door je site kunnen.

Waarom de header zo belangrijk werd voor websites

Toen websites in de jaren negentig opkwamen, bestonden pagina's vaak uit lange lijsten met links zonder duidelijke structuur. Met de groei van commerciële websites en webshops ontstond de behoefte aan consistente navigatie. De header werd de standaardoplossing: een vaste plek bovenaan waar bezoekers altijd op kunnen terugvallen. Inmiddels verwachten gebruikers dat een logo linksboven staat en dat het hoofdmenu horizontaal loopt. Afwijken van deze conventie leidt tot verwarring en hogere uitstappercentages. Voor MKB-bedrijven betekent dit dat een header niet alleen functioneel moet zijn, maar ook vertrouwd aanvoelt.

Wat een goede header oplevert voor jouw bedrijf

Een heldere header verlaagt de drempel om door te klikken naar relevante pagina's. Bezoekers vinden sneller wat ze zoeken, waardoor ze langer blijven en vaker converteren. Bij webshops zien we dat een zichtbare zoekbalk in de header het aantal productpagina-bezoeken met tientallen procenten verhoogt. Voor dienstverleners zorgt een prominente call-to-action zoals 'Plan een kennismaking' voor meer aanvragen. Een goed ontworpen header ondersteunt ook je SEO-strategie door interne links logisch te structureren en crawlers duidelijke paden te bieden. Daarnaast versterkt een consistente header met herkenbaar logo en huisstijlkleuren je merkidentiteit, wat bijdraagt aan merkherkenning en vertrouwen.

De header vervult verschillende rollen afhankelijk van het type website en de doelgroep. Voor een webshop met duizenden producten is de header het startpunt van elke zoektocht. Voor een adviesbureau met vijf diensten is het een compact overzicht dat vertrouwen moet wekken. Hieronder zie je hoe MKB-bedrijven de header strategisch inzetten.

Navigatie voor webshops met grote productcatalogi

Een webshop met meer dan honderd producten heeft een gelaagd menu nodig. De header toont dan hoofdcategorieën zoals 'Wonen', 'Tuin' of 'Elektronica', met dropdown-submenu's voor subcategorieën. Bezoekers kunnen zo binnen twee klikken bij het juiste product. Daarnaast bevat de header vaak een zoekbalk met autocomplete, een winkelwagenticoon met aantal items en een accountknop. Bij webshops die we bouwen zien we dat een zoekbalk rechts in de header tot dertig procent meer directe productbezoeken leidt dan een zoekbalk in de zijbalk. De header moet op mobiel compact blijven, dus daar verschuift het menu naar een hamburgericoon en blijven alleen zoeken en winkelwagen zichtbaar.

Merkpositionering voor dienstverleners en adviseurs

Voor een B2B-dienstverlener met tien tot vijftig medewerkers is de header een merkstatement. Het logo krijgt ruimte, het menu bevat vier tot zes items zoals 'Diensten', 'Cases', 'Over ons' en 'Contact', en rechts staat een opvallende knop met 'Plan een gesprek' of 'Vraag offerte aan'. Deze opzet communiceert professionaliteit en maakt de volgende stap helder. Een veelgemaakte fout is te veel menu-items toevoegen, waardoor de header rommelig wordt en bezoekers niet weten waar te klikken. Beperk het hoofdmenu tot zes items en plaats secundaire links zoals 'Privacy' en 'Algemene voorwaarden' in de footer. De header ondersteunt zo je conversiedoelen zonder af te leiden.

Sticky headers voor lange landingspagina's

Een sticky header blijft bovenaan het scherm plakken terwijl je scrolt. Dit is handig voor landingspagina's met veel content, zoals een productpagina met specificaties, reviews en FAQ. Bezoekers kunnen altijd naar andere secties springen of direct bestellen zonder terug naar boven te scrollen. Webshops gebruiken dit voor de 'In winkelwagen'-knop, zodie altijd bereikbaar blijft. Let op: een sticky header neemt schermruimte in, vooral op mobiel. Maak hem daarom niet hoger dan zestig pixels en verberg eventueel het logo of menu-items zodra je scrolt. Test ook de laadsnelheid, want een sticky header met zware afbeeldingen vertraagt de pagina.

Wanneer een header de juiste keuze is en wanneer niet

Bijna elke website heeft een header nodig, maar de invulling verschilt. Voor een eenvoudige one-pager met drie secties volstaat een minimale header met logo en ankermenu. Voor een kennisplatform met honderden artikelen is een uitgebreide header met zoekfunctie en categorieën essentieel. Gebruik geen header als je een geïsoleerde landingspagina bouwt voor advertenties, waarbij je bewust afleiding wilt vermijden. In dat geval werk je met een logo en één call-to-action, zonder menu. Voor alle andere situaties geldt: investeer in een heldere, snelle en toegankelijke header die bezoekers helpt in plaats van vertraagt.