Navigation drop-downs. Should they be hover or click?

Written by Mike Street on 24th July 2017

(Last updated 5th September 2017)

No comments

Navigation drop-downs, or mega menus as they are sometimes dubbed, are becoming more and more common on the web. A drop-down menu is a navigation block which appears when a link is clicked (or hovered) - a good example of this can be found on the Plumpton College website. 

Animation of a drop down example
On the Plumpton website we use click to activate the drop down menu

Navigation drop-downs are often used to help the user get to lower pages on the site without having to click a trail of links. There are articles on the web detailing usability issues with drop-down menus, however, having a drop-down sometimes makes sense, for example, mega menus perform well. In that case, the next question to ask is - do you have it appear on hover, or do you require the user to click to open the menu?

Our preference at Liquid Light is to have the menu open on click of the navigation link. There are several reasons behind this, ranging from accessibility to user experience. There is an alternative line of thinking for the drop-down to appear when the main navigation link is hovered over - this would allow the navigation link to still be navigated to by clicking and although a simple solution initially, this can cause many problems with accessibility.

Hover does not imply intent

Just because a user is hovering over something, it doesn’t necessarily mean they are intending to actually interact with it. There is nothing more annoying than sweeping your mouse across the screen to access a sidebar, CTA or even the close button and having several menus and drop-downs appearing unexpectedly in your wake.

Continuity between devices

Using hover menus would mean you would need to have a different experience on touch devices (such as tablets). Identifying these devices is not 100% accurate, which means some users on touch devices might not be able to access the mega menus. You may initially think the solution would be small screens having click, but Microsoft released a 28 inch touch screen device - that is nearly as big as the average 33 inch tv in the home.

Accessibility

Hover menus do not allow much room for error. If the drop-down requires you to constantly keep your mouse over the navigation item and its children, then there is more room for error. Being able to click to open a menu and not have that menu disappear until another action is taken allows users to take their time and move the mouse in any direction without the menu disappearing.

Interaction confusion

Many users of the web are used to clicking to interact with something. Clicking links to go to a new page, clicking buttons to submit a form, clicking tabs to reveal more content, clicking stars to submit reviews etc. The natural instinct is to click the link to reveal a drop-down menu (if indicated). If the menu is on hover, this is a break in the interaction flow and expecting the user to use and understand a different motion to use your website. This can becoming confusing and disorientating.

We at Liquid Light are very much in favour of drop-downs being on click. What do you think? If you would like to read more on the topic of drop-down navigation, we’ve collated a few links below.

Further Reading

This article was posted in UX, Development by Mike Street

  • Mike Street

    Mike Street

    Mike is our front-end developer who spends his days buried in CSS and Gulp. His evenings and weekends are spent tinkering with electronics and riding bikes. @mikestreety

Comments

No comments have yet been posted, be the first to comment by using the form below:

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.