Handige en duidelijke navigatiemenu’s zijn belangrijk voor het succes van je site. Via de blokeditor van WordPress – en een bijhorend bloktheme – heb je vandaag meer opties om krachtige menubalken te maken.

Leestijd: ca. 5 minuten

Navigatiemenu’s in de blokeditor: 3 verschillen

Wil je een (hoofd)menu aanmaken voor je site, dan zijn er een paar dingen waar je rekening moet mee houden. Met de (Gutenberg)-blokeditor gaat het er immers behoorlijk anders aan toe dan met de klassieke editor.

1. Je kan zoveel navigatiemenu’s maken als je wil

Bij een klassiek WordPress-thema bepaalt de bouwer van het thema meestal zelf hoeveel navigatiemenu’s je ter beschikking hebt. Vaak zijn dat er een tweetal. Wil je meer menu’s, dan moet je in veel gevallen op zoek naar een ander theme of het wordt improviseren.

Het voordeel van een blokthema annex blokeditor? Jij bepaalt veel meer zelf hoe je site er komt uit te zien. En dus ook hoeveel verschillende navigatiemenu’s je nodig hebt.

De meeste sites hebben een hoofdmenu. Maar heb je een website of blog met heel veel content, dan is het soms handig om ook nog een secundair menu te hebben. Of een speciaal menu dat je enkel toont binnen een specifiek gedeelte van je website.

2. Menu’s kunnen eender waar neergezet worden

Niet alleen mag je in theorie oneindig veel navigatiemenu’s maken, je mag ze ook eender waar neerzetten. Je hoofdmenu hoeft dus niet per se bovenaan het scherm te zitten bijvoorbeeld. Het kan net zo goed te vinden zijn op minder voor de hand liggende plaatsen:

• in de footer
• in de sidebar
• op een vaste pagina
• geïntegreerd in een blogpost
• op je archiefpagina’s
• …

3. Extra mogelijkheden bij de opmaak van navigatiemenu’s

Tijden zijn voorbij dat je gebonden was aan een min of meer vaste opmaak en indeling voor je menu’s. In WordPress Gutenberg heb je de mogelijkheid om eenzelfde menu anders vorm te geven, afhankelijk van de plek waar je het precies zal gebruiken. Dat is uiteraard ook nodig, want je wil graag dat alle elementen van je site mooi in elkaar passen.

Nog een voordeel: navigatiemenu’s kunnen dankzij blokthemes – naast traditionele hyperlinks – ook andere elementen bevatten. Denk aan afbeeldingen en social media icons bijvoorbeeld. De stap naar echte megamenu’s is nog klein.

En zo koos ik er momenteel voor om mijn hoofdmenubalk te voorzien van een zoekbalk.

Hoe kun je navigatiemenu’s bekijken en bewerken in WordPress?

Gebruik je een bloktheme dan heb je in je WordPress-dashboard geen tabblad voor menu’s meer. In plaats daarvan:

• kies je voor Weergave
• en klik je Editor
• in de linker kolom vind je het kopje Ontwerp
• de menu’s van je site zijn te vinden onder het tabje Navigatie
• via de knop met de 3 puntjes kan je het menu Hernoemen, Bewerken, Dupliceren of Verwijderen
• klik op het pijltje rechts naast het menu en je kan het menu meteen gaan bewerken in het rechter gedeelte van het scherm

Om het overzicht te bewaren (en goed te zien welke elementen en linkjes er allemaal in je menu zitten) kan je best het Document overzicht openen.

Een nieuw navigatiemenu aanmaken in WordPress

Menubalken kan je aanmaken vanop tal van verschillende plaatsen in WordPress. In de blokeditor uiteraard (te bereiken via Site bewerken), maar ook on the fly binnen patronen, in blogberichten en pagina’s enzovoort. Een menu is immers gewoon een WordPress-blok dat je kan vinden in de blok-inserter.

Om je te helpen een nieuw menu aan te maken, klik de knop Instellingen rechts boven in het scherm. De Instellingen voor het Navigatie-blok worden getoond.

Vanaf dan is het aan jou om te bepalen welke hyperlinks (en eventuele anderen blokken) er in je menu thuishoren. Eigenlijk zijn er maar 3 beperkingen: je eigen verbeelding, de beschikbare ruimte op het scherm en de gebruiksvriendelijkheid voor je bezoekers.

Goed om weten:

• Een gewone hyperlink voor in een navigatiemenu heet een Aangepaste link
• Als je een nieuw item toevoegt aan je navigatie suggereert WordPress standaard de 3 laatste pagina’s die je aanmaakte. Maar natuurlijk kan je ook zoeken naar andere pagina’s, blogberichten en bestanden – die dan wel in je mediabibliotheek moeten zitten – om toe te voegen aan je navigatiemenu.
• Je hebt de mogelijkheid om van ieder item de linktekst aan te passen. Die wil je meestal goed kort om de navigatie niet té groot te laten worden.
• Als je dat wil kan je elk item van je menu ook nog aanpassen qua opmaak:
  • selecteer het onderdeel dat je wil bewerken
  • klik in het menu Instellingen op het rondje Stijlen

Door een beetje met de opmaak te spelen kan je eenvoudig bepaalde links in het menu extra laten opvallen bij je bezoekers.

Hoe een navigatiemenu invoegen?

Zoals je hierboven kan zien is het mogelijk om zowat op elke denkbare plek in je WordPress -site een menu in te voegen. Kies daarvoor het Navigatie-blok uit de blok-inserter.

Switchen tussen menu’s

Standaard voegt WordPress dan het Navigatiemenu in dat je het laatst aanmaakte.

In het Instellingen-menu aan de rechterkant kan je voor een ander menu kiezen als je dat al hebt. Klik daarvoor, rechts van Menu, op de knop met 3 puntjes. Je vindt er een lijst met alle navigatiemenu’s die je tot je beschikking hebt. Selecteer het gewenste menu.

Al bestaande menu’s bewerken

Dat Instellingen-menu voor het navigatie-blok telt trouwens 3 tabbladen:

1. Via Lijstweergave ( 3 horizontale streepjes) zie je welk links er allemaal in een bepaald navigatiemenu zitten. Tik op het plusje om eventueel extra links aan het menu toe te voegen. Hoover over een link en rechts verschijnt een knop met 3 puntjes. Gebruik dit om eventueel de volgorde van de linkjes te wijzigen (Omhoog, dan wel Omlaag verplaatsen), een submenu aan te maken of een link te verwijderen.
2. De Instellingen (tandwieltje) hebben hier betrekking op de positie, de plaats en de uitlijning van je menu op het scherm.
3. De opmaak van het navigatiemenu kan je tot slot verzorgen via Stijlen (zwart-wit rondje). Denk aan zaken als de kleur van de linkjes, wel of geen achtergrond, lettertype en -grootte, enzovoort.

Werken met navigatiemenu’s: belangrijke tips

Om problemen en frustraties te voorkomen deel ik graag nog enkele ervaringstips.

1. Opgepast met menu’s die deel uitmaken van patronen

Wanneer je wijzigingen aanbrengt aan een navigatiemenu dat (ook) deel uitmaakt van een gesynchroniseerd WordPress-patroon, dan worden die veranderingen ook overal elders van kracht waar het patroon in gebruik is.

Wil je dat niet? Maak een nieuw menu of patroon aan OF:

• selecteer het patroon dat je wil bewerken
• klik in de werkbalk op de knop met 3 puntjes
• kies voor Losmaken

Aldus gelden de wijzigingen die je vanaf nu aanbrengt alleen voor de toepassing één plek. De rest van je site wordt ongemoeid gelaten.

2. Geef je navigatiemenu’s een duidelijke naam

Heb je verschillende menu’s voor je WordPress-site? Doe jezelf een lol en neem de moeite om een logische naam te bedenken voor je nieuwe menu’s.

Alle aangemaakte menu’s worden opgeslagen, maar doe je niks, dan spreekt WordPress eenvoudig van Navigatie 1, Navigatie 2, Navigatie 3 enzovoort. Dat zorgt later voor verwarring, frustratie en tijdverlies.

3. Menu’s maken? Houd rekening met smartphones

Leuke navigatiemenu’s inrichten, allemaal goed en wel, maar is het zaakje ook bruikbaar op een mobiel toestel? Test één en ander toch maar eens uit vooraleer je voor een bepaalde indeling kiest. Mogelijk moet je een paar compromissen maken.

4. Maak je menu’s niet te ingewikkeld

De blokeditor mag je dan wel extra opties geven om helemaal los te gaan met je navigatie, té is nooit goed. Opgepast met verschillende menu’s, heel uitgebreide menu’s met tig uitklapmenu’s ook. Ze kunnen een bezoeker ook nodeloos afleiden. Meestal leveren eenvoudige navigatiemenu’s in verhouding meer verkeer op.