Prev Page1 of 2
Use arrow keys to navigate

Having a  clean looking navigation is very important for a successful website. You and I completely understand that large information based websites tag along an enormous amount of pages/categories. Organizing all of them neatly is quite significant, considering the limited space available. A challenge like this makes us think harder and come up with unique solutions to this problem.

When a user visits a website, they will be provided with multiple options. Obviously a frequent visitor has technically learned how to navigate and use your site to their liking. Maybe you offer a specific category they are interested in reading, or maybe they are using your site as a resource to do something else. Whatever their need or the overall goal might be, providing them with a pleasant experience is a must.

You simply cannot place all or your categories, sub categories, pages, and modules on a navigation menu. The need for a drop-down menu comes into play to save the day! One of the downsides of a drop down menu might be that first time users are presented with so many choices, that they are overwhelmed with the possibilities. From there on they might look around and generate a few pageviews for you, while trying to find what they need/want. The scariest route they can take after being bombarded, is leaving your website.

Hover and clickable menus are very common in drop down menu design. To make things less confusing you want the users to see what they are about to click. On the other hand clickable menus are ideal for mobile users. You can’t really hover with a touch-screen phone. When you use a smartphone to browse the web, you usually have to touch the screen to make your selection. Having both elements is not a necessity, considering that most websites have a separate mobile based design that caters to different resolutions.

Let’s look at some of the most important factors to remember and take away from this article. This is short list, compiled of reminders to help you out.

  • Clean and simple to use.
  • Remove tooltips from buttons with drop-down menus.
  • Clean typography and a readable list are important.
  • Advise enough spacing between list items.
  • All buttons need a hover effect to be more usable.
  • Use the same fonts and a similar background.
  • Create an easy to see menu.
  • Try to keep the font size the same as the navigation.
  • Keep the drop down color different from the background.
  • Bulletpoints and icons are great to a certain extant.

Today we have collected a few examples of website that accommodate multiple levels of content hierarchy, some more than others. This drop down menu design inspiration will hopefully help your brainstorming process speed up. Many different styles are presented, thus providing you with a larger picture. Designing is a challenge as well as coding, this all depends on the elements involved; pictures, icons, rows, and etc.

Note: All of the images are linked to the specified website.

1. ThreadBird

2. Threadless

3. Desina

4. LionBurger

5. WestCoastPoppin

6. Converse

7. Twitter

8. Facebook

9. BohemiaDesign

10. GetSatisfaction

11. Dribbble

12. Chipotle

13. The Verge

14. Tutorials Marketplace

15. TheyMakeApps

Prev Page1 of 2
Use arrow keys to navigate


Posted by Igor Ovsyannykov

I'm a designer and entrepreneur living in Washington D.C. I have a passion for designing, building, and executing products from start to finish. If you wish to hire me, please check out my portfolio:


  1. Thanks very inspirational, I will be trying to create a good menu drop down for my newest project. Anyone know of any good tutorials? :-)

  2. Great inspiration, I will be using the above for ideas on my next web project – anyone know of any good up-yo-date tutorials? :-)

  3. Number 3 (desina) is my favorite :)

    Thanks for Article Igor!

  4. Great designs, i hope to make something similar sometime

  5. Is there any tutorials to make some of those in Flash CS5?

  6. Great post. Would really like to see some examples of creative drop-down items that are non-navigational (as in selecting an answer from a dropdown list in response to a question).

  7. Excelente port, inspirador, alentador y un reto para superar tan excelentes diseños.. 😉

Leave a reply

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