Ken je dat, van die menu’s op websites die helemaal uitklappen tot een groot vlak met meerder kolommen met menu-items wanneer je eroverheen hovert met je muis? Bol.com heeft dat bijvoorbeeld. Maar op mijn eigen blog Ecohobbit heb ik dat ook. In deze blog leg ik je uit wat een mega menu is, wanneer het handig is en hoe je het instelt.

Wat is een mega menu?

Een mega menu is uitgebreider dan een simpel submenu. Waar je bij een normaal submenu één kolom met opties krijgt onder het hoofdmenu-item wat je aanwijst of aanklikt, geeft het mega menu je de optie om onder één hoofdmenu-item meerdere kolommen te hangen, met koppen, en soms zelfs met losse producten of afbeeldingen als je het heel fancy wil doen.

De voordelen van een mega menu

Op de juiste manier uitgevoerd geeft het je een goed gestructureerd overzicht bij heel veel keuzeopties, zonder dat het in eerste plaats veel ruimte inneemt in je header.

Bij Bol.com is alles bijvoorbeeld netjes onderverdeeld in de hoofditems “categorieën”, “cadeaus & inspiratie” en “aanbiedingen”. Op Ecohobbit heb ik een onderverdeling gemaakt tussen “duurzaam leven” en “duurzaam reizen”. In beide gevallen vergemakkelijkt het mega menu het zoeken.

Ecohobbit mega menu onder het hoofditem "duurzaam leven"
Ecohobbit mega menu onder het hoofditem “duurzaam leven”
Ecohobbit mega menu onder het hoofditem "duurzaam reizen"
Ecohobbit mega menu onder het hoofditem “duurzaam reizen”

Waarom zou je een mega menu gebruiken?

Het is vooral handig als je een uitgebreide hiërarchie op je website hebt. Bijvoorbeeld een blog met veel categorieën / tags of een grote webshop. Wanneer je een kleine, eenvoudige website hebt, voegt het niet echt wat toe.

Op Ecohobbit zijn mijn artikelen bijvoorbeeld verdeeld in 9 categorieën die weer zijn onderverdeeld met 101(!) tags. De categorieën zijn redelijk algemeen, zoals “DIY”, “Food”, “Natuurbeleving”. Maar een blogpost kan ook een handvol tags meekrijgen. Een willekeurig recept op mijn blog kan bijvoorbeeld tags meekrijgen over de soort maaltijd (bijvoorbeeld brunch of snack), maar ook het soort recept (conserveren, veganistisch, etc).

In mijn goed uitgedachte menu geef ik een overzicht van beide lijstjes, zodat mijn bezoeker makkelijk kan vinden wat hij zoekt.

Zo maak je een mega menu

Ik gebruik als WordPress thema Astra Pro, en die heeft de functie ingebouwd.

Ontwerp van (een deel van) het Ecohobbit mega menu in progress
Ontwerp van (een deel van) het Ecohobbit mega menu in progress

1 – Maak een overzicht van je categorieën en tags

(Of productcategorieën en manieren om je producten te sorteren.) Dit kan gewoon door naar de achterkant van je site te kijken, door er een lijstje van te maken, of door ze op post-its te schrijven. Whatever jij fijn vindt.

2 – Sorteer je opties

Maak logische groepjes van tags, die je onder een bepaalde kop kunt hangen. Die kop kun je los verzinnen, het kan een categorie zijn, of een overzichtspagina. Of een andere overkoepelende tag. Zo heb ik onder “duurzaam reizen” (categorie) een mega menu hangen met daarin onder andere een kop “lange afstandspaden” (tag) met daaronder de specifieke tochten die ik heb gelopen en waar ik over heb geschreven (ook tags).

Schuif met je post-its (of wat je ook maar gebruikt) tot je tevreden bent – of als je al een idee hebt, teken het uit op een groot vel papier. Check je lijst uit stap 1 om ervoor te zorgen dat je niks vergeet.

Ecohobbit mega menu in de menu editor van WordPress
Het menu in de menu editor. Level 1 item “duurzaam leven” heeft in zijn instellingen het vinkje “mega menu” gekregen. Alle level 2 en verder items die daaronder hangen, zijn onderdeel van het mega menu. De level 2 items hebben het vinkje “column heading” gekregen, en de level 3 items hangen onder die koppen. Niet op de screenshot: Het item “duurzaam reizen” verderop in de lijst is precies zo gestructureerd.

3 – Maak het menu in de menu editor

  • Ga in je WordPress dashboard naar Weergave >> Menu’s.
  • Maak een nieuw menu aan. (Zo kun je rustig werken, en altijd terug naar je oorspronkelijke menu).
  • Maak de hiërarchie zoals je die normaal ook maakt: door in te springen kun je dingen onder iets anders zetten.
  • Open de top-level menu items waar je mega menu onder moet hangen en klik op “Astra menu instellingen“. Hier kun je “Activeer mega menu” aanvinken. Alles wat in de menu-hiërarchie lager is (dus ingesprongen geplaatst is) dan dit item, verandert in een mega menu.
  • Open de subitems die je wilt veranderen in koppen en klik ook hier op “Astra menu instellingen“. Vink aan dat het een column heading moet zijn.
  • Sla je menu op en vergeet niet om aan te vinken waar het zichtbaar moet zijn. Persoonlijk heb ik alleen gekozen voor hoofdmenu. Zo is je mega menu alleen zichtbaar op desktop. Voor het menu buiten canvas (wat er zichtbaar wordt als je klikt op de menuknop op tablet en mobiel) heb ik een minder uitgebreid menu.
  • Bekijk je menu aan de voorkant. Eventuele wijzigingen in het design (kleuren, lettertypes, lettergroottes) kun je wijzigen in de customizer: Weergave >> Customizer >> Header bouwer >> blokje Hoofdmenu in de bouwer >> Design.

Andere dingen die je kunt doen met het Astra Pro mega menu

  • Kleuren per los menu item aanpassen
  • Menu items zonder link maken (bijvoorbeeld voor koppen die niet klikbaar hoeven te zijn)
  • Widgets toevoegen als menu item
  • Menu items markeren / highlighten
  • Dynamische content toevoegen

Astra Pro

Zelf heb ik ervoor gekozen om dit in Astra Pro te doen – mijn favoriete WordPress thema. Lichtgewicht, flexibel, en met een aantal heel fijne toegevoegde functies, zoals deze mega menu optie. Helaas zit deze functie niet in de gratis versie van het thema.

Omdat het al in het thema verwerkt zit, is het heel efficiënt gecodeerd, wat gunstig is voor je sitesnelheid en daarmee je technische SEO.

Budget optie

Wil je liever geen geld uitgeven aan een licentie? Of heb je een ander thema dan Astra? Dan zijn er een aantal plugins die deze functie aan je WordPress website kunnen toevoegen:

Houd er rekening mee dat deze net wat anders werken dan hierboven beschreven, en mogelijk ook niet alle uitgebreide designopties hebben.

Voorkom dat jouw website in een hoekje van het internet stof staat te vangen. Zet hem voor je aan het werk door actief bezoekers te trekken - de eerste stap naar automatisering en passief inkomen!

Hiermee schrijf je je in voor de nieuwsbrief. Je kunt je op elk gewenst moment weer uitschrijven.

Scroll naar top