50 Examples of Drop-Down Navigation Menus in Web Designs

Jul 9 2010 by Andy Johnson | 38 Comments

50 Examples of Drop-Down Navigation Menus in Web Designs

Having a clean and well-structured website navigation is key in designing an effective user interface. Drop-down menus are great for sites that have multiple levels of content hierarchy. The typical design pattern of a drop-down menu is that when a user hovers over the parent navigation item, a submenu of navigation items appears.

In this collection are many different types of drop-down menus used in websites all over the web for your navigation design inspiration.

Here are some related collections regarding site navigation that you may also be interested in:

1. Pure Grips

Pure Grips feature images in their drop-down menu to make it clear to the user which products are which.

Pure Grips

2. Porsche

As you hover over each car, the image on the right changes. It also looks stunning with the semitranspart background.

Porsche

3. B&Q

B&Q has a clean and eye-catching drop-down menu that lists columns of products that customers are looking for.

B and Q, DIY

4. Red Brick Health

This drop-down navigation menu fits perfectly into the site design, and the pink hover highlight is a great touch of detail.

Red Brick Health

5. Carreras Con Futuro

This drop-down menu’s design embodies the hand-drawn theme of the website.

Carreras Con Futuro

6. Galaico Folia

This drop-down submenu has a wonderful animation effect with the smaller pieces of wood folding down from the main menu item.

Galaico Folia

7. Callaway Golf

This is a masterfully neat drop-down navigation design that has an orange hover effect.

Call Away Golf Shop

8. Converse

Converse has a grunge-styled drop-down menu that has a cloth-like texture with frizzy edges.

Converse

9. Puma

This dark drop-down menu really stands out from the rest of the site’s lighter colours.

Puma Shop

10. Sunglass Hut

This drop-down menu is functional in that it also serves as an illustrated visual of the various styles of sunglasses.

SunGlass Hut

11. Nettuts+

Netttuts+ has a clean drop-down navigation menu that works well with their header colours.

Net Tuts+

12. Tennessee Trails & Byways

This drop-down is unique because within the submenu, there’s also tabbed navigation.

Tennessee Trails And ByWays

13. Gateway

The drop-down menu in this design has nice curves and beautiful visuals that serve to display images of the computer manufacturer’s products.

Gateway

14. Bern

This rough grunge style website has an edgy drop-down menu that complement the look-and-feel of the website’s general aesthetics.

Bern

15. Ski Alpine

This drop-down menu highlights the attention to detail that the site designer has.

Ski Alpine

16. Guitar Hero

This simple drop-down menu is practical and doesn’t distract away from the main areas of the web page layout.

Guitar Hero

17. Mac Appstorm

Here’s a clean drop-down menu that fits perfectly with the overall landscape of the site design.

Mac Appstorm

18. Noizi Kidz

This navigation is bright and shaped unconventionally.

Noizi Kidz

19. Audi

This drop-down menu contains thumbnails of the auto maker’s model of cars; when you hover over a car, it displays details about it along with relevant links to other pages.

Audi

20. Famous Cookies

This drop-down navigation menu showcases the yummy cookies that the store makes available to its hungry patrons.

Famous Cookies

21. Duchy of Cornwall Nursery

This paper-styled website design has a nice, clean dropdown menu.

Duchy of Cornwall Nursery

22. EA

Electronic Arts has a playfully styled drop-down menu.

EA

23. Bonfire Snowboarding

Bonfire Snowboarding has an awesome 3-column drop-down submenu on their "Products" main navigation item, placing their products within three categories.

Bonfire Snowboarding

24. Facebook

Facebook has their simple drop-down menu on the site’s "Account" main menu link with relevant links for editing your Facebook account.

Facebook

25. Nick Ad

You have to click-and-hold your mouse pointer for the submenu to appear. Then you move onto the link you want on each drop-down and release your mouse button to visit that page; it’s an interestingly unconventional interaction design.

Nick Ad

26. TN Vacation

This dark blue drop-down menu really stands out.

TN Vacation

27. MTV UK

This site design features a clean and standard drop-down menu.

MTV UK

28. DC Shoes

The red and white text on the semitransparent black background really works its charm.

DC Shoes

29. Envato Marketplaces

This is a really beautiful drop-down menu.

Envato Marketplaces

30. Tennessee Theatre

This navigation is special because it’s clean but creative at the same time. The brown really stands out from the rest of the site’s soft colours.

Tennessee Theatre

31. Boden

Each menu item has a different font and the drop-down menu is very clean.

Boden

32. White House

The white background, blue text, and red top and bottom borders utilizes the the USA flag’s colours.

WhiteHouse

33. Navigant Consulting

The colours used on this site work together like players of a football team.

Navigant Consulting

34. Officers Club

Another clothing website with a drop-down; having a dropdown submenu makes it so much easier to find products. The Officers Club drop-down has a multi-column layout.

The Officers Club

35. Fall For Tennessee

Fall for Tennessee has a horizontal drop-down menu that slides out to the right hand side. The menu items that have a drop-down submenu have a small arrow next to them to indicate that they can be expanded.

Fall For Tennessee

36. Sony

Sony has a very wide and simple drop-down menu on their main UK site.

Sony

37. Project Vino

This drop-down menu uses colours that fit the rest of the site. The big font size and the overall design looks amazing.

Project Vino

38. Media Temple

Media Temple has by far one of the best drop-down menus out there, aesthetically. The small thumbnail of each hosting type next to the name of them looks great, along with excellent JavaScript-based animation transitions.

Media Temple

39. Mozilla

This is a simple yet sleek drop-down menu on the Mozilla.

Mozilla

40. August

The semitransparency effect in this drop-down menu works will with the vivid background image.

August

41. Henleys Clothing

The main navigation colour creeps down onto the drop-down submenu.

Henleys Clothing

42. Digg

The classic Digg drop-down submenus work with their website’s overall design.

Digg

43. Action Envelope

This drop-down menu is special because it has a nice shadow effect that really brings the drop-down menu out of the page from the rest of the site.

Action Envelope

44. Very

Very, a new e-store, has a clean and structured drop-down navigation menu.

Very

45. Incase

The Incase drop-down menu is slightly lighter in color shade than the navigation background, and works well with the site’s overall clean look-and-feel.

Incase

46. American Eagle

I really like the American Eagle drop-down menu because it fills the whole site’s width and also blends in with the clean paper-style look.

American Eagle

47. Mayflower Brewing

The colours used in this drop-down (and the site, in general) are gorgeous.

May Flower Brewing

48. Select Clothing

Select Clothing’s drop-down menu has a dark background that stands out over the sliding images below.

Select Fashion

49. Bird Malaysia

This drop-down menu is special because the colours stand out from the rest of the website, and I quite like the subtle background image at the bottom of each drop-down menu.

Bird Malaysia

50. The Web Squeeze

The Web Squeeze has implemented jQuery into their drop-down menu to give it some nifty hover effects.

The Web Squeeze

Related Content

About the Author

Andy Johnson is a freelance web designer and developer living in the UK. Andy freelances through his own design studio Authentic, and also co-founded a lightning fast UK hosting company called Pixeno. You can follow him on Twitter: @Andy92.

38 Comments

Nottingham

July 9th, 2010

Personally I’m not a massive fan of drop down menus, but this list gives some great examples of using them!

Dan

July 9th, 2010

From a design point of view these are great..

Pretty…

Interesting..

But generally I don’t like drop downs from a user point of view….

Nastya

July 9th, 2010

I liked the article! I live in central Europe and thanks to this site can monitor the work of designers all over the world!

Johnboy

July 9th, 2010

Just happen to be working on styling a drop down menu for a clients site as I came across this article, some gems in there, though a few are a bit unoriginal.

The icons on the sunglasses hut one especially caught my eye.

Jordan Walker

July 9th, 2010

Inspiring navigational menu’s wonder how many use SuckerFish?

Ted Thompson

July 9th, 2010

Some great examples, thanks for the inspiration!

Jennifer R

July 9th, 2010

Interesting! These drop down menu looks attractive alot and it will give more inspiration for web designers in their next project

Steve James

July 9th, 2010

Here’s a drop-down menu I like: http://grandsierraresort.com/

kris

July 9th, 2010

Andy, the link underneath N° 29 is wrong.

I like N° 47, Mayflower Brewing
It looks like transitions were used but I can’t find any.
Maybe I didn’t look hard enough.
I would like to know how this is done :-)

I wrote a tutorial about how to make a multilevel dropdown menu (no javascript), one that jumps up and to the side. I don’t think you can use it for your navigation so it’s a bit off topic here, but if there’s anyone interested, get in touch.

Osvaldas

July 9th, 2010

There’s a good solution for extra high drop-down menus what I didn’t find in the examples: http://www.adventistai.lt — see the right hand menu item.

Rodrigo Muniz

July 9th, 2010

Good to see great examples, but sad that not everyone are very good with accessibility.

J. Glerum

July 9th, 2010

This is a new nav we did that fits with this post – http://www.valitics.com. It uses some XML, preview images and text, and a few big, audacious images on a few hover overs too.

web&co

July 9th, 2010

have a look at the menu we built for http://www.alpenlachs.at/home

Cheers webco.at

ray

July 9th, 2010

http://www.heavy.com is a top cool drop menu

Alex Flueras

July 10th, 2010

Nice list. Here is another slick drop down mega menu: http://www.waterworks.com/

Eko Setiawan

July 10th, 2010

Thanks for share the inspirations…bookmarked!

Thomas Craig

July 10th, 2010

Andy, great examples of some exceptional work. Excellent source of inspiration.

Ann

July 10th, 2010

Very nice, but perhaps an idea for the next 50……..
horizontal drop-down menu that slides out to the right hand side?

Roman

July 10th, 2010

Another reference for me… nice!

Jacob Gube

July 10th, 2010

@Ann: Love the idea, I’ll see what I can do.

Rolf

July 10th, 2010

I like the Navigation of the Navigant Consulting-Design, its clear and nice :-)

ardianzzzz

July 10th, 2010

Nice, inspiring :)

BebopDesigner

July 10th, 2010

Great collection! love Media Temple and Nick Ad

Adam Hermsdorfer

July 11th, 2010

Nice! Descriptive mega menu’s are becoming more and more common. They are extremely useful and provide a cleaner description of what you are going to find in the category.

Ovanes

July 12th, 2010

I agree that drop downs are not the best in terms of usability, but in many scenarios you don’t have a choice.

I think that horizontal drop downs are much better. If they are so big and take up the whole screen I think drop downs are great.

ddeja

July 13th, 2010

Great collection. I’ll be trying to harvest them all for my own purposes:))))

Just love drop down navigation:)

Mark

July 14th, 2010

Thanks Andy,

This has given me some new ideas… I like the Audi drop-down, with thumbnails.

Now I need to learn how to do it :)
Off to check out your css navigation techniques.

Thanks again

osstudio

July 15th, 2010

Excellent list. Many new ideas emerged. thanks

Krivoy Rog

August 3rd, 2010

Media Temple – wery interesting!

Jenny Gore

November 18th, 2010

Some of these are fabulous – really professional! As they appear to be graphics… don’t they have an impact on SEO?

AcrylicWeb

November 23rd, 2010

What a great inspirational source!

Jeremy Mansfield

March 4th, 2011

We did this mega menu dropdown for Thomasville Furniture Industries back in August of 2009: http://www.thomasville.com

Jeffrey

April 18th, 2011

I would like to include one to the list I came across today:

http://www.optimumlightpath.com/.

They seem to have a very nicely designed and functioning navigation. I like the colors and how the tab goes above the bar. I also like the use of images instead of just using all typical links and how you can find anything you want through the nav.

aktivtek.no

June 16th, 2011

Hi guys. Very nice dropdown menus. I would be very happy to see a tutorial how to make them fast. Just have no patience to do the coding. Thanks for inspiration anyway. The first design – pure grips – is just awsome.

Mick

July 4th, 2011

The last one is my person favorite, drop downs are a little sketchy sometimes, especially if your audience is people who have difficulty with hand steadiness but the above just shows you that they can be done without issue and work well for most sites.

Mick.

sandeep

August 18th, 2011

Hii friends..I liked this dropdown menus.thanks for helped me.

Clare Brace

November 22nd, 2011

It’s really interesting to see how drop down nav’s have developed over time and can be so much more interesting and user friendly than a text list.

Cotswold outdoor should be on here there drop down menu is very extensive also.

Ashraf Hosni

March 15th, 2014

how to make a menubar like the one of american eagle for example, with a wide submenu! is it by using css, or differnt and what is it? thanks

Leave a Comment

Subscribe to the comments on this article.