Wat MKB moet weten
Drie patronen in 2026: 1. Hamburger met clear label (icoon + woord "Menu") — bekend en werkt. 2. Bottom nav — handig binnen duim-zone. 3. Visible nav — voor sites met onder de vijf items, gewoon links inline. Vermijd: hamburger zonder label (10% kortere herkenning) en mega-menus op mobiel.
Waarom het mobiele menu de meeste fouten bevat
De mobiele navigatie is een onzichtbare conversie-killer. Een MKB-bezoeker die je site opent op zijn telefoon, gebruikt het menu binnen drie seconden of helemaal niet. Werkt het menu niet meteen, dan klikt 41 procent van de bezoekers weg, blijkt uit onderzoek van het Nielsen Norman Group. Op desktop is die ratio slechts 17 procent, omdat de navigatie daar direct zichtbaar is.
De drie meest voorkomende fouten op mobiele menu's bij MKB-sites zijn helder. Eén, de hamburger heeft geen label en wordt verward met andere iconen. Twee, het menu opent met een vertraging van meer dan 300 milliseconden waardoor het traag voelt. Drie, het menu sluit niet wanneer je buiten het menu tikt, alleen via de X die soms verstopt zit achter de cookie-banner.
Wat we bij Keurmeesters hebben opgelost is het volgende. Het menu opent met een transform-animatie van 180 milliseconden, te traag voor de pixel-puristen maar precies snel genoeg om als responsief te voelen. Het bevat zes items, niet meer. Een tik buiten het menu sluit het. De primaire CTA staat onder de menu-items en is altijd zichtbaar. Resultaat, de gemiddelde tijd tot eerste tikactie ging van 4,2 seconden naar 1,8 seconden.
De anatomie van een goed mobiel menu
Een mobiel menu bestaat uit zes onderdelen die je elk apart moet ontwerpen. De trigger, dat is het hamburger-icoon of het label dat het menu opent. De drawer, dat is het paneel dat openschuift. De items, dat zijn de individuele links. De close-affordance, dat is hoe je het menu weer sluit. De active state, dat is de visuele aanduiding op welke pagina je bent. En de focus management, dat is het toetsenbord-gedrag voor toegankelijkheid.
De trigger moet minstens 44 bij 44 pixels zijn, het icoon plus het woord Menu of Index ernaast. De drawer schuift idealiter in van rechts of vanaf de bovenkant, niet van links want dat botst met iOS-swipe-to-back. De items zijn 48 pixels hoog, met witruimte tussen, met duidelijke tikgebieden. De close-affordance is zowel een X-knop rechtsboven als een tik buiten het menu. De active state is een contrasterende achtergrond of een streep links. De focus management volgt de WAI-ARIA-richtlijnen voor disclosure widgets.
Wat vaak vergeten wordt, het menu moet ook werken zonder JavaScript. Voor de zeldzame gevallen dat JS faalt, moet de navigatie alsnog bereikbaar zijn, bijvoorbeeld via een gewone link naar een /menu-pagina of via een uitklap die op de details-tag gebaseerd is. Dit is goed voor SEO, goed voor toegankelijkheid en goed voor het zeldzame moment dat een CDN problemen heeft.
Bottom-nav versus top-nav versus tab-nav
De keuze tussen een bovenkant-menu en een onderkant-menu hangt af van je content. Een MKB-dienstverlener met vier hoofdpagina's heeft genoeg aan een bottom-nav met die vier links en een telefoon-knop in het midden. Een e-commerce-site met categorieën, account, winkelmandje en zoekfunctie heeft een combinatie nodig. Een blog-zware site werkt vaak het beste met een top-nav plus een sticky scroll-progress balk.
Apple's Human Interface Guidelines bevelen voor apps een tab-bar onderaan aan met drie tot vijf items. Voor websites is dat patroon overgenomen door grote spelers als Twitter, Instagram en LinkedIn. Voor een MKB-site is het patroon zinvol als je vier of minder hoofdtaken hebt die de bezoeker terugkerend uitvoert. Vraag offerte, bel nu, bekijk werk, neem contact op. Daarbuiten is een top-nav met hamburger nog steeds de meest neutrale keuze.
De combinatie die we in 2026 het vaakst inzetten, top-bar met logo en menu-trigger, plus een sticky bottom-bar met de primaire CTA en een telefoon-knop. Dat geeft de bezoeker altijd twee acties binnen duimbereik, zonder dat de hoofdnavigatie ruimte inpikt op het hoofdscherm.
Checklist voor je mobiele menu
- Trigger is minstens 44 bij 44 pixels groot.
- Trigger bevat icoon plus een label, niet alleen het icoon.
- Menu opent binnen 200 milliseconden na de tik.
- Drawer schuift in van rechts of vanaf de bovenkant, niet van links.
- Items zijn minimaal 48 pixels hoog met voldoende tussenruimte.
- Maximaal zeven items op het eerste niveau.
- Sub-items zijn ingeklapt of staan op een aparte pagina.
- Menu sluit bij een tik buiten het menu, niet alleen op de X.
- Menu sluit bij een terug-gebaar of escape-toets.
- Active state is duidelijk zichtbaar voor de huidige pagina.
- Primaire CTA is zichtbaar binnen het menu, bovenaan of onderaan.
- Telefoon-knop is bereikbaar zonder het menu te openen, via een sticky positie.
- Menu werkt zonder JavaScript als fallback.
- ARIA-attributen zijn correct ingesteld voor schermlezers.
- Focus blijft binnen het menu zolang het open is, voor toetsenbord-navigatie.
Wat te vermijden
Mega-menu's met meerdere kolommen werken op desktop maar zijn een ramp op mobiel. Op een schermbreedte van 360 pixels moet je hele mega-menu naar onder elkaar springen, wat een lange scroll en visuele verwarring oplevert. Vervang door een twee-laags structuur, waarin de eerste laag de hoofdcategorieën toont en een tik op een categorie de tweede laag binnen dezelfde drawer toont.
Hover-menu's werken niet op touch. Iedere link in je hoofdnavigatie die een sub-menu toont via hover, moet op mobiel klikbaar zijn met een expliciete chevron-icoon. De klik op de bovenliggende link opent het sub-menu in plaats van direct naar de pagina te navigeren. Voeg dan eventueel een Bekijk alles-link toe als eerste sub-item.
Verborgen primaire navigatie achter alleen een hamburger op desktop is ook geen oplossing. De hamburger is een mobiel-patroon. Op desktop, waar je voldoende ruimte hebt, hoort je hoofdnavigatie zichtbaar te zijn. Wie de hamburger ook op desktop gebruikt om een minimalistisch design te creëren, levert ten minste 15 procent in op doorklikratio in onze A/B-tests.
Pakket-overwegingen
In het Starter-pakket van €1.995 leveren we een hamburger-menu met label, een drawer-animatie, een actieve state en correcte ARIA-attributen. In Groei van €3.995 voegen we een sticky bottom-bar met primaire CTA en telefoon-knop toe. In Premium van €6.995 zit een multi-level mega-menu-alternatief voor sites met meer dan twintig pagina's, plus zoek-binnen-navigatie voor e-commerce en uitgebreide structured data voor SiteNavigationElement.
De keuze tussen pakketten hangt niet alleen van de menustructuur af. Een hovenier met vijf diensten heeft genoeg aan Starter. Een bouwbedrijf met dertig projecten en zes diensten zit beter in Groei. Een webshop met categorieën, accounts en filters heeft Premium nodig. Wij adviseren op basis van een gesprek, niet op basis van een algoritme.
Toegankelijkheid van het mobiele menu
Een mobiel menu moet ook werken voor bezoekers die het scherm niet zien of die niet met hun vinger tikken. WCAG 2.2, de huidige toegankelijkheids-standaard, stelt drie eisen die bij de meeste MKB-sites worden gemist. Eén, de focus-state moet zichtbaar zijn bij toetsenbord-navigatie. Twee, de openingsstatus van het menu moet aan schermlezers worden gecommuniceerd. Drie, het menu moet bedienbaar zijn zonder JavaScript voor de zeldzame gevallen waarin het script niet laadt.
De aria-attributen die je nodig hebt zijn beperkt. Op de trigger zet je aria-expanded dat tussen true en false wisselt. Op de drawer zet je role="dialog" als het een full-screen overlay is, of role="menu" als het een navigatie-paneel is. Op het sluit-element zet je aria-label="Sluit menu" voor het geval het alleen een X-icoon is.
De focus-management is iets dat in 90 procent van de WordPress-thema's verkeerd is geïmplementeerd. Wanneer het menu opent, hoort de focus naar het eerste item te springen. Wanneer het sluit, hoort de focus terug te keren naar de trigger. Tijdens de open-staat hoort de focus binnen het menu te blijven, ofwel via een focus-trap-techniek. Dit voorkomt dat een toetsenbord-gebruiker per ongeluk in de achtergrond-content terechtkomt.
Mobiele zoekfunctie als alternatief
Voor sites met meer dan tien hoofdpagina's is een zoekfunctie soms beter dan een uitgebreid menu. Een vergrootglas-icoon in de header dat een full-screen zoek-overlay opent, met de meest gezochte pagina's als snelkoppelingen, werkt op mobiel vaak efficiënter dan een drie-niveau-menu. Bezoekers tikken sneller dan ze door menu's bladeren.
Voor MKB-sites met minder dan vijftien pagina's hoeft geen zoekfunctie. Voor e-commerce met dertig of meer producten wel. Bij Premium-pakketten van €6.995 voegen we standaard een mobiele zoek met instant results toe, plus een tagging-systeem dat populaire zoekopdrachten leert herkennen. Dat tilt de gemiddelde sessieduur en de conversie-ratio significant op.
Wat doe je vandaag?
Open je site op je telefoon, tel hoeveel items in je hoofdmenu staan en hoeveel seconden het menu nodig heeft om te openen. Tik buiten het menu en kijk of het sluit. Tel het aantal mis-tikken op naburige items binnen drie pogingen. Schrijf de vier getallen op. Een menu met meer dan acht items, een opening trager dan 400 ms, niet-sluiten bij buiten-tik of twee of meer mis-tikken op vijftien pogingen kost je conversie. Vraag de gratis audit aan met je vier getallen erbij. Wij werken wereldwijd vanuit Mijdrecht.