Website navigatie: zo zet je een heldere menustructuur op

Hoeveel items zet je in je menu, wanneer kies je een megamenu en hoe maak je navigatie toegankelijk? Praktische tips, onderbouwd met onderzoek van Nielsen Norman Group.

Website navigatie: zo zet je een heldere menustructuur op
Inhoud

Een bezoeker die niet snel vindt wat hij zoekt, klikt weg. Een heldere websitenavigatie voorkomt dat en helpt Google om je site te begrijpen. In dit artikel lees je hoe je een menustructuur opzet, hoeveel items je in het menu zet en hoe je het mobiele menu, een megamenu en de zoekfunctie aanpakt.

We baseren ons op onze eigen ervaring met websites en op onderzoek van Nielsen Norman Group, een Amerikaans bureau dat al jaren gebruikersonderzoek doet naar navigatie.

Begin met de structuur

Navigatie begint op papier. Bepaal eerst wie je bezoekers zijn en wat ze op je site komen doen. Iemand die een dakkapel zoekt, wil snel naar die dienst, de prijzen en een offerteformulier.

Maak daarna een lijst van alle pagina’s en groepeer ze. De groepen waar de meeste bezoekers naar zoeken, komen in het hoofdmenu. Pagina’s als de privacyverklaring of vacatures horen in de footer. Sommige pagina’s hoeven in geen enkel menu, zolang je er vanaf een logische plek naar linkt.

Houd de structuur zo plat mogelijk. Voor de meeste bedrijfswebsites zijn twee niveaus genoeg: een pagina per dienst, met daaronder eventueel de varianten.

Test de structuur voordat je bouwt

Je kunt een menustructuur testen zonder dat er een website staat. Geef een paar klanten of bekenden een opdracht, zoals “Waar vind je de prijs van een dakkapel?”, en laat ze in een simpele lijst van je menu aanwijzen waar ze zouden klikken. Dat heet een tree test. Twijfelen ze of kiezen ze verkeerd, dan klopt een label of een groep nog niet.

Staat de site live, dan zie je in Google Analytics 4 met een padverkenning welke route bezoekers nemen. Een heatmaptool zoals Microsoft Clarity laat zien waar ze klikken. Let op: Clarity vraagt sinds 31 oktober 2025 een geldig toestemmingssignaal voor bezoekers uit de EER, dus koppel het aan je cookiebanner.

Hoeveel items in je hoofdmenu

Wij adviseren vijf, hooguit zes items in het hoofdmenu. Dan scant een bezoeker het menu in één oogopslag. Heb je er meer nodig, dan kunnen de groepen meestal slimmer.

Zet de belangrijkste actie apart als knop rechts in de header, bijvoorbeeld “Offerte aanvragen” of “Bel direct”. Die knop telt niet mee als menu-item en valt beter op. Een item “Home” kun je weglaten als je logo naar de homepage linkt.

Labels die iedereen begrijpt

Gebruik de woorden van je klant. “Dakkapellen” zegt meer dan “Oplossingen”, en “Tarieven” is duidelijker dan “Investering”. Nielsen Norman Group noemt heldere, specifieke en bekende labels in zijn checklist voor menu’s uit 2024. Zet het belangrijkste woord vooraan, zodat bezoekers het snel herkennen.

Laat het menu ook zien waar de bezoeker is, bijvoorbeeld met een onderstreping of een andere kleur bij de actieve pagina. Volgens Nielsen Norman Group is het ontbreken daarvan waarschijnlijk de meest gemaakte fout in websitemenu’s.

Dropdowns en megamenu’s

Een dropdown is handig als een hoofditem een paar subpagina’s heeft. Laat met een pijltje zien dat er een submenu is. Ga niet dieper dan twee niveaus, want menu’s die steeds verder uitklappen zijn lastig te bedienen.

Nielsen Norman Group adviseert submenu’s met een klik te openen. Dat werkt op een laptop, tablet en telefoon op dezelfde manier. In de Menu-widget van Elementor kies je zelf of een dropdown opent bij hover of bij een klik.

Heb je veel diensten of productgroepen, dan is een megamenu een goede keuze. Dat is een groot paneel waarin alle onderliggende pagina’s tegelijk zichtbaar zijn, netjes in groepen. Bezoekers hoeven dan niet te onthouden wat er onder elk item zit. Houd het rustig: duidelijke groepen met korte labels, de belangrijkste groep linksboven en geen zoekbalk of formulier in het paneel.

Het menu op mobiel

Op een telefoon past het volledige menu meestal niet in beeld. Daarom zit het vaak achter een hamburgericoon. Dat is prima, zolang je weet wat het kost.

In onderzoek van Nielsen Norman Group uit 2016 gebruikten mobiele bezoekers een verborgen menu in 57 procent van de gevallen. Bij een combinatie, waarbij een paar items zichtbaar bleven en de rest achter een knop zat, was dat 86 procent. Op desktop was het effect volgens Nielsen Norman Group nog sterker: een verborgen menu werd daar in 27 procent van de gevallen gebruikt, een zichtbaar menu in 48 procent. Verberg je menu op een laptop of desktop dus niet achter een icoon.

Voor het mobiele menu werken deze punten goed:

  • Zet de belangrijkste een of twee acties zichtbaar naast het menu-icoon, zoals bellen of een offerteknop.
  • Zet het woord “Menu” bij het icoon. Niet iedereen herkent drie streepjes.
  • Maak menu-items groot genoeg om met je duim te raken. WCAG 2.2 noemt minimaal 24 bij 24 pixels, en ruimer is prettiger.
  • Gebruik bij submenu’s een duidelijk pijltje om ze uit te klappen.
  • Overweeg op lange pagina’s een compacte sticky header, zodat het menu bereikbaar blijft tijdens het scrollen.

Zoekfunctie, breadcrumbs en interne links

Zoekfunctie

Een zoekfunctie is vooral nuttig als je veel content hebt, zoals een webshop, een kennisbank of een site met tientallen diensten. Bij een site met tien pagina’s voegt hij weinig toe. Heb je er een, zet hem dan zichtbaar als invulveld bovenaan de pagina en controleer of de resultaten kloppen.

Google Analytics 4 registreert zoekopdrachten op je site standaard als gebeurtenis “view_search_results”. WordPress gebruikt de zoekparameter ?s=, en die herkent GA4 automatisch. Zo zie je precies waar bezoekers naar zoeken. Zoeken veel mensen op hetzelfde woord, dan hoort dat onderwerp waarschijnlijk in je menu.

Breadcrumbs

Breadcrumbs, of kruimelpaden, laten zien waar een pagina in de structuur zit, bijvoorbeeld Home > Diensten > Dakkapellen. Volgens Nielsen Norman Group voegen ze weinig toe bij een platte site met een of twee niveaus. Laat het pad de structuur volgen, zet de huidige pagina als laatste zonder link en kort het pad op mobiel in als het anders over meerdere regels loopt.

Met structured data (BreadcrumbList) begrijpt Google de structuur ook. Houd er rekening mee dat Google breadcrumbs in de zoekresultaten alleen nog op desktop toont.

Interne links

Ook links in je teksten zijn navigatie. Ze helpen bezoekers naar de volgende stap en laten Google zien welke pagina’s bij elkaar horen. Volgens Google moet elke pagina die je belangrijk vindt een link krijgen vanaf minstens één andere pagina op je site. Hoe dat bijdraagt aan je vindbaarheid, merk je vooral bij sites met veel pagina’s.

Gebruik beschrijvende linkteksten, zoals “bekijk de prijzen van dakkapellen”. Een linktekst als “klik hier” zegt bezoekers en Google niets. Google volgt een link alleen goed als het een gewone HTML-link is, met een a-element en een href.

Navigatie die werkt met toetsenbord en schermlezer

Niet iedereen gebruikt een muis. Mensen met een motorische beperking of een schermlezer navigeren met het toetsenbord. Sinds 28 juni 2025 is toegankelijkheid voor veel webshops en boekingssites ook wettelijk verplicht, via de Europese toegankelijkheidswet. In onze website checklist lees je voor wie die geldt.

Controleer je navigatie op deze punten, gebaseerd op WCAG 2.2:

  • Je kunt met de Tab-toets door alle menu-items lopen en met Enter of de spatiebalk een submenu openen.
  • Een open submenu sluit met de Escape-toets.
  • De focus is altijd zichtbaar, met een duidelijke rand om het actieve item. Haal de standaard focusrand nooit weg zonder iets beters terug te zetten.
  • Een sticky header valt nooit helemaal over het element dat focus heeft. WCAG 2.2 heeft daar een apart criterium voor.
  • Het eerste element op de pagina is een link “Naar de inhoud”, zodat toetsenbordgebruikers het menu kunnen overslaan.
  • De menuknop op mobiel is een echte knop met een tekstlabel voor schermlezers, die aangeeft of het menu open of dicht is (aria-expanded).
  • Het menu staat op elke pagina op dezelfde plek en in dezelfde volgorde.

Tip: Test het zelf. Klik in de adresbalk, druk een paar keer op Tab en kijk of je steeds ziet waar je bent. Raak je de focus kwijt, dan raakt een toetsenbordgebruiker die ook kwijt.

Hulp bij de structuur van je website

Wil je hulp bij de navigatiestructuur van je website, of laat je het uitwerken liever helemaal aan ons over? We bouwen al sinds 2018 websites in WordPress en Elementor en denken graag mee over een structuur die past bij je bezoekers. Lees meer op onze pagina website laten maken.

Lees verder

Elementor, Gutenberg, Bricks of Divi? We zetten de bekendste WordPress page builders van 2026 naast elkaar, inclusief de nadelen van onze eigen favoriet.

Live chat, WhatsApp, een chatbot of een AI-assistent: wat levert een chatfunctie op, wat kost het aan tijd en welke regels gelden er sinds augustus 2026?

Meta biedt geen IP-filter voor de pixel. Met Google Tag Manager, server-side tagging en een slimme doelgroep houd je je eigen bezoeken toch buiten je data.

Hulp nodig met je website of marketing?

Vertel ons waar je tegenaan loopt. Maarten denkt graag met je mee en zegt eerlijk wat hij zou doen.

Vraag vrijblijvend een ontwerp aan

Binnen 3 dagen ontvang je een ontwerp van je homepage.

jouwbedrijf.nl

We maken elke week een beperkt aantal ontwerpen.

Zullen we kennismaken?

Vul je gegevens in, dan hoor je binnen 24 uur van Maarten. Vrijblijvend, op de Bomkade of online.