Primary Navigation with Hover Dropdown clickable or not

by Hawkee   Last Updated April 15, 2019 19:16 PM

We've got a design with a primary navigation menu that uses dropdowns when hovering over the links. We have two options:

  • Disable the primary links and mirror them in the dropdown so the user doesn't miss the link.
  • Keep the primary links clickable without a mirror in the dropdown. (The concern here is that they won't realize it is a link)
  • Clicking the primary links will bring up the dropdown which will include the primary link on top

What are your thoughts?



Answers 2


It is rather confusing to see same menu item in a dropdown menu. A primary menu used as category (group) name while submenu actually are actions. In this approach a primary menu items have more general names which serve as navigation.

An example from desktop world is modified Calculator menu.
desktop menu

Primary Edit is cue for a user and brings appropriate expectation of submenu, but what is Edit in submenu?

An example from web is eBay menu.
web menu
Primary menu items have submenus on hover and they are links at the same time. My eBay and Summary are the links to same page. But as the names are different they are not confusing for a user.

So the option is to make primary menu both link (good if javascript doesn't work) and dropdown activator. The first item od dropdown menu is the same link as primary item but the name is different which is more closer to action than to category name.

Alexey Kolchenko
Alexey Kolchenko
July 12, 2013 17:25 PM

It seems simpler than that though. It just depends on the content you have and potentially the amount of content within sections and how it should be grouped. The top nav item should be a category that contains the sub-nav items. If it makes sense to have a landing page for that category, then allow users to click it and land there, and the sub-nav links can go to more targeted pages.

Plenty of sites do this. The first examples I can think of are https://www.wgbh.org/ and https://www.boston.com/. Boston.com interestingly nicely uses a horizontal nav selector under the main item, which them becomes the persistent sub-nav for the section.

If it doesn't make sense to have a landing page for the whole category for whatever reason, just have it be a target to trigger the menu, and clicking that top category item won't do anything.

Many ecommerce sites work this way... https://www.target.com/ and https://www.gap.com/ are two quick examples I could find. You'll notice both of them have "mega menus" to further organize their massive amounts of content.

Both are acceptable behaviors depending on the amount of content and if the grouping makes sense.

It is also worth noting that some sites - like https://www.amazon.com/ - have moved away from ANY real main nav in favor of a much larger triggerable menu and relying on search as the primary interface. This works really well for them, with so bloody much content you'd have to drill for hours with a strict top-down hierarchy!

If you don't know how you should be grouping your content, card sorts and tree tests can help you figure out how things might go together in the minds of your users.

Mattynabib
Mattynabib
April 15, 2019 18:37 PM

Related Questions


Updated May 30, 2016 08:06 AM

Updated August 02, 2016 08:06 AM

Updated April 14, 2017 20:16 PM

Updated May 01, 2015 22:07 PM

Updated May 24, 2018 06:16 AM