Skip to main content

hero banner

On-click Behavior

The Disability Resource Center highly recommends that on-click behavior be used in horizontal navigation, and it is considered a Folwell essential.

When on-click is activated on a site, the horizontal navigation requires a site visitor to click on the navigation link in order to display the dropdown or mega menu.

This behavior addresses the following usability and accessibility concerns:

hover icon

Hover Does Not Imply Intent

When a web visitor hovers over something, it doesn’t mean they are intending to interact with it. It can be frustrating to sweep your mouse across the screen to access a sidebar, a call to action, or a link within the content only to have several menus and drop-downs appear unexpectedly.

devices icon

Continuity Between Devices

Using hover menus means creating a different navigation experience for touch devices (such as tablets). Identifying these devices based on size is not 100 percent accurate. Hover menus are typically converted to touch menus for smaller screen sizes. But Microsoft released a 28-inch touch screen device that is nearly as big as the average 33-inch TV in the home. A hover menu on larger touch screens is inaccessible.

icon representing accessibility

Accessibility

With on-click, tabbing through links is streamlined. Tabbing will allow visitors to more quickly tab through the navigation to choose the link they’d like to open. If a hover style were used, a visitor would be forced to tab through each link in the entire menu before getting to the link they want.

icon representing usability

Usability

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.