This resource is intended to help you strategize the functionality of the menu items on your website, specifically relating to clickable vs. non-clickable items. 

What does clickable vs. non-clickable mean? 

When we talk about clickable menu items, we are referring to the most common and most expected functionality of menus: that all items (“labels”) within the menu can be clicked to launch a page. For example, if you click “About” it opens the About page, and if you click “Services” it opens the services page. 

See it in action on the Forge and Smith site.

If your menu items have dropdown menus under them, these are typically activated on desktop devices by hovering the mouse over the menu item. Mobile menus function differently, so the mobile version of your menu will always require tapping to open submenus. 

Non-clickable menu items do not open a page. Depending on the design, clicking them may open a submenu, but it’s more common for this to be achieved by hovering. 

See it in action on this site. 

The two most common uses of non-clickable menu items are:

  • Not Recommended: To group submenu items under the main menu(s) without the existence of a parent page, like the example above
  • Use Judiciously: As category headings within a submenu, like Forge and Smith’s services menu or those within the Destinations and Travel Styles submenus on this client site

Why clickable menu items are better for UX

It’s a user experience design (UX) best practice for all menu items to be clickable. This is because users expect it; the majority of websites have clickable main menu items. 

Changing the expected outcome on a typically interactive part of the screen can cause confusion and frustration. It can even make the user feel a bit stupid for clicking on something that they’re ‘not supposed to.’ This interrupts a smooth flow through your site, and can impact whether they stick around, how long they stick around, and if they convert. 

Why clickable items are necessary for accessibility

Users may navigate your site in a variety of ways including a mouse, keyboard, screen reader, or voice recognition software like Siri, Alexa, and Google Assistant. All of these rely on the code in your page elements. 

When it comes to menus, clickable items are discoverable and actionable by a wider range of devices. Pretty much all devices are going to understand what they see in the element’s code. 

To code a non-clickable menu item, there has to be either an added symbol (such as “#”) or a command to ignore the text. Both of these can trip up assistive technology, causing it to either not detect the item, or to not explain to the user how to navigate it. 

Can you use both clickable and non-clickable menu items? 

No. We will always recommend that you use all clickable, or all non-clickable items. Mixing the two will create a terribly confusing user experience. 

Where can I use non-clickable menu items?

If necessary, we support using non-clickable items within submenus. As noted above, this is useful to separate categories of content within the drop-down.

The reason it’s more acceptable to use non-clickable items in a submenu comes back to the user experience. A blind user is highly likely to be confused when they use their device to access a main menu and the device isn’t providing them with any actions–or worse, the device isn’t detecting anything at all. 

But if they aren’t notified about a couple of headings within a submenu that’s otherwise full of clickable items, this may still be a passable user experience. Consider what your menu’s experience will be like if the user never sees or hears about those non-clickable items—can they still understand the content groupings without the headings? Does your mega-menu drop-down make sense?

For this to be effective, all non-clickable items need to be visually distinct (they should clearly look ‘flat’ and non-clickable), and be coded so that assistive devices understand to ignore them.