Navigation menus are an essential component of any successful website. Simply put, they help visitors to get around. This improves the “flow” of your website, encouraging visitors to stay on site for longer, consume more of your content, and hit your conversion goals — all the good stuff, in other words.
More than this, though, navigation menus are an integral piece of your site’s overall design — they are displayed on every unique page, after all. Remember: A visually impressive navigation menu can make an average website look great, and the reverse is certainly true, too.
As such, building and styling your navigation menus is not a decision to undertake lightly — both from an aesthetic or a navigational perspective.
Fortunately, there are tons of great menu plugins for WordPress users. Today, we’re sifting through them to bring you our seven favorites. And because every plugin in this list is fully responsive, users on mobile devices can enjoy them, too.
Here we go then, the seven best responsive menu plugins for WordPress (including both free and premium plugins).
In no particular order…
Let’s start with perhaps the most powerful menu plugin of all — UberMenu. Notching over 60,000 downloads so far, this plugin is insanely popular and ranks in third place on the leaderboard for CodeCanyon’s best-selling plugins of all time.
The UberMenu plugin lets you build some of the most beautiful menus it’s possible to find in the WordPress world. Called “mega menus,” you can make them incredibly complex, with unlimited levels of sub-menus for visitors to dig around in. When it comes to enhancing navigation, mega menus are unparalleled.
The plugin’s main selling point is the advanced content you can add to your mega menus. For starters, this includes images, Google Maps, and blog post grids. UberMenu can even pull blog content for these grids dynamically, based off a variable of your choice — the variable could be the post category, post type, parent, or author, for example. The plugin will also automatically add the posts’ featured image to the grids, ensuring the menus always look the part.
Beyond this, UberMenu also integrates with third-party widgets and shortcodes. This means you can incorporate functionalities from other plugins into your menus, for an even better visitor experience.
As you’d expect from a plugin that emphasizes design, UberMenu ships with customization options galore. These include 25 of the most popular Google Fonts, font sizes, and infinite colors. You can also upload a custom background image for each menu item.
With such versatility, you’d be forgiven for thinking that UberMenus are difficult to construct. This isn’t the case, though, thanks to the plugin’s intuitive builder.
The builder lets you create your menus using responsive grids with up to 12 columns, which you can populate with content blocks. To customize these blocks, simply click the one you want, and UberMenu will bring up the options available for it. You can also watch your menu come to life in real-time from the WordPress Customizer — this live preview function is invaluable.
UberMenu creates a versatile range of menu types and sub-menus. You can even tone it down to build old school flyout menus.
Or, you could go all out and mix-and-match a variety of these options into one single menu — the whole shebang.
The results truly are stunning, right? And you can even align your menus vertically, should you wish. These menus support the same features and functionalities, but with a vertical alignment.
Now, although UberMenu is fully responsive, the intricate design of the mega menus might make them less suitable for smaller devices. If you feel this to be the case, the UberMenu developers have provided users with a free mobile menu plugin: ShiftNav. This lets you build app-style navigation menus for mobile users.
Finally, it’s worth pointing out that due to UberMenu’s unstoppable popularity, the developers have released four official extensions on their website.
Extensions are available for $8 each or as a $19 bundle.
“Mega Menu” functionality is relatively advanced, meaning you will only usually find it in premium plugins. However, if you know where to look, it is possible to find it for free.
Introducing Max Mega Menu, an excellent mega menu plugin available from the official WordPress plugin repository. With the plugin installed and activated, your existing WordPress menus are automatically upgraded to mega menus.
Building your menus is super-easy, courtesy of the drag-and-drop builder. You can also preview your menus in real-time, letting you make styling decisions on the fly.
Talking of styling, Max Mega Menu comes with nearly endless customization options. Fonts, sizes, colors, and icons are just the tip of the iceberg, with more than 100 customizations supported. There are some great-looking CSS3 animations built-in, too, making your menus even easier on the eye.
As with any mega menu plugin, you can also build some pretty complicated menus. You can add loads of cool things to them, including images and dynamic content like maps. You can even integrate functionality from other plugins, as Max Mega Menu lets you add widgets to your menus. This means you can incorporate functionality like calendars, videos, and contact forms.
Best of all, Max Mega Menu is one of the quickest mega menu plugins around, weighing less than 2kb and with the stylings confined to a single CSS file.
If you like what you see, consider upgrading to the Pro version for just $19. The Pro version lets you add WooCommerce and Easy Digital Download checkout features to your menus, among other cool features.
If you’d prefer vertical menus rather than the traditional horizontal alignment, check out the Superfly plugin. It doubles up as a fantastic space saver, too, letting you utilize the full dimensions of the screen.
This is achieved by hiding the menu behind a toggle button in the top-corner. When clicked, the menu slides into view, leaving visitors free to navigate your website — you could also choose to permanently anchor the menu to the side of the screen, though.
Why might you want a vertically aligned menu? Well, for starters, they’re considered more “mobile friendly.” You also encounter them less frequently, making them quite a striking addition to any website. And, as you’d expect, Superfly supports an abundance of styling options, which help you make this unusual menu type even more striking.
The plugin ships with an icon library, tons of Google fonts, and full color customization. You can upload custom imagery for your menus, too — from a background image to the logo displayed at the menu top. You can also integrate widgets or shortcodes from other plugins, or create custom HTML styling. You can even customize the design, shape, and placement of the menu trigger button.
Because the menus open out into the screen, up to four levels of sub-menus are supported. Additional levels look equally stunning and can be configured with unique styling, as demonstrated in the screenshot below.
Because these quirky menus might not suit every situation, Superfly offers several page targeting configurations. Here, you can choose to disable Superfly menus for certain user groups — for example, desktop users — or on specific pages.
One final feature: you can also add social sharing buttons to the bottom of your menus, with over ten social networks supported. With any luck, this will result in more social shares for your content.
If you like Superfly’s vertical menus but don’t have the budget, the Responsive Menu plugin might interest you — it builds great-looking vertical menus and can be downloaded free of charge from the official plugin directory.
For a free plugin, Responsive Menu ships with an impressive amount of customizations — over 150, in fact. These cover all of the usual customizations: font, size, alignment, and color. You can also upload custom backgrounds, logos, and icons, letting you add a personal touch to your menus.
The plugin anchors a simple menu button to the top-right of the screen. When clicked, the menu slides into view with a beautiful animation effect. Because the menus take up a lot more of the screen compared to Superfly, each subsequent level opens downwards, rather than outwards, as seen in the following screenshot.
Other useful features include search functionality for your menus, and the ability to select which screen sizes the menus are displayed on.
If you like the free version, a $14.99 Pro version is available, which introduces a live preview functionality, FontIcons, and animated menu items.
We’re back onto mega menus again with our next plugin: Hero Menu. The plugin boasts loads of versatility and tons of customization options, meaning it’s possible to create nearly endless menu designs.
Hero Menu ships with 250+ free icons, plus you can customize your menus with a choice of 650 Google fonts and infinite colors. And, to help those of you who lack a natural flair for design, you’ll find 60 stunning color pre-sets, as created by a team of skilled graphic designers.
The plugin makes menu building a breeze, too, thanks to its streamlined custom interface. Everything is drag-and-drop, letting you add depth to your menus, re-order menu items, and tweak the design with ease.
Hero Menu supports all of the usual mega menu content — images, videos, maps, blog content, plus shortcodes and widgets from other plugins. However, Hero Menu is also compatible with WooCommerce, which means you can add products, their prices, and thumbnail images to your menus. You can also activate a search function and social media sharing buttons at the click of a button.
The plugin also ships with “sticky menu” functionality, which means it remains anchored to the top of the screen, even as a visitor scrolls down the page. And, when Hero Menu detects visitors using smaller devices, it will automatically condense the menus to something more mobile-friendly.
Finally, Hero Menu will tweak which menu a visitor sees, depending on their WordPress user role — a useful feature if you require visitors to log in.
Another freebie up next; the WP Responsive Menu plugin. The plugin specializes in building sliding mobile menus.
Because the plugin is targeted at mobile users, many of its main features are tailored specifically to functionalities found on mobile devices. Visitors can navigate the menus using swipe gestures, plus they can pinch their touch screens to zoom.
You can also configure a specific “mobile friendly” menu for visitors on smaller devices, and disable any unwanted elements. Visitors on desktop users will see the default menu, with the full list of options.
You can configure the menus to slide out from either the top, left, or right of the screen. You can also specify the width of the menus — either in pixels or as a percentage of the screen size.
There are plenty of customization options, too. You can upload a logo for the menu, as well as customizing all colors (background, text, and borders), and the menu text. You can even incorporate a simple search function into the bottom of the menu.
Best of all, setup is incredibly streamlined, meaning you could be up and running in just a few short minutes.
The last plugin featured in today’s list is another interesting one — WP Floating Menu Pro. As the name implies, the plugin builds “floating” menus, and they look great.
The plugin builds two types of menus:
No other plugin in this list offers one-page navigation, so let’s focus on that. The one-page navigation feature is targeted at, you guessed it, websites built on a single page. These websites are usually split into several sections — for example; you might find an “About Us” section or a contact form.
With one-page navigation menus, when a visitor clicks on one of the icons, they will automatically “jump” to that part of the page. This means the menu is used to navigate up and down the page, directly to the section the visitor wants — an “inline” menu. Sounds cool, right?
Beyond this rather intriguing functionality, WP Floating Menu Pro comes with loads of customization styles. For starters, there are 13 pre-built templates, featuring an array of button styles, color schemes, and animation effects. However, each template is fully customizable — plus you can build your own style from scratch — so you can tailor your menus to your site’s style.
With smaller buttons in these menus, icons are an important design element, and the plugin ships with three icons sets, too — Dash Icons, FontAwesome Icons, and General Icons. WP Floating Menu Pro also ships with mobile friendly menus, which you can activate at the touch of a button.
Which concludes our roundup of the best responsive menu plugins for WordPress. The plugins featured in this list support a variety of menu types — mega menus, vertical menus, mobile friendly menus, and one-page menus.
Which one is right for your website? Well, that depends. Choosing the right menu plugin is an important decision, as menus serve an important function — navigation — plus they’re a fundamental part of your site’s aesthetics. In other words, take your time and make sure you get this decision right.
Personally, I love the style of mega menus — they command attention, plus you can add lots of cool stuff to them. However, they are probably best suited to websites with lots of different pages — websites where a really comprehensive navigation menu is required.
On the other hand, the vertical-style menus are ideal for websites who want to maximize the use of space. The menu is hidden behind a toggle, meaning your content fills the whole screen — perfect for websites featuring a full-screen image or video.
With free plugins in each category, my recommendation is to try a few different menu styles to see which one you prefer. Then, when you know which style you like, evaluate some of the premium options to determine which plugin you’re going to use going forward. With lots of extra features and functionalities, the premium options really are a cut above the free ones.
Used/using any of the above? Thoughts?