How to create a Mega Menu (full customizable dropdown)

In this article

  1. Create a new Block
  2. Enable the custom menu layout
  3. Configure the custom menu layout
  4. Edit mode

1

Create a new Block

Blocks can be titled anything, but we'll use the next once as an example and prefix them with CML (custom menu layout).

  • Create a new empty block 'CML - Mega 1'
  • Location: Dashboard → Blocks → Add new

2

Enable the custom menu layout

  • Enable a 'Design' and select the block you just created for the purpose of the custom menu layout.
  • Save the menu.
  • Location: Appearance → Menus
  • Requires: at least 3.13 and WP 5.4

If this menu is also assigned to the menu location 'Main Menu - Mobile', then child menu items are visible in the sidebar navigation.
It is possible to separate main navigation and sidebar (mobile) navigation if you so require.
Check our doc about this topic here

3

Configure the custom menu layout

  • After you have saved the menu options in the previous step, navigate to the frontend
  • Edit the menu layout by using the "Edit Block" link when hovering the menu

4

Edit mode

Requirements

  • 3.13.0 or greater
  • Wordpress 5.4 or greater