Home » Creating a Mega Menu using the WordPress 6.5 – Deep dive into the power of the Interactivity API

In this video, we dive into the exciting world of WordPress 6.5’s Interactivity API and explore its potential by creating a dynamic mega menu from scratch. The inspiration for this video came from Nick Diego’s concept, which I stumbled upon on Twitter.

Throughout the video, I’ll guide you through each step of the process, breaking down complex concepts into digestible segments.

By the end of this video, you’ll have a deep understanding of how to leverage the WordPress 6.5 Interactivity API to create dynamic mega menus that captivate your website visitors.

Stay tuned, subscribe and like the video!

Twitter Post “Nick Diego”:

Post about it from Nick:

Github repo “Nick Diego”:

Github repo:


00:00 Introduction
00:43 Showcasing end result (example)
04:05 Run command to scaffold block
04:38 Edit block.json
06:28 Add custom menu template part
07:37 Fix typo registering custom menu template part
08:34 Explanation how WordPress block development works
09:16 Explain Edit.js
10:19 Install icon library
10:26 Setup all attributes and variables in Edit.js
11:20 Run watcher with “npm start”
11:34 Explain site URL
11:57 Fix site URL, should be function 12:15 Write Edit.js boilerplate
14:40 Explain and add InspectorControls
16:46 Create rendered <div> in Edit.js
17:29 Add all the “.scss” (css) files
17:54 Configure index.js – this is the JavaScript entry file
18:22 Create render.php
22:01 Creating state in View.js
23:05 Add “actions” and explain how the menu opens and closes
25:28 Add callback “initMenus”
25:43 Outro

Do you have any questions? Please feel free to leave a comment below, and I will do my best to respond as quickly as possible.

If you’re interested in more tutorials or engaging content, be sure to check out my YouTube channel