This mega menu WordPress tutorial builds one that’s genuinely yours, icons, descriptions, an image, and a layout that adapts to mobile, all without writing code. The trick is building one menu item well, turning it into a reusable component, then duplicating it for the rest.
Start the mega menu
If you’re in the Template editor, double-click the header to open the Master editor where the navbar lives. Enter the navbar’s scope, then use the Add panel to drop in a new Dropdown element at the right spot. Enter the dropdown’s scope and rename its text, for example to Features.
Build the first menu item
The dropdown’s wrapper starts with a list of 2 items. Delete the second one so you can focus on building just the first menu item, then rename its text, for example to Chat.
Duplicate the item’s text and use the second copy as a short description underneath the title.
Change the element class on the second text so it reads as supporting copy instead of another title.
Wrap the title and description in a Rows element and use its utility classes to add breathing room between them.
Add an icon from the icon library and search for a match, for example chat, to sit alongside the title and description.
Wrap the item in a Columns element instead of using the Menu link item directly, a Columns element gives you utility classes to adjust the gap. Add the Rows element from the earlier step into this Columns element and adjust the gap with a utility class.
Select the Menu link using the toolbar and set its link with the link icon. Paste a URL, or start typing a page name and Mosaic will suggest it.
Turn the finished menu item into a Component, for example named Menu link, and set it to be a part. That makes it reusable for the next items instead of rebuilding them from scratch.
Add more items and an image
From the toolbar, select the Item or the List parent, then use the plus icon to add more items. Swap out each new item’s icon and text, and repeat for a third item.
A row of menu items alone can feel more medium than mega. Drop an image into the dropdown to give it more visual presence.
Wrap the List item in a Grid element and move the image into it too, then set the Grid’s element class to two columns so the items and image sit side by side.
The grid looks too wide at first. Apply a max-width utility class and set it to 8 columns to bring it back in line.
Select the wrapper and adjust its top margin to close the gap between the dropdown and the wrapper.
Set behavior and fix mobile
In the dropdown’s settings, set it to open on hover with a soft fade and a slight slide down. Adjust the position too, if the default doesn’t fit.
Preview what you’ve built so far to confirm it matches what you see in the editor.
Switch to Mobile view and drop the extra column from the grid. That alone is enough to fix the layout on smaller screens.
Result
You now have a fully custom mega menu, built from a single reusable menu item component, with an image alongside it on desktop and a layout that adapts cleanly on mobile. Duplicate this pattern for other dropdowns, or start from one of Mosaic’s ready-made mega menus in the Library instead of building from scratch.