Create A WordPress Mega Menu The Easy Way


Looking for an easy way to create a mega menu at your WordPress site?

Web Hosting

Many themes don’t include mega menu functionality. And even for the themes that do, it’s often not especially flexible.

QuadMenu is a freemium plugin that can help you add a flexible mega menu to any theme (developers – you can even use it to offer theme users mega menu functionality).

So whether your theme is just plain missing this functionality or you feel limited by what your theme offers, keep reading my QuadMenu review for a look at how this plugin can help you create a WordPress mega menu for your site (or maybe your client’s sites).

QuadMenu Review: What All The Plugin Does

You know that QuadMenu helps you create a WordPress mega menu. Let’s get into how that functionality actually works…

First off, all the mega menus that you create are responsive. So no matter which device your visitors are using, they’ll still have a good interaction with your menu. You can also customize the breakpoints and show/hide certain menu items depending on a visitor’s device.

Beyond just changing the design, QuadMenu also includes touch screen events natively, which means your menus will have a good user experience on touch devices (beyond just looking nice).

To actually build your mega menu, QuadMenu gives you a drag-and-drag interface, which makes it simple for both casual and power users to use. And using this drag-and-drop builder, you can create both horizontal and vertical layouts for your mega menu.

It also supports two other helpful layout/functionality items in the form of off-canvas menus and sticky menus.

Once you have your layout, you can use the native WordPress Customizer interface to control styling, which is convenient because you’ll see a live preview of your menu as you make all of your style changes.

As for what to include in your mega menu, QuadMenu can help you insert menu items like the native WordPress menu system. And the free version also lets you incorporate:

  • Any WordPress widget
  • Icons
  • Search
  • Cart

If you go with the Pro version, you’ll get some new options including:

  • Tabs
  • Login
  • Register
  • Social
  • Carousel

The menu builder works inside the normal WordPress menu area. Once you get a hang of how it works, it’s pretty easy to use.

One-Click Integrations With Popular Themes

Beyond the features above, another neat QuadMenu feature is its one-click integrations with a number of popular themes. These are separate free extension plugins that make it super simple to instantly integrate with the following themes:

So if you’re using one of those themes (which you should – that list has two of our favorites in GeneratePress and Astra), then you can get up and running with very little fuss.

Lots Of Developer Features

If you ever want to dig in and further customize things, QuadMenu includes a bunch of filters that let you change how QuadMenu works on both the front-end and back-end.

To learn more, check out the developer documentation.

Beyond that, if you’re a theme developer, QuadMenu includes functionality and documentation to help you integrate QuadMenu into your own theme that you offer to users.

Hands-On With QuadMenu: Creating A WordPress Mega Menu

Ready to check out all that functionality? Let’s go hands-on and I’ll show you how it works…

Once you install QuadMenu, it will take you to the general options area where you can tweak important basic settings like:

  • Responsive breakpoints
  • Menu layout
  • Colors
  • Typography
  • Animations

You can also create your own separate menu themes, rather than working with the default theme:

You can create multiple themes, which is helpful if you’d like different implementations.

This area is also where you can enable the mega menu functionality for your header or footer and choose which theme to use:

In the free version, this back-end interface is your only option. But the Pro version gives you access to all of these same settings inside the real-time WordPress Customizer. Needless to say, that’s a lot more convenient, and a big reason to consider the Pro version:

I haven’t set up my menu yet. But once you have a mega menu, you’ll be able to preview these changes in real-time.

The Layout area includes some especially important functionality, as it’s where you’ll:

  • Choose between vertical or horizontal layouts
  • Adjust alignment options
  • Set a max height for drop-down menus
  • Etc.

Building Your Menu With Drag And Drop

Once you’ve configured the basics for your desired menu theme, you’ll choose which menu items to include in your mega menu.

One neat thing is that QuadMenu offers a development mode where you can build your mega menu before making it active

To activate the QuadMenu builder while you’re in development, you’ll go to the normal Appearance → Menus area. Then, you need to create a menu and assign it to the QuadMenu Dev display location (or, you could edit an existing menu):

Once you do that, you’ll unlock these new QuadMenu Items and QuadMenu Archives options:

Some of these new items are wrappers, which means that you can put other menu items inside them.

This is where the magic happens.

For example, the Mega option is basically a container that you can break into columns and fill with other menu items.

Once you add a QuadMenu item, you can hover over the Menu Structure area to access its structure:

Here, you can control things like:

  • Whether it should be hidden on certain devices
  • Backgrounds
  • Icons
  • Widths

And you can also configure the content that goes inside the Mega item, including an option to add additional columns.

You can add any menu item inside these columns, including both native WordPress menu items, widgets, and QuadMenu additions:

You can also use drag-and-drop to rearrange menu items inside the columns:

And you can also configure each individual item by clicking on the Wrench icon:

If you want to do more than just include links in your columns, you can use the new QuadMenu Widgets box to access any of your WordPress widgets:

The Mega item is kind of a catch-all container, but QuadMenu also includes other wrapper elements for:

And beyond those containers, you also get dedicated items for:

  • Buttons
  • Icons
  • Cart button for WooCommerce
  • Search form
  • Social icon list
  • Login/register

Putting It All Together

Ok, so let me try to tie all of this together.

Let’s say you want to create a parent menu with 3 options:

The “Home” and “Contact” items are just regular links, but hovering over the “About” item opens a mega menu.

In the main Appearance → Menus area, it would look something like this:

And then you would build all the mega menu content inside the Mega wrapper:

And that’s what creates this effect on the front-end:

Once you get the hang of it, it’s super easy!

One-Click Theme Integration

Remember those one-click integration extensions I mentioned? Let me quickly show you how one works using the Astra theme.

If you’re using one of the supported themes, you first need to install the relevant extension plugin (they’re all listed at WordPress.org).

Once you’ve done that, it will automatically create a menu theme for you:

If you’re using one of the supported themes, that’s a really convenient feature to save you from needing to manually style your QuadMenu theme to match your WordPress theme.

QuadMenu Pricing: Surprisingly Affordable

While QuadMenu does have a free version, I like the Pro version for the WordPress Customizer functionality and the extra features like:

  • Tabs
  • Carousel
  • Social networks
  • Login

Here’s the great thing about the Pro version:

It’s super affordable!

For a single site license, it costs just $9. And if you’re a developer, you can grab a version that lets you use it on unlimited sites for $50.

Final Thoughts On QuadMenu

If you need to create a WordPress mega menu, QuadMenu gives you deep functionality to do it while still keeping things as familiar as possible by using the normal WordPress menu interface.

It might take you a couple minutes to understand how the interface ties together. But once you get the hang of things, it’s pretty easy to use.

I like that the Pro version lets you customize your menu using the real-time WordPress Customizer. And if you’re using one of the one-click integration themes, you won’t even need to spend time configuring your mega menu theme’s styling.

You can get started for free. And if you like the basic functionality, I’d consider going Pro for just $9 to get the extra functionality and real-time visual customization.

Get QuadMenu



Source link

Leave a Comment