Websitenavigatie maken: een duidelijk menu en logische interne links

Een goed websitemenu helpt bezoekers kiezen waar ze naartoe gaan. Het hoeft niet iedere pagina te bevatten. Begin bij wat iemand op je site probeert te vinden, groepeer de informatie en gebruik namen die de bestemming duidelijk maken. Voeg vervolgens links toe op de plekken waar een bezoeker meer uitleg of een volgende stap nodig heeft.

Deze gids helpt je een navigatieplan maken voordat je Claude Code een menu laat bouwen. Je krijgt een eenvoudig voorbeeld, een kopieerbare opdracht en een checklist om de uitvoering te controleren.

1. Begin met bezoekerstaken en bestaande pagina’s

Maak een inventaris van je pagina’s en schrijf bij iedere pagina welke vraag ze beantwoordt. Noteer ook de huidige URL wanneer je een bestaande website aanpast. Zo zie je welke inhoud beschikbaar is en welke pagina’s dezelfde informatie bieden.

Denk daarna vanuit een bezoeker die je bedrijf nog niet kent. Die zoekt bijvoorbeeld een passende dienst, voorbeelden van werk of praktische contactinformatie. Jouw interne afdelingen zijn niet vanzelf de beste menu-indeling voor die vragen.

Gebruik per pagina drie velden:

• Vraag: wat wil de bezoeker hier weten?
• Inhoud: welke informatie staat op deze pagina?
• Volgende stap: wat kan de bezoeker na het lezen doen?

Een fictieve fotografiewebsite kan pagina’s hebben over portretten, evenementen, de fotograaf en contact. De bezoeker wil eerst herkennen welke fotografie wordt aangeboden en voorbeelden zien. Vervolgens kan die vragen hoe een opdracht wordt besproken. Deze taken geven richting aan de navigatie.

Heb je de teksten nog niet verzameld? Begin dan bij de gids over websiteteksten voorbereiden per pagina. Een menu kan ontbrekende inhoud niet oplossen.

2. Groepeer informatie in herkenbare onderdelen

Leg pagina’s met een samenhangende taak bij elkaar. Voor de fictieve fotograaf kan de hoofdindeling bijvoorbeeld bestaan uit “Fotografie”, “Portfolio”, “Over mij” en “Contact”. Onder “Fotografie” kunnen portretten en evenementen staan, wanneer die elk voldoende eigen uitleg nodig hebben.

Dit is een voorbeeldindeling, geen verplicht patroon. Een kleine site kan met directe links werken. Bij een grotere site kan een overzichtspagina bezoekers helpen om een categorie te begrijpen voordat ze een detailpagina openen.

Vraag jezelf bij elke groep af:

1. Herkent iemand zonder voorkennis welke inhoud hier te vinden is?
2. Hebben de pagina’s in deze groep een duidelijk verband?
3. Moet de bezoeker eerst kiezen tussen opties of kan die direct naar de gewenste pagina?
4. Blijft er een begrijpelijke route naar contact of de relevante vervolgstap?

Gebruik het hoofdmenu voor de onderdelen die op veel pagina’s relevant zijn. Inhoudelijke verdieping kan via een overzichtspagina, een lokaal submenu of links in de tekst. De footer kan aanvullende informatie bereikbaar maken, maar hoort geen verzamelplaats voor onvindbare kerninhoud te worden.

3. Kies menunamen die de bestemming voorspellen

Een menunaam hoeft niet origineel te zijn om bruikbaar te zijn. “Contact” of “Reparaties” kan duidelijker zijn dan een creatieve term die uitleg nodig heeft. Kies woorden die bij je doelgroep en de werkelijke pagina passen.

Vergelijk deze eigen voorbeelden:

• “Onze wereld” laat veel ruimte open; “Over het atelier” geeft een concretere bestemming.
• “Ontdek” zegt weinig over de inhoud; “Bekijk de workshops” maakt de volgende stap herkenbaar.
• “Meer” is vaag; “Werkwijze” kan passend zijn als de pagina het proces uitlegt.

Gebruik dezelfde naam voor dezelfde bestemming, tenzij de context een gerichtere formulering nodig maakt. Noem een pagina in het menu bijvoorbeeld niet “Diensten” en elders “Producten” als het om hetzelfde aanbod gaat.

WCAG-criterium 2.4.4 beschrijft dat het doel van een link uit de linktekst zelf of samen met de programmatisch bepaalde context te begrijpen moet zijn. Duidelijke namen helpen bezoekers om te bepalen of ze de link willen volgen. (W3C WAI: Link Purpose in Context)

4. Verbind pagina’s ook op inhoudelijke plekken

Het hoofdmenu is niet de enige route door je website. Op een dienstenpagina kun je verwijzen naar relevante voorbeelden. Een uitleg over je werkwijze kan linken naar de manier waarop iemand een aanvraag start. Een artikel kan een verdiepende gids aanbieden op het moment dat die nuttig wordt.

Schrijf de linktekst zo dat de lezer weet wat er volgt. “Bekijk voorbeelden van portretfotografie” vertelt meer dan een los “Klik hier”. Plaats een link waar ze de huidige uitleg aanvult en voorkom dat je bijna iedere zin in een rij bestemmingen verandert.

Google raadt beschrijvende, beknopte linkteksten en relevante interne links aan. Belangrijke pagina’s horen vanaf minstens één andere pagina op je site gelinkt te zijn. Er is volgens Google geen ideaal vast aantal links voor een pagina. (Google Search Central: link best practices)

Controleer ook de technische uitvoering. Voor navigatie naar een pagina hoort er een echte link met een bestemming te zijn. Google kan doorgaans links verwerken als een HTML-anchor met een href-attribuut; alleen een klikactie op een ander element is daarvoor niet betrouwbaar. (Google over crawlbare links)

Een sitemap kan je pagina’s opsommen, maar bezoekers hebben nog steeds bruikbare routes in de website nodig. Voor de overige vindbaarheidscontroles kun je de SEO-checklist voor een nieuwe website gebruiken.

5. Geef Claude Code een navigatieplan met grenzen

Maak een korte lijst van de gewenste menu-items, hun bestemmingen en de groepen. Geef aan welke routes al bestaan en behouden moeten blijven. Beschrijf ook waar je inhoudelijke links wilt toevoegen en waarom.

Onderstaande briefing is een eigen voorbeeld. Vul je echte pagina’s en bestanden in voordat je ze gebruikt.

Werk de websitenavigatie uit volgens [navigatieplan].
Lees eerst de projectafspraken en bekijk de bestaande navigatie.

Gebruik de vastgelegde menunamen en bestemmingen.
Behoud bestaande routes; meld ontbrekende bestemmingen.
Maak echte links voor navigatie naar pagina’s.
Gebruik de bestaande stijl en componenten van het project.

Het menu moet op desktop en mobiel bruikbaar zijn.
Controleer het openen, sluiten en volgen van links.
Controleer ook de bediening met alleen het toetsenbord.

Voeg de geplande interne links toe op de relevante inhoudelijke plekken.
Benoem onduidelijke keuzes voordat je nieuwe pagina’s of routes bedenkt.

Rapporteer de wijzigingen en controleer de afgesproken bezoekersroute.

Vraag bij een bestaande site eerst welke onderdelen de wijziging raakt. Het stappenplan voor een website aanpassen met Claude Code helpt je om de uitvoering af te bakenen.

6. Test de route die een bezoeker nodig heeft

Kies een concrete taak, zoals “vind informatie over portretten en ontdek hoe je een aanvraag doet”. Begin eens op de homepage en daarna op een detailpagina. Een bezoeker komt immers niet altijd via de startpagina binnen.

Vraag bij voorkeur ook iemand die de site niet heeft opgebouwd om dezelfde taak uit te voeren. Kijk waar die persoon aarzelt en welke namen anders worden begrepen dan jij bedoelde. Zo verzamel je gerichte feedback voor een volgende verbetering.

• ☐ De menu-items hebben begrijpelijke namen en juiste bestemmingen.
• ☐ Iedere belangrijke pagina is via een bruikbare link bereikbaar.
• ☐ Overzichts- en detailpagina’s hebben een herkenbare samenhang.
• ☐ Een bezoeker kan ook vanaf een detailpagina verder navigeren.
• ☐ Het mobiele menu opent, sluit en laat links volgen.
• ☐ De navigatie is met een toetsenbord bedienbaar en de focus zichtbaar.
• ☐ Er zijn geen tijdelijke links of ontbrekende bestemmingen.
• ☐ De belangrijkste bezoekersroute is daadwerkelijk doorlopen.

Gebruik voor de uitvoering de gidsen over mobiel testen en toetsenbordtoegankelijkheid. Wil je het navigatieplan opnemen in je volledige bouwopdracht? De gratis briefing voor Claude Code helpt je om doelen en controleafspraken vast te leggen.