MobileMenu

Een hamburger-knop die op mobiele schermen een uitschuifmenu (drawer) opent. De navigatie-items zet je als inhoud van het block.

Toepassingen per site-type

Een webshop met categorieën, een klantenaccount en een winkelwagenlink heeft al snel meer navigatie-items dan op een telefoonscherm passen; MobileMenu bundelt die dan achter één knop, terwijl de winkelwagen zelf vaak als apart icoon buiten het menu blijft staan. Een portfolio-site met een compact menu — home, werk, over, contact — gebruikt dit block soms zelfs niet, omdat vier items nog wel naast elkaar passen; overweeg dan of een uitklapmenu wel nodig is. Bij een zakelijke dienstverlener met submenu's per dienst, bijvoorbeeld een advocatenkantoor met aparte pagina's per rechtsgebied, houdt dit block het overzicht behapbaar door de submenu-items genest te tonen binnen de drawer.

Een veelgemaakte fout is de inhoud van MobileMenu laten afwijken van het hoofdmenu in de header: bezoekers die schakelen tussen desktop en mobiel verwachten dezelfde volgorde en dezelfde links. Werk daarom vanuit dezelfde linkenlijst voor beide. Een tweede valkuil is een drawer die te veel niveaus diep gaat — meer dan twee niveaus (hoofditem plus submenu) maakt navigeren op een klein scherm onhandig; verplaats een derde niveau liever naar de doelpagina zelf.

Dit block wordt meestal samen met de LanguageSwitcher gebruikt: op mobiel is er te weinig ruimte voor een aparte taalknop naast de hamburger-knop, dus die verhuist dan mee naar binnen in de drawer. Voor een link naar de contactpagina onderaan het menu kun je een CTA-achtige knop toevoegen, zodat de belangrijkste actie ook zichtbaar blijft als het menu open staat.

Zorg dat de hamburger-knop groot genoeg is om makkelijk aan te raken (minimaal circa 44 bij 44 pixels) en dat de drawer met het toetsenbord te bedienen is: bij toetsenbordnavigatie moet de focus automatisch naar het eerste menu-item springen zodra de drawer opent, en teruggaan naar de hamburger-knop bij sluiten.

Gebruik dit block in de header zodra de hoofdnavigatie op een telefoonscherm niet meer past — bijvoorbeeld een site met zes of meer menu-items plus een contactknop. In plaats van alles smaller te maken, verbergt dit block de navigatie achter één herkenbare hamburger-knop.

Een praktisch voorbeeld is een bedrijfssite met hoofdmenu, submenu-items en een aparte inlogknop: die zet je allemaal als losse links binnen het block, en de drawer regelt zelf het openen, sluiten en scrollgedrag.

<MobileMenu title='Menu'> <Link href='/'>Home</Link> <Link href='/contact/'>Contact</Link> </MobileMenu>