On-click Navigation Behaviour

On-click versus hover behaviours

For menus with a hover state, the navigation experience can be something like this:

  • where a menu item has no child pages, one click reveals the page
  • where a menu item has at least one child page, the parent item is clickable, and hovering on the menu reveals the sub-menu (sometimes known as a fly-out menu), OR
  • where a menu item has at least one child page, one click reveals the sub-menu, and a double click reveals the page

The problem with hover states in a menu:

  • they require substantial control of mouse function and become inaccessible to anyone with motor impairments
  • this style of drop-down menus are often not designed with keyboard users in mind.

Find on w3.org

Find on WebAim.org

Desired click behaviour

While a skilled developer can use different methods to ensure accessibility, the preferred menu behaviour for ¾ÅÐãÖ±²¥ sites is as follows:

  • any action in the menu requires only one click
  • for menu items with no child pages, one click reveals the page
  • for menu items with child pages, one click opens/closes a sub-menu
  • hover states only further reveal affordances in link design that indicate the clickability of the text; no fly out menus

Impact on content structure:

  • any item in the menu that has an arrow/toggle indicating at lease one sub-menu/child page(s) no longer links to a page; a landing page is not required for parent items in the menu

For users of the WebPublish content management system: Learn more about creating menus