45 jQuery Navigation Plugins and Tutorials

January 25th, 2010

By Paul Andrew

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands. The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article we’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable. For most of these items, we’ve listed a “demo” link, except when the demo is on the same page as the tutorial or article itself.

Horizontal Menu Navigation Plugins and Tutorials

Mega Drop Down Menu w/ CSS & jQuery | Demo
According to usability expert Jakob Nielsen, mega drop down menus tested to be more efficient for large-scale websites. In this tutorial, the author demonstrates his technique for creating a menu system that would be ideal for large or e-commerce web sites.

jQuery Menu Tutorials and Plugins

A Perfect Multi-Level Navigation Bar | Demo
In this tutorial, the author illustrates his method for implementing a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub-sections.

jQuery Menu Tutorials and Plugins

Use Sprites to Create a Navigation Menu | Demo
CSS sprites can dramatically increase a website’s performance, and with jQuery, we can easily implement awesome transition effects.

jQuery Menu Tutorials and Plugins

Tab Navigation with Smooth Horizontal Sliding
In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back.

jQuery Menu Tutorials and Plugins

droppy – Nested drop down menus
This is not the most flexible of plugins, but if you’re looking for a basic menu, it’s perfect.

jQuery Menu Tutorials and Plugins

jQuery Listmenu | Demo
This jQuery plugin allows you to easily convert a long, hard-to-navigate list into a compact, easy-to-skim first-letter-based menu system, allowing quick and out-of the-way access to hundreds of items.

jQuery Menu Tutorials and Plugins

Kwicks for jQuery | Demo
Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

jQuery Menu Tutorials and Plugins

Creating a Navigation Menu with CSS & jQuery
In this tutorial you’ll learn how to build a CSS navigation menu with a smooth scroll effect using jQuery and the scrollTo plugin.

jQuery Menu Tutorials and Plugins

Apple Style Menu | Demo
In this in-depth tutorial you’ll create an Apple-flavored Leopard-text-indented menu from scratch. First you’ll build the menu in Photoshop, then you’ll create the needed HTML and CSS, and finally improve it with jQuery.

jQuery Menu Tutorials and Plugins

Sexy Drop Down Menu w/ jQuery & CSS | Demo
Most drop-down menus may look aesthetically pleasing, but developing them to degrade gracefully is also essential. In this tutorial, the author shows you how to create a sexy drop-down menu that degrades gracefully.

jQuery Menu Tutorials and Plugins

Mega Drop-Down Menu with jQuery | Demo
The recommended hover time for a mega drop-down menu is 0.5 seconds, with a further 0.5 seconds delay when the user moves the mouse away. With these guidelines, the author demonstrates how to build a mega drop-down menu with usable time delays.

jQuery Menu Tutorials and Plugins

JQuery Pager | Demo
jQuery Pager is a simple JQuery plugin to provide paging functionality for data-driven web applications.

jQuery Menu Tutorials and Plugins

Simple jQuery Dropdowns | Demo
jQuery menus don’t have to be complicated; sometimes you may want to try something slightly different by making them as simple as possible. This menu plugin has stripped down code with minimal styling, yet still has all the functionality typically needed.

jQuery Menu Tutorials and Plugins

Smooth Animated Menu with jQuery | Demo
In this tutorial you’ll learn how to build a jQuery menu and animate it with some lovely and smooth effects, using the jQuery Easing plugin.

jQuery Menu Tutorials and Plugins

Stylish Navigation Menu With jQuery | Demo
In this menu tutorial there are three main classes that define the looks: normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu – the active (selected) state.

jQuery Menu Tutorials and Plugins

Easy to Style jQuery Drop Down Menu | Demo
This tutorial will show you how to create a simple and easily-styled menu with hover mouse event and the most basic jQuery animation using slideUp and slideDown.

jQuery Menu Tutorials and Plugins

A Different Top Navigation | Demo
If you’re trying to make your website stand out, you might consider thinking outside the “norm” when it comes to navigation. In this tutorial, you’ll be doing precisely that, by creating a different multi-layered horizontal navigation system that’s still intuitive enough for anyone to use for the first time.

jQuery Menu Tutorials and Plugins

Vimeo-Like Top Navigation | Demo
If you’ve ever visited the Vimeo home page you may have noticed the menu that drops down when you hover over the search box, offering you different search options to narrow your search. You’ll learn how to recreate this effect in this tutorial.

jQuery Menu Tutorials and Plugins

jQuery'd Bread Crumb – jBreadCrumb
This collapsible breadcrumb jQuery plugin has been developed to deal with deeply-nested, verbosely-named pages. Rather than limit the amount of elements shown on the sever side, the developers opted to go with a client side solution for usability and SEO. It also turned out to be nice to look at and fun to play with.

jQuery Menu Tutorials and Plugins

The marvelously-versatile idTabs plugin makes adding tabs to a website very simple and opens the door to endless navigation possibilities. The homepage of this plugin shows you not only how easy idTabs is to use and style, but also demonstrates many of the navigation options you’ll have at your disposal.

jQuery Menu Tutorials and Plugins

Keypress Navigation | Demo
With jQuery, your website’s navigation doesn’t have to be limited to mouse-based activation. In this highly-original experimental tutorial you’re shown how to let the user navigate your site using their keyboard.

jQuery Menu Tutorials and Plugins

Sliding jQuery Menu | Demo
In this tutorial you’ll learn how to create a sliding menu button, similar to the effect you can see in action over on the PSDtuts+ homepage. When the button is clicked it rolls out a box full of links, when the button is clicked again the box rolls back in.

jQuery Menu Tutorials and Plugins

Dropdown, iPod Drilldown, and Flyout Styles
This iPod-style menu plugin provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, by default a “Back” link appears below the menu to allow navigation to previous (parent) menus.

jQuery Menu Tutorials and Plugins

Flickr Menu Design | Demo
This is a simple step-by-step tutorial that shows you how to implement a Flickr-style menu with cool sliding effects using jQuery and CSS.

jQuery Menu Tutorials and Plugins

Fixed Fade Out Menu | Demo
The aim of this tutorial is to build a fixed navigation that follows the user when they scroll up or down, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. The navigation includes some links, a search box, and top and bottom buttons that let the user navigate to the top or bottom of the page.

jQuery Menu Tutorials and Plugins | Demo is a powerful jQuery component that helps you build an intuitive multi-level tree menu or contextual (right click) menu. You can add as many submenus as you want; if your sub-menu or menu is not declared in the page, the component will get it via Ajax, calling the template page with the id of the menu you need (the value of the “menu” attribute).

jQuery Menu Tutorials and Plugins

The mcDropdown plugin is a UI control that lets users select from a complex hierarchical tree of options that allows for both mouse and keyboard entry. The overall effect of this plugin is somewhat similar to the Microsoft Windows “Start > All Programs” menu.

jQuery Menu Tutorials and Plugins

Vertical or Sidebar Plugins and Tutorials

Simple JQuery Accordion Menu | Demo
This is a very simple accordion menu plugin built with jQuery. The links with sub-items under them will expand the sub-menu when clicked and items that don’t have sub-items are normal links. The menu will initialize with the first expanded sub-menu.

jQuery Menu Tutorials and Plugins

Tabbed Structure Menu | Demo
This tutorial will show you how to build your own space-saving, tabbed interface using jQuery with slideDown/slideUp effect.

jQuery Menu Tutorials and Plugins

Fresh Content Accordion | Demo
In this tutorial you’ll earn how to build a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plugin for fancy effect.

jQuery Menu Tutorials and Plugins

Horizontal Scroll Menu | Demo
This tutorial teaches you how to create a horizontal scrolling menu that scrolls automatically according to your mouse axis-Y movement and uses the jQuery.color plugin to animate the background-color changes.

jQuery Menu Tutorials and Plugins

Create a Slick Tabbed Content Area using CSS & jQuery | Demo
In this tut you’ll learn how to build a simple little tabbed information box in HTML, then make it function using pure JavaScript, and finally you’ll learn a way to achieve the same effect using jQuery.

jQuery Menu Tutorials and Plugins

Slide Out and Drawer Effect | Demo
The Apple web site is a great demonstration of this effect in action where the mouse settles on the title of the ‘section’ and the associated links are exposed. What makes this effect particularly cool is that the drawers maintain a fixed height and slide between a restricted area.

jQuery Menu Tutorials and Plugins

“Outside the Box” Navigation with jQuery | Demo
This tutorial offers three different ‘out-of-the-box’ OS X dock-style navigation options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.

jQuery Menu Tutorials and Plugins

Sproing! – Thumbnail Menu | Demo
Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.

jQuery Menu Tutorials and Plugins

Cool Animated Navigation | Demo
In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.

jQuery Menu Tutorials and Plugins

jQuery File Tree | Demo
jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

jQuery Menu Tutorials and Plugins

Creating a Floating HTML Menu Using jQuery and CSS | Demo
For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.

jQuery Menu Tutorials and Plugins

BDC DrillDown Menu, an iPod-style menu | Demo
A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.

jQuery Menu Tutorials and Plugins

jQuery Context Menu Plugin | Demo
The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.

jQuery Menu Tutorials and Plugins

A ‘Mootools Homepage’ Inspired Navigation | Demo
This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.

jQuery Menu Tutorials and Plugins

jQuery UI Selectmenu
The jQuery UI Selectmenu plugin has been designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind and allows all native mouse and keyboard controls.

jQuery Menu Tutorials and Plugins

Beautiful Slide Out Navigation | Demo
In this tutorial you are shown how to create an amazing slide-out menu or navigation. The navigation will be almost hidden — the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website.

jQuery Menu Tutorials and Plugins

Optional Horizontal or Vertical Navigation

Smooth Navigational Menu
This menu’s contents can either be reached from either direct markup on the page, or an external file and fetched via Ajax. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

jQuery Menu Tutorials and Plugins

Superfish – Suckerfish on 'roids | Demo
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following enhancements: Timed delay on mouseout, animation of sub-menu reveal, keyboard accessibility, drop shadows for capable browsers and much, much more.

jQuery Menu Tutorials and Plugins


Tags: , ,

69 comments for „45 jQuery Navigation Plugins and Tutorials
  1. vedic on January 25th, 2010 at 6:31 am

    very useful collection.
    i wanted the mega menus and its here.
    great …

  2. julio on January 25th, 2010 at 6:31 am

    Well done! Not much of a coder be will be using some of this JQuery in up coming projects.

  3. New York Web Design on January 25th, 2010 at 7:35 am

    Thanks…Wonderful stuff here. Just what I need.

    I really benefited from the list.

  4. jayQuery on January 25th, 2010 at 7:47 am

    Huge list. You’re making it hard to pick :P

  5. Webstandard-Team on January 25th, 2010 at 7:47 am

    Nice Collection. If you need some more interesting jQuery-Navigations don’t miss jQuery – The easy way to navigate!

  6. Web Canedo on January 25th, 2010 at 8:26 am

    thanks! I’ll use one in my next project!

  7. Merlin Mason on January 25th, 2010 at 8:30 am

    wow, this is a great list!
    Bookmarking it for future reference, thanks.

  8. Frank on January 25th, 2010 at 8:47 am

    I really love this wide ranging collection! Good job. Btw. over and over it’s a pleasure to read your articles. Rock on! Best, Frank.

  9. ireng_ajah on January 25th, 2010 at 8:50 am

    Nice post and nice navogation design. Its very udefull for me.


  10. torsten on January 25th, 2010 at 8:52 am

    Wow, thank you. Great choice. Found a lot of new exciting possibilities.

  11. Luis Fernando on January 25th, 2010 at 9:08 am

    Thanks for compile and share very, usefull


  12. Alex Flueras on January 25th, 2010 at 9:18 am

    Nice list, thanks for sharing!

  13. Clayton Correia on January 25th, 2010 at 9:31 am

    This is an awesome list…thanks much. I’ll be looking at a number of these.

  14. DavidMoreen on January 25th, 2010 at 12:01 pm

    Great round up, I now also have a brand new tutorial website that I bookmarked!

  15. Geoffry on January 25th, 2010 at 1:52 pm

    Just beginning to update my site, thanks for the re-cap!

  16. free vector arts on January 25th, 2010 at 1:54 pm

    thanks for the information, nice list.

  17. Mary Lou on January 25th, 2010 at 2:39 pm

    Thanks for including our navigation tutorials! There is as well a revised version of the slide out navigation for better usability since there has been a lot of feedback for the first one:
    Greetings from the Codrops Team!

  18. Eko Setiawan on January 25th, 2010 at 7:19 pm

    Wow..great list tutorial, we plan to improve our template more useful and beautiful with jquery.

  19. Matthias Matz on January 26th, 2010 at 12:12 am

    its usfull for webdesign, thanks

  20. sharin_sg on January 26th, 2010 at 12:33 am

    well done. this is one great coverage. thanks for sharing.

  21. Tutorijali HDonWEB on January 26th, 2010 at 1:33 am

    Nice collection of plugins, bookmarked

  22. insic on January 26th, 2010 at 3:41 am

    Superb List! This is a nice article for reference

  23. Simon on January 26th, 2010 at 3:54 am

    Great list, shouldn’t be forgotten when talking about building website menus.


  24. Jordan Walker on January 26th, 2010 at 5:55 am

    This will definitely help with my next project. Thanks.

  25. Vitor Britto on January 27th, 2010 at 9:07 am

    Nice collection! Thanks for sharing!

    Best, Vitor.

  26. judy on January 28th, 2010 at 8:58 am

    brilliant! just what i needed.. thanks!

  27. Arjen on January 29th, 2010 at 10:33 am

    Super list! I really those with a little effect, like a transition.

    Thanks for sharing.

  28. Retheesh on January 30th, 2010 at 4:31 am

    Very helpful post, really am looking for this.. Thanks for the post…

  29. Chris Kirkman on January 31st, 2010 at 10:13 am

    Great post. I will be checking some of these out on an upcoming project.

  30. Adam Hermsdorfer on January 31st, 2010 at 4:46 pm

    You definitely did your research with this list. The navigation, in some cases, can really make or break a website. I love combining jQuery with some sprites.

  31. Graphic Designer on February 1st, 2010 at 3:12 am

    Thank you very much… wonderful stuff.

  32. Java developer on February 6th, 2010 at 2:43 pm

    Looks very nice! Thanks

  33. Designs Wallet on February 22nd, 2010 at 2:26 am

    nice collection and may be useful

  34. Davoud on March 7th, 2010 at 5:16 am

    very helpful!

  35. Mouad Laghfiri on April 6th, 2010 at 12:03 pm

    i Take The Texte In AraBiC ..
    but he is replaces

  36. Mahmood on April 11th, 2010 at 9:04 pm

    thanks, man
    this was the menues i was looking for more than a dacade !!!

  37. george on April 30th, 2010 at 7:10 am

    Another web menu builder that should be added to this list is AllWebMenus (

  38. Chris Allen on May 5th, 2010 at 11:46 am

    Great article.
    I’ve searching for a good tutorial on how to use J Query.

  39. Ravi Juneja on July 13th, 2010 at 9:40 am

    nice list, thx

  40. Aman on August 20th, 2010 at 8:56 am

    Cool list of Navigation. I have also 40 Superb Jquery Navigation Menus please see here:-

    Amandeep mann

  41. ayaz feroza on September 16th, 2010 at 11:55 am

    thanks its very useful to me….

  42. axfa on September 24th, 2010 at 3:36 pm

    very nice colection
    thanks for share

  43. Vishnu Valentino on November 11th, 2010 at 3:54 pm

    That’s great m8 :-) really helpful. How about fisheye?

  44. weather stations on December 12th, 2010 at 1:35 pm

    The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post.thanks

  45. benn on January 19th, 2011 at 2:07 pm

    yes number 3 is a brilliant navagation! easy to isntall 2

  46. Conception web sherbrooke on January 26th, 2011 at 3:31 pm

    Thanks, I was looking for a mega menu!

  47. Wiyono on March 6th, 2011 at 2:59 pm

    Thank you so mcuh..
    This really usefull… and great…

  48. Bertram Simon on March 16th, 2011 at 2:07 pm

    Ein ausgesprochen gute Auflistung von jQuery-Menü-Lösungen.

    Danke / Thank you

  49. Lee Possehl on March 24th, 2011 at 6:22 pm

    Cool website.

  50. Julia Stone on March 26th, 2011 at 12:51 pm

    Thank you for sharing this article, ?t is really Helpful, Thanx/3/26/2011 1:51:12 PM

  51. Jimmy Nguyen on March 30th, 2011 at 12:06 pm

    Helpful post with many jQuery Navigation Plugin demos.
    It seems that “Apple Style Menu” is most appropriate with my small site. Love Apple. Thank admin alot.


  52. HALI YIKAMA on April 9th, 2011 at 9:22 am

    Thanks so much for another post. I be able to get that kind of information information. friend, and exactly.

  53. tarrahi - ????? ???? on May 2nd, 2011 at 9:58 pm

    Thanks for Tutorials :
    you website was helpful for me

  54. Revitol cellulite on May 16th, 2011 at 9:35 am

    This unique blog is really entertaining and diverting. I have picked up helluva interesting stuff out of this source. I’d love to come back every once in a while. Cheers!

  55. Donna on September 3rd, 2011 at 9:28 am

    Thanks for compiling this great list. I think I found just what I was looking for. Glad I found this site, what an awesome resource!

  56. Hemen on September 27th, 2011 at 11:42 am

    it was superb work……

  57. sproweb on October 2nd, 2011 at 2:21 pm

    awesome collection, very useful, thanks for sharing

  58. sproweb on October 25th, 2011 at 12:10 pm

    great list, thanks for sharing!

  59. nassim rehali on November 23rd, 2011 at 3:57 pm

    thanks for this amazing plugins

  60. Vijesti on January 4th, 2012 at 5:38 pm

    Very nice collection, thanks :)

  61. christopher on January 6th, 2012 at 7:14 am

    Thanks a lot… its very useful for me…. :)

  62. David on January 18th, 2012 at 12:56 pm

    This is a mammouth list very useful indeed, a fantastic post! Thanks :D

  63. chovy on February 10th, 2012 at 10:57 pm

    jQuery.tabbed() navigation is a light-weight jQuery plugin for handling tabbed navigation with minimal markup.

  64. SAMIR MAHMUD on March 16th, 2012 at 3:11 pm


  65. bilgisayar servisi on May 9th, 2012 at 12:48 pm

    Great blog you have here, hope you won’t mind if I retweet your blog posts to my twitter’s account.

  66. venkat on June 26th, 2012 at 12:16 pm

    it is useful…

  67. Vandan D. Pathak on August 3rd, 2012 at 11:40 am

    it’s so usefull for jquery developer……..

  68. varinder on August 23rd, 2012 at 6:40 am

    thankx its very use-full ……………!

  69. hal? saha on September 4th, 2012 at 12:34 pm

    I run a blog that is very similar, is there any way you would write a guest post on it? Shoot me an email if you are interested!