Navigation is one of the most important elements in web design. It has to be neat, usable and creative at the same time in order to not scare your visitors away That’s why we are presenting these super powerful jQuery navigation and menu plugins for you to use. jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome.

JQuery Navigation and Menu Plugins

With importance of your navigation in mind, let’s start our journey trough our selection and hopefully you will find the one that will suite your needs in your next project.

1. mb.verticalSlider

Mb-vertical-slider-jquery-navigation-menu-plugins

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of your page or load them via Ajax when needed, it also works with a mouse wheel.

Demo

1. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview.

View Demo

2. Fly Slideshow

Fly-slideshow-jquery-navigation-menu-plugins

Fly SlideShow is a jQuery Slideshow script to present images as an automatic slideshow with a nice “fly” effect. Images fly from left to right with and have a fade effect.

It also features:

  • Direct navigation (you can jump to any slide by clicking dots at top-right corner)
  • Previous/next controls
  • Image decriptions (it gets them from alt tag)
  • Only 5kb size

Demo

3. Blast Slider – jQuery Photo Slider

Blast-photo-slider-jquery-navigation-menu-plugins

Blast Slider is a jQuery plugin to create sliders, carousels, rotators with crazy animation effects – slide explodes into particles and then collapses to a new slide!

Demo

4. Photo Rotator jQuery Plugin

Photo-rotator-jquery-navigation-menu-plugins

Photo Rotator JQuery plugin is an easy to use JQuery plugin for a web developer to build a JavaScript gallery on their web application. The plugin can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography.

Highlighted features:

  • Driven by xml or arrays
  • 3D Transition Effects (support in Safari)
  • Easy to setup
  • Slide show controls
  • Easy customization
  • Compatible with IOS mobile safari

Demo

5. Slide Down Menu

Slide-down-jquery-navigation-menu-plugins

This is actually a tutorial though you can download the source files. The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Demo

6. jQuery Pageswitch Plugin

Pageswitch-jquery-navigation-menu-plugins

This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.

7. Apple style Navigation with CSS3 JQuery

Apple-jquery-navigation-menu-plugins

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the Apple website and this plugin recreates Apple’s navigation using CSS3 and jQuery.

Demo

8. Smart Cart 2 – jQuery Sopping Crt Pug-in

Smart-cart-jquery-navigation-menu-plugins

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easier and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to save space.

Demo

9. Flyout Ribbon using jQuery and CSS3

Fly-out-ribbon-css3-jquery-navigation-menu-plugins

Flyout Ribbon is a simple jQuery plugin for creating a highly customizable flyout ribbon. This plugin is perfect for providing users with a plethora of options in an unobtrusive manner. With one mouse click you can show or hide all developer defined options.This plugin is very light weight and easy to implement.

Demo-Click on the arrow on the right hand side of your screen to see the demo in action.

10. Easyrpc

Easyrpc-jquery-navigation-menu-plugins

This is a synchronous and an asynchronous library to communicate with a server application with almost zero configuration.

11. TN34 Facets

Facets-jquery-navigation-menu-plugins

This plugin uses the CSS clip styling method and the jQuery.clip plugin to show sectioned containers positioned in the same area and to expand a hovered container to its maximum width. Just like an accordion but much more powerful.

Demo

12. iX Framework

Ix-framework-jquery-navigation-menu-plugins

iX Framework is a javascript GUI / Javascript Widget consisting of comprehensive components, such as : Grid, Chart, Tree, Window, Panel, Field, Validation, Combo and more.iX Framework is a comprehensive, powerful and affordable professional web framework that removes the boundary between web and desktop application.

Demo

13. Subway Map Visualization jQuery Plugin

Subway-map-visualization-jquery-navigation-menu-plugins

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

Demo

14. Sticky Section Headers

Sticky-section-headers-jquery-navigation-menu-plugins

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

Demo

15. Panoscoper

Panoscoper-jquery-navigation-menu-plugins

The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.

16. jCrumb

Jcrumb-jquery-navigation-menu-plugins

JCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on, initialize, and you’re done. Can be also be styled with JQuery UI.

17. jxSlider

Jxslider-jquery-navigation-menu-plugins

jxSlider widget turns the selected DIV into a small embedded ajax tabbed-navigator. The ajax-loaded content will automatically and recursively be shown into the initial DIV.

18. Image Hover Move

Image-hover-move-jquery-navigation-menu-plugins

A simple and practical navigation or featured image jQuery plugin.

19. Dynamic Navigation Menu

Dynamic-jquery-navigation-menu-plugins

Dynamic menu with scrolling color glide, appropriate for a blog or website which requires a clean modern style and personalization.

20. jQuery One Page Navigation Plugin

One-page-jquery-navigation-menu-plugins

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

Demo

21. Multi-Level Accordion Menu

Multi-level-accordion-jquery-navigation-menu-plugins

Supports infinite level of unordered lists, easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

22. onCube

Oncube-jquery-navigation-menu-plugins

This plugin generate a die like a Rubik’s Cube. You can use it for navigation, categories or whatever you want. The plugin works in IE6 and IE7 as well as in Firefox and IE8. It also looks very good on iPhone, iPad & Co.

Demo

23. Memu – A simple CSS / JavaScript / JQuery Menu

Memu-jquery-navigation-menu-plugins

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

Demo

24. Dropp

Dropp-jquery-navigation-menu-plugins

Dropp is a jQuery plugin which replaces regular dropdown menus ( <select> elements ) with alternatives you can style.

25. Facebook Menu System

Facebook-jquery-navigation-menu-plugins

This menu is based on the same idea used on Facebook. The menu system work only with the UL html tag, no other tags are used, you have only to create a simple menu.

26. jOrbital

Jorbital-jquery-navigation-menu-plugins

jOrbital is a solution for building circular menus. It’s purpose is to group elements with similar functionality ( like social buttons ) into one hoverable button. But it’s not limited to simple menu only. You can create circular gallery, multi-level navigation or RPG -like menu. This is a premium plugin though.

27. Multi Row Checkbox Menu

Multirow-checkbox-jquery-navigation-menu-plugins

Plugin to put those cool little Google Gmail type ‘Select All/Select None’ action menus at the top of a list of check boxes.

Demo

28. Content Slider

Content-slider-jquery-navigation-menu-plugins

Slider implemented based on the jquery-ui framework, not just for images, but for text and other content as well, In this way, we can use the CSS classes of jquery-ui to apply different look and feels and use its effects for the slide presentation.

Demo

29. jQuery Configurable Context Menu

Configurable-context-jquery-navigation-menu-plugins

This is a configurable context menu, it works in three ways: right click, hold down, hover.Callback is executed with parameter e, the menu action event object normalized by jQuery, and el, the element associated with the menu. Menu is an ul with position absolute, menu element are li with .hover class added on mouse over.

30. NavDock

Navdock-jquery-navigation-menu-plugins

NavDock is a simple dock style menu icon.

31. jQuery Content Panel Switcher

Content-panel-switcher-jquery-navigation-menu-plugins

The jQuery Content Panel Switcher is a simple, very lightweight jQuery plugin that allows smooth transitioning of content in and out of panels located anywhere on the page. You can have single or multiple content switching panels on a single page Content panels can be either span or div elements, and the buttons used to switch the content can be just about anything, so long as they have the right clases assigned.

Demo

32. jQuery Image Rotator with Fade

Image-rotator-fade-jquery-navigation-menu-plugins

jQuery Image Rotator is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, with great looking fading effects, if desired.

Demo

33. jQCloud

Jqcloud-jquery-navigation-menu-plugins

jQCloud allows you to build neat cloud-shaped word clouds and tag clouds. Since this plugin produces pure HTML code, the word cloud layout can be easily personalized with custom CSS styles.

Demo

Editorial Team

Written by Editorial Team

9 Comments

  1. awesome, I’ll try in my website next time

    Reply

  2. Best collection. thanks for all. Best regards.

    Reply

  3. Excellent! Thanks!

    Reply

  4. wonderful big collection of Jquery tools.
    thank you.

    Reply

  5. this is really nice stuff… thanks

    Reply

  6. Nice collection of some useful menus.

    Good to see a multi level accordion, comes in handy for me :)

    Reply

  7. wonderful collections!!!

    Reply

  8. Such a big collection of Jquery tools. Some are repeated one but, good to bookmark such a huge resource.

    Reply

  9. Would we ever get tired of jquery’s

    Reply

Leave a Reply