Experimenting with block-based mega menus

I've had this idea to build a custom "Mega Menu" block for a while now, but there were a few blockers.

First, you could not (easily) add your own custom blocks to the Navigation block in WordPress. The second was that the Interactivity API was not yet public. With both of these solved in WordPress 6.5 and the beta releases now available, it's time to start experimenting.

I'm in the process of writing a more comprehensive tutorial for the Developer Blog, but I wanted to share the progress I've made in the past few days.

You can also try the "Projects" mega menu in the navigation above.

More details are included in the official tutorial post, but here's a quick rundown of my approach and current limitations.

Approach

• Create a custom block called "Mega Menu" that can be inserted into the Core Navigation block
• Register a custom template part area called "Menu"
• Menu template parts are created and edited in the Site Editor, not directly in the Navigation block
• A user inserts the Mega Menu block and then chooses the Menu template part they want to display

Limitations

• You must be using a block theme (e.g., Twenty Twenty-Four)
• There is no support for vertically positioned Navigation blocks
• There is limited support for the mobile overlay of the Navigation block
• The width of each mega menu is restricted to either full width or content and wide width as defined in theme.json
• There is no UI for editing a mega menu in the Navigation block itself

The hardest part of the project was ensuring each mega menu was displayed correctly on the front end. There are still a few bugs and edge cases. Every theme and menu design is different.

While I plan to keep tinkering with this block, it will likely always be experimental. I think it's a solid framework to iterate off for specific use cases, but building a one-size-fits-all solution for mega menus will be tricky.

If you want to try it, check out the code on GitHub or test the block in your browser using Playground.