Skip to content

WordPress Mega Menu with Blocks

Blog  ✺  WordPress  ✺  Video
Mega Menu in WordPress built with GenerateBlocks

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
ℹ️
I recommend setting up a local test site using either Herd or Local WP to follow along.

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:

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

Make sure you have a theme that you can edit without losing the capability to update it later. This means a custom theme or a child theme of an existing 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.
  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:

0:00
/0:11

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:

0:00
/0:15

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.

The entire code for the Twenty Twenty-Four child theme with a template part for the header can be found on GitHub.

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.

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.

Before you go, let me know on twitter how you build mega menus in WordPress. Feel free to sign up to my newsletter for more.

Comments

You might like

Calm: Peaceful Pictures

Opinion  ✺  Photography

Background File Upload in Filament Forms

Filament  ✺  Video