{"id":4105,"date":"2025-06-19T12:19:09","date_gmt":"2025-06-19T12:19:09","guid":{"rendered":"\/nl\/tutorials\/?p=4105"},"modified":"2026-07-01T15:10:27","modified_gmt":"2026-07-01T08:10:27","slug":"dropdown-menu-wordpress","status":"publish","type":"post","link":"\/nl\/tutorials\/dropdown-menu-wordpress\/","title":{"rendered":"Hoe maak je een WordPress dropdown menu"},"content":{"rendered":"<p>Dropdown menu&rsquo;s zijn een super belangrijk onderdeel van veel websites en helpen bij het overzichtelijk en toegankelijk maken van inhoud. WordPress heeft een gebruiksvriendelijke interface waarmee je eenvoudig een dropdown menu kunt maken.<\/p><p>In dit artikel laten we drie manieren zien om een WordPress dropdown menu te maken. Daarnaast bespreken we de beste methoden voor het ontwerpen van dropdown menu&rsquo;s die de gebruikerservaring verbeteren en de navigatie van je website optimaliseren.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-hoe-maak-je-een-wordpress-dropdown-menu\"><strong>Hoe maak je een WordPress dropdown menu?<\/strong><\/h2><p>Volg deze stappen om dropdown menu&rsquo;s eenvoudig toe te voegen aan je WordPress website met de Site Editor, de Max Mega Menu plug-in of handmatig. We beginnen met de Site Editor methode.<\/p><h3 class=\"wp-block-heading\" id=\"h-hoe-voeg-je-een-wordpress-dropdown-menu-toe-met-site-editor\"><strong>Hoe voeg je een WordPress dropdown menu toe met Site Editor?<\/strong><\/h3><p>Het navigatieblok in de Site Editor biedt een intu&iuml;tieve drag-and-drop interface om menu-items te maken en te ordenen, waardoor je eenvoudig een dropdown menu kunt opzetten. Let op: deze methode werkt alleen met blok thema&rsquo;s.<\/p><p>Zo maak je een dropdown menu met het navigatieblok:<\/p><ol class=\"wp-block-list\">\n<li>Ga in je WordPress dashboard naar <strong>Uiterlijk &rarr; Editor<\/strong>.<\/li>\n\n\n\n<li>Klik op het blok-invoegen (+) pictogram in de bovenste menubalk en zoek naar het <strong>navigatieblok<\/strong>. Sleep het naar de gewenste plek in de editor.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-114.png\/public\" alt=\"Dropdown menu toevoegen met Site Editor. Sleep navigatieblok naar gewenste plek.\" class=\"wp-image-4112\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-114.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-114.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-114.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Sleep in de zijbalk <strong>Instellingen<\/strong> een bestaand menu-item onder een ander item om het als subitem te laten functioneren. Hierdoor wordt het onderdeel van een dropdown menu binnen het hoofdmenu.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fab60b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fab60b\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"378\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-115.png\/public\" alt=\"Sleep in de zijbalk Instellingen een bestaand menu-item onder een ander item.\" class=\"wp-image-4113\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-115.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-115.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-115.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Als je een dropdown menu wilt maken met een nieuwe menulink, ga dan naar <strong>Opties<\/strong> &rarr; <strong>Submenu link toevoegen<\/strong> naast het menu-item dat je als hoofditem wilt gebruiken.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fadf39\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fadf39\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"401\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-116.png\/public\" alt=\"Ga naar Opties &rarr; Submenu link toevoegen naast het menu-item dat je als hoofditem wilt gebruiken.\" class=\"wp-image-4114\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-116.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-116.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-116.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Klik op het blok-invoegen pictogram (+) en kies een ander blok om een submenu te maken voor een ander type inhoud. Sleep het vervolgens onder het gewenste bovenliggende menu-item.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fb0a1d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fb0a1d\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"448\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-117.png\/public\" alt=\"Klik op het blok-invoeg pictogram (+) en kies een ander blok om een submenu te maken. Sleep het onder menu-item.\" class=\"wp-image-4116\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-117.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-117.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-117.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Klik op een menu-item om de instellingen aan te passen, zoals het label, de URL en de beschrijving.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fb321a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fb321a\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"411\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-118.png\/public\" alt=\"Klik op een menu-item om de instellingen aan te passen, zoals het label, de URL en de beschrijving.\" class=\"wp-image-4117\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-118.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-118.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-118.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>Als je een nieuw submenu onder hetzelfde bovenliggende item wilt toevoegen, klik je op het blok-invoegpictogram <strong>(+)<\/strong> onder het bestaande submenu item.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fb5e6c\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fb5e6c\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"406\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-119.png\/public\" alt=\"Klik op het blok-invoegpictogram (+) onder het bestaande submenu item.\" class=\"wp-image-4118\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-119.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-119.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-119.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Het uiteindelijke resultaat ziet er zo uit:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fb8b00\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fb8b00\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"264\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-120.png\/public\" alt=\"Uiteindelijke resultaat\" class=\"wp-image-4119\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-120.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-120.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-120.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-een-dropdown-menu-toevoegen-in-wordpress-met-een-plug-in\"><strong>Een dropdown menu toevoegen in WordPress met een plug-in<\/strong><\/h3><p>Een andere manier om custom dropdown menu&rsquo;s te maken, is door gebruik te maken van een plug-in voor dropdown menu&rsquo;s. Er zijn veel geweldige menu plug-ins beschikbaar in de WordPress plug-in directory. In deze tutorial laten we zien hoe je een dropdown menu maakt met <a href=\"https:\/\/wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noopener\">Max Mega Menu<\/a>:<\/p><ol class=\"wp-block-list\">\n<li>Installeer en activeer de WordPress plug-in.<\/li>\n\n\n\n<li>Ga naar <strong>Mega Menu<\/strong> in je dashboard. Klik in de <strong>Menu locaties<\/strong> sectie op je primaire menu en vink het vakje <strong>Max Mega Menu inschakelen<\/strong> voor deze menu locatie aan om de dropdown functionaliteit te activeren. Kies in dezelfde sectie de actie die het submenu en de animatie van het dropdown menu op zowel desktop als mobiel activeert. Klik vervolgens op <strong>Wijzigingen opslaan<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fbb85a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fbb85a\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"851\" height=\"532\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-121.png\/public\" alt=\"Een dropdown menu toevoegen in WordPress met een plug-in.\" class=\"wp-image-4120\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-121.png\/w=851,fit=scale-down 851w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-121.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-121.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>De plug-in neemt standaard de stijl van je thema over. Wil je de stijl, animatie en grootte van het menu aanpassen, open dan het tabblad <strong>Menu thema&rsquo;s.<\/strong> Zorg ervoor dat de optie <strong>Selecteer thema om te bewerken <\/strong>naar je primaire menu wijst.<\/li>\n\n\n\n<li>Navigeer naar <strong>Uiterlijk &rarr; Menu&rsquo;s <\/strong>en voeg items toe aan je standaard of primaire menu, waarbij de Max Mega Menu functionaliteit is ingeschakeld. Vergeet niet om op <strong>Menu opslaan<\/strong> te klikken zodra je klaar bent.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-handmatig-dropdown-menu-s-maken\"><strong>Handmatig dropdown menu&rsquo;s maken<\/strong><\/h3><p>Het handmatig maken van een dropdown navigatiemenu in WordPress maakt gebruik van de ingebouwde functies van WordPress zelf. Het voordeel van deze methode is dat je dropdown menu blijft werken, zelfs als je van thema verandert of nieuwe plug-ins installeert.<\/p><p>Met deze methode kun je pagina&rsquo;s, berichten, categorie&euml;n en custom links aan je menu toevoegen. Zorg er wel voor dat je thema dropdown menu&rsquo;s ondersteunt door de documentatie van je thema te controleren.<\/p><p>Volg deze stappen om handmatig een aangepast dropdown menu te maken:<\/p><p><strong>1. Maak menu items<\/strong><\/p><p>Eerst moeten we een nieuw menu maken. Navigeer naar <strong>Uiterlijk &rarr; Menu&rsquo;s<\/strong> vanuit je WordPress dashboard. Op het tabblad <strong>Menu&rsquo;s bewerken<\/strong> zie je de sectie <strong>Menustructuur<\/strong>, waar je een nieuw menu kunt maken.<\/p><p>Houd er rekening mee dat het uiterlijk van dit gedeelte afhankelijk is van je thema.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fbe73f\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fbe73f\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"484\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-122.png\/public\" alt=\"Menu items maken\" class=\"wp-image-4121\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-122.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-122.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-122.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Voeg de menunaam toe in het tekstvak en klik op <strong>Menu maken<\/strong>. Ga daarna naar de sectie <strong>Menu items toevoegen<\/strong> en kies de gewenste elementen voor het nieuwe submenu. Vink het vakje aan naast de artikelen die je wilt toevoegen en klik op <strong>Toevoegen aan menu<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fc137b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fc137b\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"516\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-123.png\/public\" alt=\"Voeg de menunaam toe in het tekstvak en klik op Menu maken. Ga daarna naar de sectie Menu items toevoegen.\" class=\"wp-image-4122\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-123.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-123.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-123.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>De ondersteunde items voor subitems zijn pagina&rsquo;s, berichten en categorie&euml;n. Daarnaast kun je custom links toevoegen om gebruikers naar een specifieke pagina op je website te leiden.<\/p><p>De geselecteerde items verschijnen in de <strong>menustructuur<\/strong>. Sleep ze eenvoudig in de gewenste volgorde om het menu naar jouw wens in te richten.<\/p><p><strong>2. Stijl het menu<\/strong><\/p><p>WordPress dropdown menu&rsquo;s kun je aanpassen met CSS. Schakel deze functie in door rechtsboven op de pagina <strong>Menu&rsquo;s <\/strong>het menu <strong>Scherm opties<\/strong> te openen en het vakje <strong>CSS Classes<\/strong> aan te vinken.<\/p><p>Wanneer je een item uitklapt, verschijnt er een nieuw tekstvak met de naam <strong>CSS Classes<\/strong>. Hier kun je aangepaste CSS classes toevoegen om de stijl van je dropdown menu aan te passen.<\/p><p>Bekijk onze complete CSS spiekbrief voor extra tips om je dropdown menu verder te personaliseren.<\/p><p><strong>3. Publiceer het menu<\/strong><\/p><p>Om de locatie van je nieuwe menu aan te passen, kies je een optie in het gedeelte <strong>Menu instellingen<\/strong> of op het tabblad <strong>Locaties beheren.<\/strong> Welke opties beschikbaar zijn, hangt af van je actieve WordPress thema.<\/p><p>In dit voorbeeld plaatsen we het menu bovenaan:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fc4422\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fc4422\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"383\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-124.png\/public\" alt=\"Voorbeeld; menu bovenaan plaatsen.\" class=\"wp-image-4123\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-124.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-124.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-124.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Klik rechtsonder op de knop <strong>Menu opslaan<\/strong> om je wijzigingen op te slaan en het dropdown menu te publiceren.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Pro tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Voor een visuele referentie bij het aanpassen van menulocaties, klik je bovenaan de pagina op <strong>Beheren met live voorbeeld<\/strong>. Dit is vooral handig bij het maken van complexe dropdown menu's met meerdere niveaus. In de live voorbeeldmodus zie je alle wijzigingen direct in de WordPress customizer, zodat je het dropdown menu meteen kunt publiceren. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-voordelen-van-een-dropdown-menu-voor-wordpress-websites\"><strong>Voordelen van een dropdown menu voor WordPress websites<\/strong><\/h2><p>Dropdown menu&rsquo;s bieden veel voordelen voor WordPress websites, zowel qua design als functionaliteit. De belangrijkste voordelen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Effici&euml;nt gebruik van ruimte<\/strong>. Submenu&rsquo;s maken het mogelijk om meer links toe te voegen zonder het menu rommelig te maken.<\/li>\n\n\n\n<li><strong>Betere navigatie<\/strong>. Bezoekers kunnen sneller specifieke pagina&rsquo;s vinden en openen.<\/li>\n\n\n\n<li><strong>Schaalbaarheid<\/strong>. Nieuwe pagina&rsquo;s of categorie&euml;n voeg je eenvoudig toe zonder het hele menu opnieuw te ontwerpen.<\/li>\n\n\n\n<li><strong>Strak design<\/strong>. Past zich aan het uiterlijk van je website aan voor een consistente look.<\/li>\n\n\n\n<li><strong>Betere toegankelijkheid<\/strong>. Helpt gebruikers, ook met cognitieve beperkingen, om makkelijker door de website te navigeren.<\/li>\n\n\n\n<li><strong>Duidelijke structuur<\/strong> . Zorgt voor een overzichtelijke en logische indeling van de content.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-de-beste-manieren-voor-het-maken-van-dropdown-menu-s-in-wordpress\"><strong>De beste manieren voor het maken van dropdown menu&rsquo;s in WordPress<\/strong><\/h2><p>Effectieve navigatiemenu&rsquo;s zijn belangrijk voor een prettige gebruikerservaring op WordPress websites. Een goed ontworpen menu &ndash; zeker met dropdown menu&rsquo;s &ndash; moet intu&iuml;tief en visueel aantrekkelijk zijn, zodat bezoekers snel bij de belangrijkste inhoud komen.<\/p><p>Hier zijn enkele goede tips om je dropdown menu&rsquo;s te optimaliseren:<\/p><h3 class=\"wp-block-heading\" id=\"h-houd-het-simpel-en-intuitief\"><strong>Houd het simpel en intu&iuml;tief<\/strong><\/h3><p>Bij dropdown menu&rsquo;s is eenvoud het belangrijkst. Een overzichtelijke menustructuur voorkomt verwarring en frustratie. Zet de belangrijkste links voorop en zorg dat ze makkelijk te vinden en te gebruiken zijn.<\/p><p>Beperk daarnaast het aantal menu niveaus. Veel lagen maken de navigatie onnodig ingewikkeld en kunnen je bezoekers afschrikken.<\/p><h3 class=\"wp-block-heading\" id=\"h-gebruik-duidelijke-en-beschrijvende-labels\"><strong>Gebruik duidelijke en beschrijvende labels<\/strong><\/h3><p>Zorg ervoor dat elk item in je menu direct duidelijk maakt waar het naartoe leidt. Vermijd vage of algemene termen die verwarring kunnen veroorzaken.<\/p><p>Consistente en herkenbare labels helpen niet alleen bij de navigatie, maar dragen ook bij aan een sterke en samenhangende branding van je website.<\/p><p>Daarnaast is het een goed idee om ARIA-labels (Accessible Rich Internet Applications) toe te voegen. Dit verbetert de toegankelijkheid voor schermlezers, waardoor je website gebruiksvriendelijker en inclusiever wordt.<\/p><h3 class=\"wp-block-heading\" id=\"h-gebruik-visuele-elementen\"><strong>Gebruik visuele elementen<\/strong><\/h3><p>Maak je menu aantrekkelijker en gebruiksvriendelijker door WordPress menu pictogrammen toe te voegen. Dit helpt gebruikers sneller te herkennen waar een menu-item over gaat.<\/p><p>Met een plug-in zoals <a href=\"https:\/\/wordpress.org\/plugins\/menu-image\/\" target=\"_blank\" rel=\"noopener\"><strong>Menu Image<\/strong><\/a> kun je eenvoudig pictogrammen toevoegen uit collecties zoals FontAwesome en DashIcons. Je kunt ze strategisch plaatsen binnen het dropdown menu of zelfs animaties instellen die geactiveerd worden wanneer iemand er met de muis overheen gaat.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fc7a57\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fc7a57\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"772\" height=\"250\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-125.png\/public\" alt=\"Menu Image plug-in startpagina\" class=\"wp-image-4124\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-125.png\/w=772,fit=scale-down 772w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-125.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-125.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Let er wel op dat je niet te veel pictogrammen gebruikt. Een overvol menu met onnodige visuele elementen kan de leesbaarheid verslechteren en bezoekers juist afleiden van de inhoud van je WordPress website. Houd het overzichtelijk en gebruik pictogrammen alleen als ze echt iets toevoegen.<\/p><p><strong>Custom CSS toevoegen<\/strong><\/p><p>Met custom CSS kun je de kleur, lettergrootte en spati&euml;ring van je menu-items precies zo instellen als jij wilt.<\/p><p>Ga in je WordPress dashboard naar <strong>Uiterlijk &rarr; Aanpassen<\/strong> en voeg onder <strong>Extra CSS<\/strong> je eigen stijlen toe. Zo kun je je dropdown menu helemaal afstemmen op het design van je website.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fca949\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fca949\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"283\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-126.png\/public\" alt=\"Extra custom CCS toevoegen.\" class=\"wp-image-4125\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-126.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-126.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-126.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Gebruik de tool Element inspecteren in je browser om de CSS <strong>#ID<\/strong> selector van je thema te vinden. Hiermee kun je specifieke elementen in het menu aanpassen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fcd753\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fcd753\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"233\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-128.png\/public\" alt=\"Gebruik de tool Element inspecteren in je browser om de CSS #ID selector van je thema te vinden.\" class=\"wp-image-4127\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-128.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-128.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-128.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>In dit voorbeeld passen we de kleur van het lettertype van het hoofdmenu aan naar blauw. Gebruik de volgende code om dit te doen:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#top-menu li.menu-item a {\n\ncolor:#0051D7;\n\n}<\/pre><p>Experimenteer gerust met verschillende CSS-stijlen of maak gebruik van kant-en-klare code om het ontwerp te stroomlijnen. Wil je meer leren? Bekijk dan deze tutorial over het maken van een eenvoudig CSS dropdown menu.<\/p><p><strong>Een Mega Menu maken<\/strong><\/p><p>Als je veel opties in een enkel dropdown menu wilt tonen, is een WordPress mega menu de beste keuze. In tegenstelling tot standaard dropdown menu&rsquo;s, bevatten mega menu&rsquo;s vaak meer links en submenu&rsquo;s.<\/p><p>Omdat dit type menu de volledige structuur van je website toont, kunnen bezoekers vanuit het hoofdmenu direct naar de verste delen van de website gaan. Dit is vooral handig voor grote websites, omdat het de navigatie vergemakkelijkt en de gebruikersreis verkort.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a60580fd059f\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a60580fd059f\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"852\" height=\"345\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-129.png\/public\" alt=\"Een Mega Menu maken\" class=\"wp-image-4128\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-129.png\/w=852,fit=scale-down 852w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-129.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2025\/06\/image-129.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Er zijn verschillende WordPress menu plug-ins waarmee je eenvoudig een aangepast mega menu kunt maken. Het hierboven getoonde mega menu is ontworpen met de Max Mega Menu plug-in. Andere populaire opties voor mega menu&rsquo;s zijn <a href=\"https:\/\/wordpress.org\/plugins\/quadmenu\/\" target=\"_blank\" rel=\"noopener\">QuadMenu<\/a> en <a href=\"https:\/\/codecanyon.net\/item\/superfly-responsive-wordpress-menu-plugin\/8012790\" target=\"_blank\" rel=\"noopener\">Superfly<\/a>.<\/p><p><strong>Dropdown menu&rsquo;s testen op verschillende browsers en apparaten<\/strong><\/p><p>Het testen van je dropdown menu&rsquo;s op verschillende browsers en apparaten is essentieel om ervoor te zorgen dat alle interactieve elementen goed werken op elk platform.<\/p><p>Het gebruik van een staging omgeving wordt sterk aangeraden. Dit maakt het mogelijk om menu&rsquo;s en ontwerpen veilig te testen en aan te passen voordat ze live worden gezet, zodat je een consistente en probleemloze gebruikerservaring kunt bieden op verschillende platforms.<\/p><p>Een webhosting provider die een staging omgeving aanbiedt, is daarbij heel handig. Bijvoorbeeld, Hostinger&rsquo;s Business en Cloud Startup <a href=\"https:\/\/www.hostinger.com\/nl\/wordpress-hosting\">Managed WordPress hostingplannen<\/a> bieden een handige staging tool.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/nl\/wordpress-hosting\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-160\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusie\"><strong>Conclusie<\/strong><\/h2><p>Het WordPress dropdown menu is een essentieel onderdeel van de website navigatie. Het maakt het gemakkelijker om door een website te bladeren en helpt, als het goed is ingericht, zoekmachines om inhoud te vinden.<\/p><p>In dit artikel hebben we de stappen besproken om een dropdown menu te maken, zowel handmatig als met een plug-in. We hebben ook handige tips gedeeld om je dropdown menu&rsquo;s te optimaliseren.<\/p><p>We hopen dat dit artikel je heeft geholpen om alle vragen over dit type WordPress menu te beantwoorden. Veel succes met het bouwen van je website!<\/p><h2 class=\"wp-block-heading\" id=\"h-hoe-maak-je-een-wordpress-dropdown-menu-faq-s\"><strong>Hoe maak je een WordPress dropdown menu FAQ&rsquo;s<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6943ffff84ebc\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Hoe wijzig je de volgorde van items in een dropdown menu in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Om de volgorde van items in een WordPress dropdown menu te wijzigen, ga je naar <strong>Uiterlijk &rarr; Menu&rsquo;s<\/strong>. Selecteer het menu, sleep het gewenste item naar de nieuwe positie, maak submenu&rsquo;s door items naar rechts te slepen en sla je wijzigingen op.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffff84ec2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Hoe kan ik mijn dropdown menu zichtbaar maken op alle pagina&rsquo;s in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ga naar <strong>Uiterlijk &rarr; Menu&rsquo;s<\/strong> en selecteer het menu dat je wilt bewerken. Klik op het tabblad <strong>Locaties beheren,<\/strong> kies de locatie voor je dropdown menu en klik vervolgens op <strong>Wijzigingen opslaan<\/strong>. Het dropdown menu verschijnt nu op alle pagina&rsquo;s.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffff84ec3\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Hebben dropdown menu&rsquo;s invloed op de laadsnelheid van websites?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ja, uitklapmenu&rsquo;s kunnen de laadsnelheid van websites be&iuml;nvloeden, vooral als ze complexe scripts of grote afbeeldingen bevatten. Maar met geoptimaliseerde codering en lichte ontwerpelementen blijft de impact op de snelheid meestal minimaal.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dropdown menu&rsquo;s zijn een super belangrijk onderdeel van veel websites en helpen bij het overzichtelijk en toegankelijk maken van inhoud. WordPress heeft een gebruiksvriendelijke interface waarmee je eenvoudig een dropdown menu kunt maken. In dit artikel laten we drie manieren zien om een WordPress dropdown menu te maken. Daarnaast bespreken we de beste methoden voor [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/nl\/tutorials\/dropdown-menu-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":538,"featured_media":4107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Hoe maak je een WordPress dropdown menu - 3 methoden","rank_math_description":"Een WordPress dropdown menu verbetert de gebruikerservaring en maakt navigatie gemakkelijker. Ontdek hoe je een dropdown menu maakt.","rank_math_focus_keyword":"wordpress dropdown menu","footnotes":""},"categories":[16],"tags":[],"class_list":["post-4105","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-dropdown-menu\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/menu-dropdown-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/menu-deroulant-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/menu-desplegable-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-menu-di-wordpress\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/dropdown-menu-wordpress\/","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/menu-rozwijane-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-wordpress-dropdown-menu-and-improve-site-navigation\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-wordpress-dropdown-menu-and-improve-site-navigation\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/menu-dropdown-wordpress\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/4105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/users\/538"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/comments?post=4105"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/4105\/revisions"}],"predecessor-version":[{"id":6202,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/4105\/revisions\/6202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media\/4107"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media?parent=4105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/categories?post=4105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/tags?post=4105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}