How to create a Mega Menu (full customizable dropdown)

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).

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

Enable the custom menu layout

  • Location: Appearance → Menus
  • Add a menu item or use an already existing one (you don't need to add a UX Block as the menu item itself, as a UX Block link will navigate to the block, you likely want to use f.ex. a custom link menu item).
  • Enable a 'Design' and select the block you just created for the purpose of the custom menu layout.
  • Save the menu.

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

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
  • Make sure every UX Block assigned to a menu is a unique block

Edit mode

Requirements

  • 3.13.0 or greater
  • WordPress 5.4 or greater

Related Articles