Seven Best Responsive Menu Plugins for WordPress
- 6 Comments
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 onsite 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’re 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 — from an aesthetic or a navigational perspective.
Fortunately, there are tons of great menu plugins for WordPress users. In this article, we’ll be sifting through them to bring you our seven favorites. And, because every plugin on 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…
1. UberMenu ($19)
Let’s start with perhaps the most powerful menu plugin of all — UberMenu. Notching up more than 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’, they can be 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, as well as 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 these menus would be 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, because of UberMenu’s unstoppable popularity, the developers have released four official extensions.
- UberMenu Icons Extension — introduce 600-plus FontAwesome icons to your menus.
- UberMenu Flat Skins Pack — 30 new skins for your menus.
- UberMenu Conditionals Extension — conditional logic for your mega menus.
- UberMenu Sticky Extension — anchors the menus to the top of the screen.
Extensions are available for $8 each or as a $19 bundle.
2. Max Mega Menu (FREE)
‘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 easy, courtesy of the drag-and-drop builder. You can also preview them in real time, and so 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 (such as maps), and, because Max Mega Menu lets you add widgets to your menus, you can even integrate functionality from other plugins. This means you can incorporate functionality such as 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.
3. Superfly ($22)
If you’d prefer vertical menus to the traditional horizontal alignment, check out the Superfly plugin. It doubles up as a fantastic space saver, too, letting you use 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 more than ten social networks supported. With any luck, this will result in more social shares for your content.
4. Responsive Menu (FREE)
If you like Superfly’s vertical menus but don’t have the budget, the Responsive Menu plugin may interest you. This plugin 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 number of customizations — more than 150, in fact. These cover all of the usual customizations — font, size, alignment, and color — and 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, and, when this button is clicked, the menu slides into view with a beautiful animation effect. Because the menus take up a lot more of the screen compared with 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, and introduces a live preview functionality, FontIcons, and animated menu items.
5. Hero Menu ($19)
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-plus free icons, and you can customize your menus with a choice of 650 Google fonts and infinite colors. To help those of you who lack a natural flair for design, you’ll also find 60 stunning color presets, 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 and blog content, plus shortcodes and widgets from other plugins. However, Hero Menu is also compatible with WooCommerce, which means you can add products, prices and thumbnail images to your menus. You can also easily activate a search function and social media sharing buttons.
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.
6. WP Responsive Menu (FREE)
Another freebie up next: The WP Responsive Menu plugin, which 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 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.
7. WP Floating Menu Pro ($17)
The last plugin featured on 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:
- one-page navigation
- sticky menus — this type of menu links to multiple URLs, like a typical WordPress menu.
No other plugin on 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 may 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 prebuilt 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 sets: 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 on 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 — and are a fundamental part of your site’s aesthetic. 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’re 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 that need 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?
All comments are held for moderation. We'll only publish comments that are on topic and adhere to our Commenting Policy.