WordPress Mega Menu with Blocks

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:

1. A WordPress site with a block theme
2. Access to the theme files
3. 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:

Create Block Theme

A WordPress plugin to create block themes.

WordPress.orgsinanisler

1. Install and activate the plugin
2. In WordPress admin go to Appearance > Create Block Theme
3. Click on "Create a Child theme of Twenty Twenty-Four"
4. Follow the process to create your child theme
5. 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:

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:

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:

An introduction to block-based mega menus

In this tutorial, we’ll explore how to build a Mega Menu block that integrates with the Core Navigation block using new features coming in WordPress 6.5.

WordPress Developer BlogNick Diego

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:

WordPress Mega Menu Block

Build better navigation menus with the WordPress mega menu blocks.

WordPress.orgOlybop