Michael Almond

Over the years as a Front-end Developer and Designer, one of the most consistently bland elements I’ve witnessed on many sites has been the drop down navigation menu. Most of these haven’t been given any real consideration – they’re badly-designed and look like an afterthought or a bolt-on towards the end of the project. However, by giving drop down menus a little more thought, they can be stylish, effective and improve click-through rates.

I first published this post in 2012, whilst researching current trends and styles for a client project, when I compiled a list of good practice. One thing I noticed was that drop down menus were being taken to the next level and beyond, becoming less of a site map and more of an interactive feature. Usability played an important part in the modern day drop down menu, with the introduction of lots of fun elements – whether it be tabs, sliders, iconography, call to actions or just beautiful imagery.

In December 2013, the examples I had showcased had to have their first update – over the half of the sites had been updated and some had even been replaced in the list by new ‘entrants’. You’ll now find not just drop down menus, but the occasional slide in menu too – mostly taking their cue from responsive design.

Use these examples for design inspiration and next time you’re working on a menu, add some extra fun, style or wow factor to it.

Updated 20th July 2015: Replaced seven sites and updated fifteen screen shots.

Updated 11th August 2016: Replaced six sites and updated five screen shots.

1. Reiss

Reiss website menu

 

2. OARS

oars black drop down website menu

 

3. Digital Spy

Digital Spy menu website

 

4. Bentley

bentley website menu drop down

 

5. Antro

antro fly out menu

 

6. IWC Schaffhausen

iwc drop down menu

 

7. Paper Collective

Paper Collective slide in menu

 

8. Beyond Trust

Beyond Trust menu drop down website

 

9. Olympic.org

olympics.org drop down menu

 

10. Evernote

evernote slide out menu

 

11. Tinypass

tinypass whole screen drop down menui

 

12. Le Coq Sportif

le coq sportif website menu

 

13. Next

next website screen shot of menu

 

14. Adidas

adidas drop down menu

 

15. Audi

audi website drop down menu

 

16. Waterworks

waterworks drop down menu

 

17. Grosse Lanterne

Grosse Lanterne cool drop down

 

18. The Philadelphia Orchestra

philadelphia orchestra menu

 

19. Schuh

schuh drop down menu

 

20. ESPN

espn drop down screen shit

 

21. The Open

the open website drop down menu

 

22. Playstation

Playstation drop down screen shiot

As you can see, drop down navigation menus have taken on a whole new look. They’ve fast become an important aspect of web design. Twinned with added functionality at the development phase, designers and developers are able to create sleek and stylish menus that improve conversion rates, click-through rates and usability.

Let us know in the comments if you know of any stylish and interactive drop down navigation menus.

And, if that hasn’t whetted your appetite enough, visit these websites for more inspiration:

30 Inspiring Websites That Use Stunning Large Photo Sliders

10 Cool Examples of CSS3 Transition & Transform Hover Effects

Featured image credit: suri via Flickr. Licensed under Creative Commons 2.0.

Share this post

Was this article useful?

Subscribe to our monthly mailing list to receive more articles like this.

Michael Almond

Posted By michael

Michael is a Front-end Developer at Tone – responsible for the design and implementation of forward thinking, responsive web designs. Follow him on Twitter @MichaelAlmondo