How to create a Mega (multicolumn menu)

Megamenus can be built in Kadence using the Ultimate Menu addon available in Kadence Theme Pro Addon.

Any hooked element can be set to be used as a child menu item’s content which means the possibilities are endless. Ultimate Menu allows you to build your menu content using the WordPress block editor you are familiar with and show it in one or more columns in different layouts.

Note: "Menu Item Settings" button for each menu item to configure the mega menu settings may not appear immediately when an item is added to your menu. Save the menu and check again.
Menu Item Settings button

The steps below walk you through showing Address + Business Hours, a Map, and a Contact form in 3-columns when “Contact” nav menu item is hovered.

A sample mega menu in Kadence

At Appearance > Kadence, enable Hooked Elements.

Go to Kadence > Elements and add a new Element of the type, DEFAULT.

Name it say, “Contact Menu Content”. For the content, use Gutenberg blocks.

In our test site, we used a “Row Layout” block added by Kadence Blocks set to use 3 columns. Business Hours and Map blocks were by Jetpack and the Contact Form is from Kadence Blocks. You might want to set a top and bottom padding of some 25px in addition to the left and right padding values so the content has some breathing room inside the menu.

Create or edit a menu and add a top-level “Contact” menu item.

Click on the “Menu Item Settings” button and in the Label Settings modal you can find options to disable the link, add an icon etc. for the menu label.

Label Settings

Click on Mega Settings to configure the mega menu that appears on hover.

Mega Settings

In the current example, since we the hooked element’s content itself has 3 columns, we select 1 mega menu column in the Mega Settings. Also, we changed the Dropdown Background to a light blue theme color (#F7FAFC).

Press Save.

Next, add a Custom Link under “Contact” as a sub menu item.

Click Menu Item Settings and then Mega Settings.

Enable Custom Content and select the element whose content this should replace this item.

Press Save.

Save your menu.