Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Jazz Up Your WordPress Menu Using Plugins

Posted on June 9 by in Resources | 34 comments

How To Jazz Up Your WordPress Menu Using Plugins

A website’s main navigation menu is normally displayed in the website header, or at the top of the main sidebar. It is a vital component of your website design as visitors use this menu to navigate your website. The WordPress menu system also lets you add custom menus to widget areas such as your sidebar or footer. This is useful for adding additional menu areas to your website.

Most WordPress themes use a dropdown menu design for the main menu. They are simple, but functional. They can, however, be a little plain looking. Thankfully, the design of menus can easily be improved

I would like to show you a collection of WordPress plugins that will improve the design of your menus. Many of these plugins give better support for menus that are two or three levels deep. Some also add additional functionality such as the ability to add images and columns of content (these plugins are frequently referred to as Mega Menus).

* Note that all free WordPress plugins listed in this article have been tested and verified to be working with the latest version of WordPress.

JQuery Mega Menu Widget & JQuery Vertical Mega Menu Widget (FREE)

Designed by Design Chemical, these plugins let you add stylish horizontal and vertical widgets to any widget area on your website. Dropdown levels can be selected by click or on hover; and there are fade and slide animations available.

Eight color schemes are available with the plugin, however you can use your theme’s default styling if you prefer. The plugins have not been updated since late 2012 but still work well with the latest version of WordPress.

JQuery Mega Menu Widget

The JQuery Mega Menu Widget plugins can be used to add stylish horizontal and vertical menus to your website.

Dropdown Menu Widget (FREE)

Dropdown Menu Widget is a versatile plugin that comes with 16 color schemes. Custom CSS can be defined if you prefer to create your own style. All animation effects and colors can be adjusted through the plugin settings area.

In addition to being able to insert a menu into a widget area, the plugin also provides you with the PHP code necessary to add it to your theme directly.

Dropdown Menu Widget

The default color scheme of Dropdown Menu Widget is grey, but you can change it to any color you like.

Responsive Menu (FREE)

Developed by Peter Featherstone, Responsive Menu is a fantastic plugin that will display a three lined menu symbol on mobile devices. It will also display naturally if you reduce the width of your browser. Once a visitor clicks on the menu button, your navigation menu will slide from the left or right (your choice!).

Every aspect of the menu can be modified via the settings area. You can change colors, font type, font size, and animation settings. You can also choose the width of your page in which the menu will display. The default setting is 600 pixels; which means that when the browser has a smaller resolution, the menu will be displayed.

Responsive Menu

The menu will appear on mobile devices and in browsers where the width has has been reduced considerably.

Responsive Select Menu (FREE)

Another great responsive menu is available free from Seven Spark. Your normal navigation menu will be displayed when a visitor views your web page on a desktop, laptop, or landscape view on a tablet.

Responsive Select Menu

Your normal navigation menu will be displayed if the browser width is large.

If the browser width is smaller than the size you define in the settings area, your menu will be replaced with a drop down menu. The plugin has a dedicated configurations page for integrating the plugin with UberMenu. You can also restrict the drop down menu to only be displayed on certain pages.

Responsive Select Menu

The menu is replaced by a mobile friendly drop down menu when the width of the page is reduced.

ShiftNav (FREE)

Another great plugin by Seven Spark, ShiftNav adds a touch enabled navigation bar to the top of your website. You can assign any WordPress menu to it.

It comes with a light and a dark scheme. Alternatively, you can use your own custom CSS or disable the theme skin altogether. Every aspect of the menu bar can be modified through the settings area. This includes colors, font size, text alignment, and the size of buttons.

ShiftNav

ShiftNav looks great on desktops, tablets, and mobiles.

UberMenu ($19)

With over 30,000 purchases on CodeCanyon, UberMenu can rightfully claim to be the most popular premium menu plugin available for WordPress. I purchased the plugin shortly after its release in 2011 and used it to improve the look of my blog’s main navigation menu.

It works right out of the box with the WordPress menu system and looks great on mobiles and tablets too. Pretty much anything can be integrated into vertical or horizontal menus including images, maps, icons, latest posts, contact forms, search bars, descriptions, and more. Over 20 styles are included with the plugin, however you can also change the style of menus yourself.

UberMenu

UberMenu is one of the best menu plugins available for WordPress.

You should also check out Seven Spark’s other menu plugin Menu Management Enhancer if you need help managing large menus.

Mega Main Menu ($13)

Mega Main Menu is a stylish responsive navigation menu plugin that looks great on any device. A wide variety of content can be added to your menu including widgets, text, images, shortcodes, and more.

Unlimited colors can be chosen through the settings area. Over 600 Google fonts and 1,600 vector icons can also be selected.

Mega Main Menu

Mega Main Menu is a stylish menu plugin that is packed full of features.

WP Sticky Menu Plugin ($15)

WP Sticky Menu Plugin is a responsive menu plugin that is powered by Javascript and CSS. It comes with over 20 styles and many animation effects and settings options. Images and text can be added to menus and menu links can be displayed above or below the main navigation menu.

WP Sticky Menu Plugin

A responsive menu plugin that comes with many styles.

MashMenu ($12)

Inspired by the design of Mashable, MashMenu is a stylish responsive menu that looks great on any device. It does not replace your existing menu, therefore you will need to edit your theme template and replace the default menu code with MashMenu.

The plugin lets you upload your own logo and define your own color scheme. Images are also loaded using lazy load so that the menu does not slow down your website.

Unfortunately, the developers will soon be removing this plugin and replacing it with another, however they still offer support to those who do purchase MashMenu in the meantime.

MashMenu

MashMenu is a great way of displaying posts in your main navigation menu.

Kodda ($13)

Kodda is a feature packed mega menu that comes with four unique skins and support for multiple columns. Links, text, images, videos, search bars, social media profile links, and more, can be added to your menu.

The plugin works out of the box with your existing WordPress menus and its responsive design ensures it looks great on any device. Menus can be organised easily using a user friendly drag and drop interface.

Kodda Responsive Mega Menu

Kodda is a stylish solution that lets you add almost anything to your menu.

PBK Mega Menu ($8)

A mega menu plugin that comes with many different color schemes. It is one of the few menu plugins that uses the visual editor to style your menu.

You can add multiple columns to your drop down menus. Text, images, contact forms, videos, and more, can be added to your menus.

PBK Mega Menu

PBK Mega Menu is an affordable menu solution that has support for multimedia items.

Stripe ($10)

Stripe is a lightweight two level menu plugin that looks great on desktops and mobile devices. It displays icons for menu items, with the name of the menu item appearing once the user hovers it.

Over 350 icons are included with the plugin; therefore, you will have a lot of options on what icons to use for your menus. Colors can also be changed for icons, text labels, backgrounds, and dividers.

Stripe Menu Plugin

Stripe is a simple yet elegant menu plugin.

Mobile.Nav ($10)

Mobile.Nav is a beautiful responsive menu solution for mobile devices. The menu will not appear on your desktop design, unless you reduce the width of your browser to a specified number of pixels.

Menus can be created through the WordPress menu system. Every background, border, and text color, can be changed through the settings area. Custom icons can also be assigned to menu items.

Mobile.Nav

Mobile.Nav is a beautiful mobile navigation menu that offers touch and swipe support to mobile users.

Iconize ($15)

Iconize is an interesting plugin that lets you add icons to posts, pages, widget titles, menu items, and more. It is not technically a menu plugin; however it can be used to add beautiful icons to menus, therefore I thought many of you would be interested in it :)

The plugin comes packaged with a whopping 2,000 icons. Thankfully, you can search through this large list of icons by name. The size, color, and alignment of icons, can all be modified via the settings page. Icons can also be added into posts and pages via the visual editor.

Iconize

Iconize can be used to add icons to your menus.

Touchy ($10)

Touchy is a beautiful mobile menu plugin that features an unlimited number of color schemes. A two level drop down accordion menu is displayed at the right hand side of the menu. Back, call, and email buttons, can also be displayed.

Touchy Mobile Menu

A beautiful menu solution for mobile devices.

DH Menu ($12)

DH Menu is a responsive mega menu plugin that works separately from the WordPress menu system. Menus can be oriented horizontally or vertically and organised via a drop and drop interface.

It supports up to 12 columns in drop down menus and there are over 300 icons available. Every part of the menu style can be customised through a style editor in the settings area.

DH Menu

DH Menu is a stylish mega menu that can display menus vertically and horizontally.

Wah-Menu ($24)

Wah-Menu is a responsive side menu that was designed specifically for iPads and other tablet devices. HTML, images, and videos, can all be added to your menu.

It comes in a light and dark color scheme. Over 750 font icons are available; including icons for Facebook, Google+, and Twitter.

Wah-Menu

Wah-Menu is a great way of enhancing the browsing experience of tablet users.

Flexi Menu WordPress Plugin ($11)

Flexi Menu is a mega menu plugin that works with the WordPress menu system. It supports multiple columns, images, icons, and more. The color and style of your menus can be adjusted via the settings area. You can also define the width of drop down items.

Flexi Menu WordPress Plugin

Flexi Menu is a simple mega menu plugin that lets you customize colors.

Navigation Menu Widget ($5)

Navigation Menu Widget is an affordable menu plugin that can be used for horizontal and vertical menus. The plugin lets you assign thumbnail images and icons to menu items. It also has support for shortcodes.

Navigation Menu Widget

Navigation Menu Widget is a cool menu plugin that has support for thumbnail images.

I hope you enjoyed this look at stylish menu plugins for WordPress. If so, I encourage you to subscribe to the Elegant Themes blog for updates of our latest articles.

If I have missed any good menu plugins from my list, please feel free to share them in the comment area below.

Article thumbnail image by JanPetrskovsky / shutterstock.com

34 Comments

  1. I love these “how tos” and stuff because I learn a lot of really cool stuff. Thanks for putting the time in to collect this stuff for us :)

    • Same here

    • Hi Kevin,
      Really love what you are doing to help web site owners and developer. As a web site owner (read: not a developer), I am left with more questions than answers. Most specifically, are these easy to use? I could investigate each of these but it might take weeks (read: not a techie) of trial and error. I would love to make a multi-columned menu as I have drop downs that don’t go below the fold. Personally, I have an extensive travel site but navigation is tricky as a continent might have 20+ countries within it. Do most of these plugins plug and play or do they require additional specific coding to replace current meni settings as using a plug-in might make three menus systems (ie wordpress, ET theme and then menu plugin? Sorry for the long questions — or do you have a recommendation?

  2. Great post… I think, that Mega Main Menu is a nice plugin.
    But may I use this menu plugin with DIVI 2.0?

  3. Mega Menu is an awesome plugin. I’ve used it on few client sites that had a massive amount of content and it made everything easy to find.

  4. i’m searching a solution for adding a widget (like a newsletter subscribing widget) to the menu of Divi 2.0. is there this option in any of these plugins and which one please ? thanks for the one who know :) !

  5. Is there a way (using Divi2) to use menus to navigate withing the same page, but in a different position on the page (ie, “intro” point to the top of the page, “main” points to the middle of the page, and so on …)

    Thx

    • You want a single page website like mine? Yes Divi can do it and I’m pretty sure that in the Divi doc section exists a tutorial for that.

      Basically you need to setup your module ID like “main” and so create a menu link href=”#main”

      • Thanks Darlan, are you sure Divi can do a one-pager? If so, I don’t need to buy one-up theme again. Besides your site is cool and how did you spin Divi to be one-pager? Being longing to have a one page site!

        • Hi BB,

          Yes, Divi can surely be used as one-page website. Michael Langham’s explanation below covers the topic fully.

      • Yes Jerome, Darlan Ten Caten is absolutely right.

        At the bottom of most sections, and modules, the last two fields are CSS ID, and CSS Class.

        Using the ID field, enter your ID-name you wish to use. And of course, keep it semantical and not over-abbreviated at the least for future searching.

        Then, simply target that with a normal link, in that the link will take one to the item you’ve tagged with that ID. (remember, if doing so via wysiwyg panel, don’t include the http:// in the link field :) )

        I generally insert a 5px or so “Divider” module ‘above’ the item I want to scroll to, so as to have it on the screen in view.

        Hope this helps.

        • Works like a charm, thanks a lot !

  6. This notice in on the MashMenu page:

    MashMenu is discontinued and will soon be removed for better plugins. Old customers will still be supported in our ticket system

  7. One more post that’s totally on target. You really understand exactly what the important topics are, and they are so timely it’s almost spooky. Keep it up!

  8. OMG one of the best pieces ever put together here. Bookmarked it for reference. Thanks guy :)

  9. Is there one of these you’d specifically recommend for customers using Divi 2.0?

    • I second this! Thanks in advance.

    • Divi itself got a nice responsive menu, why we should install a third party plugin and further slow down the wp load time?

  10. Sounds to me like a lot of users looking for Divi 2.0 menu options …

  11. Thanks Kelvin, being waiting for this menu post quite a while. Your post pointed me to menu solution but how many does Divi 2.0 support?

    While the Divi 2.0 fullwidth menu is intuitive, can we have an option whether to use both menu or one menu in a page? Instance, if I need a one-pager and I want to use the fullwidth menu as a base nav menu in-lieu of top nav menu, how can I achieve this without edting the template or css files. I know Divi has a built-in mechanism to solve this with array of templates, maybe that’s what I need to know. Cheers :)

  12. I was looking for something like this, I might purchase ubermenu or mashmenu.

  13. Thanks Kevin. I don’t know who’s idea was that – Nick’s or yours, but pretty much everything you wrote turned ET blog into the resource that use often and find extremely helpful. Thanks for another post.

    Elijah.

  14. Awesome Plugin for WordPress Menu, i love that so much! But if you can know about css menu, i think you may not using plugin, i still have design a good menu for you! :D

  15. Thank you so much for this article

  16. Good collection of menu plugins . I have not seen such collection anywhere on web

  17. Very good article Kevin. Aware most of all this plugins and also few new for me like Tochy, Wah-menu and DH menu. Thanks for share

  18. Thanks Kevin, I appreciate these blogs with a lot of information.
    Question: could you please write someting about plug-ins to built a mailform? I know of course CF7, but the design isn’t very nice. Thanks.

  19. Great list! I have encountered all these menus and many more while searching for my ideal one. I wanted most of all the option to have tabs inside each navigation header, and I managed to find only ONE plugin that can do that! Unfortunately it’s not supported by wordpress, and I spend around 4 days to make it work properly (I have intermediate knowledge of wordpress). I love the end result though and I really think you should include it on the list, you can find it here http://codecanyon.net/item/universal-responsive-mega-menu/4984236 and can also see how it looks on my website. ( http://nychta.com )

    I hope this helps some people, as I have struggled a huge deal with my personal mega menu pursuit :)

  20. great exampels…

    I would like to know if you using the plugin for dropdown main menu in the sample of DIVI theme… I refer to columns (Features: 4 columns with different concepts)

    thanks

  21. Thanks for this collection!

    I like the suggestions other people have made to incorporate these types of menus into Divi, or you could look at building a plugin as part of the Elegant Themes plugin offerings, that can be used across several websites.

  22. Kodda menu is really nice, but it breaks divi modules like the tabs, accordion, etc..

    Thanks for this list, it was very nice of you to write such an extensive peace. :)

  23. Great list.

    I’m new to all this and have set up a wordpress site and want to have a custom menu with images as buttons. Do any of the above support this feature as all the screenshots are just coloured bars and text.

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

Join 243,989 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today