25 Scripts for Dropdown Navigation Menus

Navigation menus are important to any website. Well designed navigation can improve the look and appearance of a site as well as the usability. For larger sites with a lot of content or pages, drop down menus are popular because the can make it easier to move through the site with less clicks. In this post we’ll feature 25 scripts for drop down menus that you can use on your own site.

jQuery Multi Level CSS Menu #1

jQuery Multi Level CSS Menu #1

jQuery Multi Level CSS Menu #2

jQuery Multi Level CSS Menu

All Levels Navigation Menu

All Levels Navigation Menu

Smooth Navigation Menu

Smooth Navigation Menu

Simple CSS Vertical Menu Digg-Like

Simple CSS Vertical Menu

Professional Dropdown #1

Professional Dropdown #1

Professional Dropline #1

Professional Dropline #1

Jim’s DHTML Menu v5.7

Jim's DHTML Menu v5.7

 

Drop Down Tabs

Drop Down Tabs

Suckertree Vertical Menu

Suckertree Vertical Menu

Superfish

Superfish

jQuery SuckerFish

jQuery Suckerfish

Ultimate Drop Down Menu

Ultimate Drop Down Menu

JavaScript Dropdown Menu with Multi Levels

JavaScript Dropdown Menu with Multi Levels

MenuMatic

MenuMatic

Sliding JavaScript Dropdown Menu

Sliding JavaScript Dropdown Menu

jGlide Menu

jGlide Menu

Dropdown Menu Made with Scriptalicious/Prototype

Dropdown Menu Made with Scriptlicious/Prototype

Chrome CSS Drop Down Menu

Chrome CSS Drop Down Menu

Professional Dropdown #2

Professional Dropdown #2

Hover Drop #2

Hover Drop #2

Skeleton Dropdown

Skeleton Dropdown

HV Menu v5.5

HV Menu v5.5

Simple Drop Down Menu v2.0

Simple Drop Down Menu v2.0

Horizontal Drop Down Menu Script

Horizontal Drop Down Menu Script

For more web design tools and resources, please see:

Published March 31st, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

66 Responses

Comments are now closed on this post.

  • Matt, March 31, 2009

    Drop down menus are one of the things everyone needs to learn. I almost think they should have more official support in html.

  • B. Moore, March 31, 2009

    Thank you for compiling this great list of drop down menus!

  • Macbook Dreamer, March 31, 2009

    I think u meant CSS Matt, but yeah, everyone should learn how to use them. Thanks for the great list VWD!

  • Predator7, March 31, 2009

    I agree, it’s a must for designers.

  • Patternhead, March 31, 2009

    Great list, thanks for sharing

  • Federico, March 31, 2009

    Thanks for the list. I would like to add flickr-like menu in jQuery http://www.candesprojects.com/downloads/flickr-horizontal-menu/ and my porting of it in Prototype http://igorstravinskij.blogspot.com/2008/04/flickr-horizontal-menu-with-prototype.html

  • Chris, March 31, 2009

    Some excellent menus in your selection. But what happens if visitors have javascript disabled? In many cases, the navigation will not work. For some sites, this will mean a potential paying customer will go elsewhere. Therefore, anyone using a fancy javascript-powered navigation system should bear this potential accessibility problem in mind.

  • Conor, March 31, 2009

    Thanks for those, some nice ones there. Will definately use the jQuery and professional ones

  • Vandelay Design, March 31, 2009

    Chris,
    The percentage of visitors now that have JavaScript turned off is very low. In many cases the menu will degrade gracefully if this is the case, of course, not all of them will. That’s a decision you have to weigh.

  • Craig, March 31, 2009

    Thanks for the list, it is good to be able to have a quick scan through and compare easily when they are needed. On that note, as with most things in life, these serve a purpose but can also add usability issues if not designed with forward planning (ie: hover/click timing, dropdowns covering important information).

  • Danh ba web 2.0, March 31, 2009

    Great list, thanks so much
    Keep up your great collections

  • Gfx Video Tutorials, March 31, 2009

    Cool… Thanks for the list…

  • K-Nine, April 1, 2009

    Thanks for the compilation. Awesome n functional. What more can a web designer wish for?!

  • W3planting, April 5, 2009

    very good collection! love the jQuery Menu

  • Mark Law, April 7, 2009

    Great post, to me dropdowns are the hardest part of website design and development. Good to see them all hanging out together here, a valuable resource indeed :)

  • Virtual Monk, April 8, 2009

    I’ll add this to the bookmarks. Thanks!

  • Nityagopal Sahoo, April 25, 2009

    Very Nice DropDown Navigation Manu
    Thank’s

  • michelle, May 11, 2009

    Vandelay Design blog really helps to increase my website development skills and its good if i make more different navigation menus for my clients website.Thanks for the information.

  • Tell a friend script, May 15, 2009

    This script is cool for my Blog – Hover Drop #2

    Thanks for sharing your knowledge.

  • yos, May 22, 2009

    cool. i think i’ll choose one and place it on my blog

  • Chicago SEO - Rob Buti, May 23, 2009

    Nice list man, a lot of sweet drop navs!!! Do you have any mega drop navs?

  • Vandelay Design, May 23, 2009

    Hi Rob,
    No, at this point I don’t have any resources for mega drop downs. Seems like they are just starting to gain popularity, so maybe more resources will be available in the not-too-distant future.

  • Red Gear, June 3, 2009

    Nice… It’s been i’m looking for. Thanx

  • PraP, July 30, 2009

    More than Handy. Thanks.

  • UK Printing, September 10, 2009

    Nice information thanks for sharing the really helpful info I like Professional dropdown #2 .

  • Frank, November 3, 2009

    We find that the majority of people do have Javascript turned on and the ones that don’t are technical to some degree and are usually not the target market. Nice collection guys!

  • James, November 24, 2009

    Drop down menu.. That’s what I’m looking for! Many Thanks!

  • Space and Time, December 7, 2009

    Quite a few of our client website use drop down menus. I woud avoid javascript as there a still people out their stuck with restricted machines that are not allowed javascript.

  • college papers, January 5, 2010

    the dropdown navigation menus are just incredibly useful.

  • Web Design Chicago, February 26, 2010

    Great list. I already use a few of this but some were new and I’m going to try them out. Very helpful resource by the way!

    Please keep adding more tips like these!
    Matt

  • Download Photoshop, February 27, 2010

    Excellent menu on the CSS, which I have long sought to use to navigate their sites. Thank you so much!

  • College Reviews, May 19, 2010

    Great lists for drop down menus. This will really helps a lot to those Designers here.
    This one such a very useful article.

  • I was actually typing up a similar email for a junior programmer. Now that I’ve found this, I’m just going to forward this page URL:)

    Thanks a bunch for the valuable resource.

  • Web Design Inspiration, July 10, 2010

    I’m thinking about using one of these on my blog. Thanks for the resource!

  • Future Webs, September 14, 2010

    Great dropdowns, useful for any sites!, thanks

  • yoonus, October 20, 2010

    Excellent menu and very very useful for site

  • QR Code Marketing, March 29, 2011

    I love mega drop downs. Some good examples here.

  • florin, April 15, 2011

    Create fully customizable drop-down menus : http://bstdownload.com/reviews/css3-menu-1/

  • Web Design Houston, May 7, 2011

    I already had some of these but have some more now – thank you!

  • aufhoeren zu rauchen, October 30, 2011

    Drop down menus are perfect but I am still torn between vertical ones and horizontal ones – what’s the preference from you guys? The Digg ones are the best here IMO

  • Mahefa, November 15, 2011

    Thanks! a lot of choice! this is what I was looking for my website

  • Ben Thompson, June 27, 2012

    Excellent resource, thank you.

  • Kevin Sterlings, December 20, 2012

    Thanks – Forwarded to my web guy…

  • Location Italien, June 13, 2013

    Well I truly liked reading it. This article provided by you is very constructive for correct planning.

  • ITian, July 29, 2013

    Keep up the good work, Nice Postings !!