jakson-wordpress-development-and-courses

Create a Mega Menu in WordPress 2024 – core blocks only!

●

Aug 1, 2024

●

So, “Mega Menus”…

You may have seen my vid on how to create a Tabs component using only native Gutenberg Blocks a couple of week ago – see it here: https://youtu.be/B0f5vIXPt4I

It was the first in my mini series of “missing blocks” where I look at what could be classed as “should be a core block”, is not, and what we can do to overcome that if we need that type of block in our project.

This time it’s the turn of the “Mega Menu” – useful if you want to display a little more than links in your sub menus – you can really use it as an extra piece on real estate if you wanna push the user journey forward.

It’s not a WordPress core block – though to be fair I’m not sure it should be, that said if nearly all the other page builders out there have them (and WP is now technically a page/site builder) then there’s a debate to be had!

Either way, after making the Missing Tab Block vid I realised that approach could be used for Mega Menus, and with a little tweak here and there I think we’ve got it sorted.

So in this WordPress Block Theming Tutorial, may I present to you “Block Theme Mega Menus!”

👉 *** Grab all the code, patterns, templates and tons of other Free WordPress goodies here: https://jakson.co/freebies/
👉 *** Get a Free Site Performance Review here: https://jakson.co/free-site-performance-review/

Ciao!
Jakson

#wordpress #blockthemes #pagebuilder #wordpressdevelopment

Jakson

I’ve been working with the Web for more than 17 years, from straight HTML & CSS, through pretty much every CMS until WordPress stuck about 14 years ago and that was that!

3 responses to “Create a Mega Menu in WordPress 2024 – core blocks only!”

danpardella

September 23, 2025

Nice try to build it only with core blocks. I really appreciate you sharing it.

I’ve been testing it a bit, and I can’t seem to get around one thing. Unfortunately, WordPress always defaults to “Mega 1.” The Mega menu opens briefly, then the redirect appears. Do you have any ideas?

I really hope the mega menu finally finds its way into the WordPress core. Your approach here is certainly a good start.

Reply
danpardella

September 23, 2025

ha…looked at the js again and added a line.

link.addEventListener(‘click’, (e) => {
e.preventDefault(); // 🚀 prevent browser redirect

if (link.classList.contains(‘active’)) {

so. that’s it. works smooth again. maybe you want to update it in your freebies.

Reply
Jakson

September 23, 2025

Hey Dan, thanks for the feedback and the extra code fix! I’ll get that update into the file downloads.

BUT! Update: Mike McAlister of Ollie Theme has just released a plugin for Mega Menus with Blocks! And I’ve just released a vid on it here: https://youtu.be/4oZnyA7Zuxw

Cheers!
Jakson

Reply