❮ Back to the Blog

Finally a Simple Native Solution to WordPress Mega Menus

2 min read

We’ve been using WordPress as a CMS for a long time at Motto. WordPress core has evolved over time from a simple blogging platform to a full CMS, but one particular feature has been missing for awhile: the WordPress Mega Menu. Ever since 2010 when e-commerce really took off on the web, mega-menus, a style of dropdown menu that spanned the width of the page and allowed more complex sub-menu layouts, became an effective and popular option.

The only problem is that WordPress has only ever supported the ability to add simple linked list items (<li><a></a></li>) as submenus. However, mega-menus by their nature contain complex multi-column layouts, and other elements like images that require much more complex HTML markup than a simple anchor tag list.

The current solutions on the market are far from “native.” They impose their own styles and functionality and often lead to a large amount of overhead with little developer flexibility. They are the out-of-the-box solutions that may work for the plug and play user not concerned with performance or compatibility, but for the developer or seasoned WordPress administrator, a native solution is much needed.

To address these problems, we developed an extremely lightweight WordPress mega menu plugin that simply connects already native features of WordPress together: sidebars and menu items. Sidebar (widget areas) are a natural place to add arbitrary content and are often used for things other than actual sidebars, such as footers and secondary headers. WordPress Sidebar Menu Items simply adds the ability to embed a sidebar as a menu item (and therefore a dropdown). This is the perfect way to construct a fully flexible mega-menu, especially during custom theme development. At the same time, there is no required styles or javascript, it should naturally integrate with your theme. You may need to add your own styles to support the kind of mega-menu you want, but most themes will have some sort of guide for that.

Here is a demo of the plugin in use with one of our favourite themes GeneratePress. This is a developer friendly lean and flexibility theme. Naturally they don’t include everything out-of-the-box, including mega-menus, but offer a small tutorial for the styles needed to add this basic mega menu behaviour. Their example is limited to only submenu items in the menu, so check out how you can extend this to any widget with our plugin: