![Mega Menu in WordPress built with GenerateBlocks](https://silvanhagen.com/content/images/2024/06/kofi-annan-mega-menu-wordpress-1.jpg)
In this tutorial, we will be building a WordPress mega menu similar to the Kofi Annan Foundation. We will be using GenerateBlocks Pro and a little bit of custom code. You can download a Twenty Twenty-Four child theme with the code on Github. Are you a visual learner? There is a video below 👇
The setup
You will need the following in order for this to work properly:
- A WordPress site with a block theme
- Access to the theme files
- The fantastic GenerateBlocks Pro plugin
What are we building?
With the rise of block themes and full site editing in WordPress, we get more and more features, that don't need much code at all. However, when I started developing the Kofi Annan Foundation website, there were no suitable solutions to build mega menus as seen above, built into WordPress core.
We are building a flexible mega menu for our WordPress site using the accordion blocks from GenerateBlocks Pro with a little CSS and Javascript.
Here are the specs the designer and I defined for the mega menu:
- Blurred background when a mega menu is open
- Possibility for the client to edit the mega menu in WordPress
- Open the mega menu on click or tap on mobile
- Clicking outside of the mega menu to close it
- Hitting the
ESC
key to close the mega menu - Having a link on the menu item that opens the mega menu and takes you to the page on the secondary click (if the menu is open)
You can easily change the behavior and style of the mega menu using a little bit of Javascript and CSS. Check it out in action on the Kofi Annan Foundation website.
Let's get started
By now you have a fresh local WordPress installation running and your copy of GenerateBlocks Pro installed and activated.
Preparing the WordPress theme
For the purpose of this tutorial, let's create child theme of the Twenty Twenty-Four block theme using the Create Block Theme plugin:
![](https://ps.w.org/create-block-theme/assets/banner-772x250.png?rev=2777957)
- Install and activate the plugin
- In WordPress admin go to Appearance > Create Block Theme
- Click on "Create a Child theme of Twenty Twenty-Four"
- Follow the process to create your child theme
- Open the project in your code editor of choice
Creating the mega menu blocks
Let's open the site editor from Appearance > Editor and click into the header and remove the navigation, if it exists. In place of the navigation add the Accordion block:
Remove the navigation block and add the accordion block
Now, add the class navigation-overlay
to the Accordion Content block. We will need this later.
With the basics in place, add a group or container block into the Accordion content block and start filling it with the content you would like to have. To speed things up, you can use copy the Accordion block instead: GenerateBlocks Accordion as Mega Menu.
Add the necessary javascript to your theme
In your child theme, add the following javascript snippet to a functions.js
file (or create the file). We will make sure the javascript is loaded in an upcoming step.
Add the mega menu styling
Open or create the style.css
file in your code editor and add following content in order to style the mega menu on the frontend and make it editable in the WordPress editor:
Making sure our styles and javascript are loaded
Create functions.php
file in your theme and add the code below. This will load our child theme style.css
(on the frontend and in the editor) and functions.js
files to make the mega menu work:
The result
Congratulations! If you followed along, you now have a WordPress mega menu built with blocks. It should look something like this:
A WordPress mega menu built with blocks
With the flexibility of blocks you can create mega menus with almost endless possibilities. Have a look at the Kofi Annan Foundation website to see how I created the mega menus based on the code outlined in this tutorial.
For visual learners
Here is a video of the entire tutorial, if you prefer to watch a video:
Additional remarks
You might want to check and improve the accessibility using proper aria labels and making sure the keyboard navigation is working as expected. Going forward, I will eventually switch to a custom block for the Kofi Annan Foundation, now that the WordPress navigation block can be extended (see below).
Alternative Solutions
Extend the WordPress navigation block
Ready to build your own blocks? If that's you, feel free to check out the fantastic tutorial by Nick Diego on the WordPress Developer Blog on how to extend the navigation block in WordPress core:
![](https://developer.wordpress.org/news/files/2024/02/thumbnail-sidebar-controls-3.png)
Try the WordPress Mega Menu Block plugin
Personally this plugin didn't work out for me and I decided to go with a GenerateBlocks Pro solution as laid out above. Feel free to check out this free plugin, maybe it works for your case:
![](https://ps.w.org/getwid-megamenu/assets/banner-772x250.jpg?rev=2349774)