Tutorial: Creating a mega menu with the block system

[bph]

Discussed in #182

^{Originally posted by justintadlock December 13, 2023}
First, I want to say that this is a REALLY rough idea. One of the downfalls of the block system (really, even classic theming) is that there are no easy ways to create mega menus. And if I had a nickel for every time a developer asked me about this, I could at least buy myself a dinner at a fancy restaurant.

I'm just throwing this topic out here to talk ideas/solutions at the moment. It's not formed well enough to approve it as a topic on the blog. Think of this as more of an open invitation to answer:

• Are mega menus possible with the block system?
• If so, can we build something that's user friendly with the tools at hand?
• If so, can we explain this through a tutorial?

I've heard some ideas tossed around using patterns or template parts. I'm going to try to explore some options through code in January, but I also want to make sure this is wide open for feedback/discussion.

[justintadlock]

I think this one got approved a little ahead of what I was prepared for. I'd still like for us to continue the discussion around code solutions in this ticket.

I know that this is possible since I've seen a couple of implementations, but I also don't know how to approach it. Yet.

[brettsmason]

Following up on our Twitter exchange, I'd love to help progress this in any way I can. I've been trying on and off for a few months to find a solution to more complicated menus in block themes, but have so far come up short.

I recently did some research on menu implementations around larger sites and put together a Figma file with my findings.

It feels like the core problem is the lack of flexibility to include more block types within a submenu, as its very restrictive at the moment. The ability to include columns for example would be good.

I think the menu block in general is too focused on one style of (simple) navigation, but that's likely a seperate issue.
If I can provide any further information that may help then let me know.

[justintadlock]

Thanks, @brettsmason. That's very helpful feedback. I've got an idea or two that I want to test out, but those will have to wait until at least next week.

[justintadlock]

Tested out an idea with the upcoming allowedBlocks filter: https://make.wordpress.org/core/2024/01/31/whats-new-in-gutenberg-17-6-31-january/

Early idea shared in a video here: https://twitter.com/justintadlock/status/1753593003266932887

[ndiego]

This one is ready for its second review, thanks @bjmcsherry for doing the first review.
https://docs.google.com/document/d/1SHHlMjQ-alxx1ijpoZCZ1qDMxFhHhqO1IgP4kzF8I1w/edit

[justintadlock]

@ndiego - Really great work here! 🚢 when ready.

[ndiego]

This tutorial has been published: https://developer.wordpress.org/news/2024/02/29/an-introduction-to-block-based-mega-menus/

[ndiego]

Social copy

Mega menus are one of the most commonly requested features for block themes. Learn how to build your own custom Mega Menu block using new features coming in WordPress 6.5, like the Interactivity API.

https://developer.wordpress.org/news/2024/02/29/an-introduction-to-block-based-mega-menus/