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.
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:
Share this post
Was this article useful?
Subscribe to our monthly mailing list to receive more articles like this.