Dropdown menus: Should the parent item be clickable?

Question

TL;DR
In my opinion, the parent element (that which when hovered spawns the dropdown menu) MUST be clickable. Other items in the global navigation bar that do not have have dropdown menus take you somewhere when you click them. This must stay consistent. The question at hand is: what's the best way to ensure that the user does not "forget" that that parent element is still a link to a page even when there's a dropdown menu displaying additional links?

I know this has been asked a couple times in a couple different ways, but I don't feel any of the answers address all of my concerns adequately, and I also wanted to get some feedback on my potential solution. I felt it would be hijacking another thread, especially one that has already been answered, to add my thoughts to one of the existing questions, hence this fresh one. Also, all of those questions are from like 7 years ago - there's got to be a lot that's changed since then.

Consider the following structure for a website promoting a fictional SaaS product:

_ 0.0 Home

 |_ 1.0 - Solutions
    |_ 1.1 - Home
    |_ 1.2 - School
    |_ 1.3 - Work

 |_ 2.0 - Pricing

 |_ 3.0 - Company

Hovering over item 1.0 in the global navigation bar will display a dropdown menu, containing the sub-items (1.1, 1.2 and 1.3). Hovering over 2.0 and 3.0 does not display a dropdown because there are no sub-items. So what is the behavior when clicking on each of these?

2.0 and 3.0 is easy... the user is taken to the Pricing and About Us pages respectively.

1.0 is not as simple and this is where my conflict lies. I feel like in so many web sites these days, a very common pattern is to have clicking 1.0 do nothing, forcing the user to click on one of the items in the dropdown menu instead. The main problem I have with that is:

Shouldn't the same thing happen when you perform the same action on visually consistent navigation elements? Removing the link from 1.0 could cause confusion - "why can't I click this? I want general information about this company's solutions". Call me a purist, but this inconsistency troubles me.

One solution I've seen proposed is to either remove or leave the link on 1.0 but add another item in the dropdown menu that correlates to the page for 1.0. So the section would look like this:

|_ 1.0 - Solutions
   |_ 1.1 - Overview
   |_ 1.2 - Home
   |_ 1.3 - School
   |_ 1.4 - Work

My main problem with this is that any sense of hierarchy that was designed during the IA is greatly diminished now that 1.0 has been transformed into a sub-page (1.1). It would not likely be an issue with such a simple structure, but what about for ginormous sites with hundreds of pages and gobs and gobs of information whose easy access is dependent upon comprehension of that hierarchy? One of my main questions: what do the cognitive experts say about this? Is that need to maintain the hierarchy legitimate or am I inflating it?

And secondly... if you remove the link from 1.0, you've got the same problem as above - keep it and you've got two menu items in close proximity that go to the same place when clicked... that's confusing and doesn't make any sort of fundamental sense to me.

My stance/practice has typically been to leave 1.0 clickable and only display 1.1, 1.2 and 1.3 in its dropdown. I've tried sticking to my guns with this but the data shows such ridiculously low traffic to 1.0 that change is required..., as if users are so enamored by this bright, shiny dropdown menu, they forget they can click on the parent item (1.0). Being around in the days before dropdown menus weren't anything but a javascript, cross-browser, cross-platform nightmare, this is surprising to me (get with the times, I know), but it is what it is.

In an effort to fight off bad practice (imo) becoming good practice because it became a trend, I'm hoping to make "my" method work with some deliberate design techniques. I'm hoping that styling all the items (1.0 - 1.3) consistently while still showing the hierarchical order will be enough to remind (for lack of a better term) users that the parent element is clickable and that clicking it will bring them to a page about exactly what the label says AND AT THE SAME TIME make it clear that clicking any of the sub-items will bring them to a page related to the parent but that likely goes into greater detail.

Something like this:

I will obviously have to build a prototype and do some testing, but I wanted to get my rant and wireframe in front of the wise eyes here first to see what I might improve or am just plain missing. Feedback/criticism welcome.

My final concern is with respect to the content that goes on 1.0. If this was a retail site and the label was "menswear", it would be easy - 1.0 is a list (or grid or whatever) of ALL the menswear available (or maybe just a list of all the categories showing the top sellers for each... whatever). And 1.1 - 1.3 would be different categories within menswear. But in the case of our SaaS product, 1.0 would talk about the company's product/solution in very broad strokes... meant for the user who just wants to get the gist of it without getting into the nitty gritty - a rather important page in the flow for 1st time visitors.

This brings me to my other main question: While i hope my proposed solution will get more page views for 1.0 (while retaining overall consistency and the site's overarching information hierarchy), is the fact that it is so important a good enough reason to break the rules and make the priority to ensure that it is seen/accessible "by any means necessary"? I hope not, but again, I'd love to hear what you all have to say.

Thanks for making it through!!

Answer 1

Interesting question. It's not unheard of to have the main item in the navigation be clickable. The only problem you face is that it does not appear to be interactive. Why?

Dropdown navigation encourages people to go straight to the deepest 'level'.

The reason is quite simple. The navigation structure essentially funnels people from a broad topic (like solutions) into a more specific item. If you want people to really know they can interact with your main items, you need to make it look that way too. One solution I often use for menu's that aren't too big on their own, is to add a link at the bottom saying 'everything about x'. This is also really useful if you use any labels inside of the dropdown (to cluster topics).

Here's an example.

Answer 2

Firstly, don’t show menu items on hover. Menus that show on hover are hard to use and inaccessible. Some details here:

https://adamsilver.io/articles/hover-menus-are-problematic/

Instead reveal sub menus when the user clicks.

But your issue still stands. Here’s some options:

(1) Just show the top level links. When a link is clicked, the user is taken to the page. And that page has an additional sub navigation or table of contents or what have you.

The upsides is that it’s really simple, encourages you to have fast loading pages with a clear considerate hierarchy.

The downside is that it may be more long winded.

(2) Use a ‘split’ button. This means the link has 2 parts, the link and a down arrow (or similar). Clicking the down arrow reveals the menu. Clicking the text takes the user to the page as per (1).

The upside is that it gives users the choice of going to the page or revealing the menu.

The downside is that users may not realise they can do this and the small(er) tap target may make operation a little more challenging than it would be otherwise.

(3) Repeat the top level link at the very top of the revealed menu.

The upside is that the problems mention in (2) and (1) go away.

The downside is that if users really do want the top level link this could be a bit tedious / longwinded / confusing.

Hope you research this and let us know how users got on with it.

Answer 3

What you are asking for is a very common behaviour in e-commerce sites and faceted navigation in general.

A top-level category that is clickable and acts as a dropdown at the same time is oft encountered in many different ways

:

Example: Ebay (seen above) has the top-level category act as a link, but allows you to expand the dropdown when you click on the arrow next to it.

Example: Amazon forces you into the top-level Lighting category, then provides you with the subcategories from there

Example: Tesco (a UK supermarket chain), expands the dropdown as normal but gives you the option "All Bakery" at the very top of the dropdown.

Example: Zalando (e-commerce site), has the same behaviour

---

So, in a way, one can argue there is no right or wrong way to approach this. It all depends on the use case and the nature of your website.

One could argue that on Amazon, people are looking for something specific, so it makes sense that it forces you to the top-level category and thins down your options from there. Whilst clothing/supermarket sites are more "window-shopping" experiences that can throw at you all the available options for you to browse through.

Keep in mind, all of these websites have multitudes of categories and therefore are assisted by a powerful search feature as a failsafe. Though in your case I do not think it is necessary.

---

Whether you want to create a clear delineation of the top-level category with the dropdown arrow and add a hover effect (see eBay example) or add the top-level category as an option within the dropdown (Tesco etc) it is up to you and your users.

In my opinion, I think an option saying "All Solutions" sitting at the top of the dropdown, is easy to understand and fairly straightforward.

Ultimately, I would say test as always. Both methods are quite easy to prototype and test, so grab 4-5 users and do some quick rounds to see how they interact with the options on your site.

Some additional reading that might help you: https://www.nngroup.com/articles/drop-down-menus/ https://www.nngroup.com/articles/filters-vs-facets/

Answer 4

My recommendation here is to keep the link for 1.0 if you are opening the sub-menu on hover.

Why?

1. Keep it consistent with the other links in the menu
2. You saved 1 wasted click and you're not letting your users fail
3. SEO advantages
4. On mobile, you will keep that link and you disable hover without losing any functionality or having an inconsistent pattern.

What's the structure of the page for 1.0?

A solutions overview page giving the users more details about each solution and let them compare those 3 solutions.

As a user, I'm always annoyed when I need to go back and forth to compare and choose the right solution for me.

Other examples

Stripe has an interesting approach. They close the dropdown when user clicks on 1.0 . https://stripe.com/

Answer 5

I assume it is a website and therefore responsiveness matters. I also assume that there are some parent elements with child elements and some without. This makes it a complex scenario.

Solution proposal

For consistency reasons, but also to make it work for touch devices, I'd make all parent items clickable. This seems to be the approach that most sites use.

This will leave you with two main uses cases and options for each:

1. If the parent item has child items, hovering the menu will reveal the dropdown menu. A click could do the same, or load an overview page, like you suggested. On touch devices a tap on the parent item opens the sub-menu, assuming the entire navigation is in a menu.
2. If the parent item has no child items, a click on the parent item loads the content. Same for touch devices.

As you suggested some styling (hover effects) can help to suggest that something is clickable and a visual hint (e.g. ▼) can help to set expectation that the parent item has child items.

---

Another Aspect

Building overview pages...

|_ 1.0 - Solutions
   |_ 1.1 - Overview
   |_ 1.2 - Home
   |_ 1.3 - School
   |_ 1.4 - Work

...might have benefits not only users, but also from a deep linking and SEO perspective. Deep linking: The sales department might like the option to deep link to an overview page of products. And I think it can't hurt for search engines either.

---

Evidence

This is the tricky part. I found something associated to the term Mega Menus (maybe this helps for further research?).

First of all, I would second your thoughts on consistency. There is plenty of sources and evidence on the web how much consistency matters.

An NNgroup article on Mega Menus suggests that menus can be hovered, clicked or tapped, and they seem not to bother to talk about the differences. This article is valuable because it also talks about Accessibility of menus.

A question on ux.stackexchange on hover and click or just click hover with an answer talking about own research findings.

While thinking about this case and writing the answer, I needed to think of Jakob Nielsen who said "Users spent most of their time on other sites" and this is why it is so important to follow established patterns.

Answer 6

The following site is no longer active but you can see/use it with wayback machine.

In this site the main menu:

is made up of categories and sub menu is made up of sub categories are inside the pages too which can go many levels deep.

The sub menu is dynamically created on server side by calculating number of categories and dividing them into appropriate number of columns.

See submenu example 1:

and submenu example 2:

.

As you can see you can have a lot of pages accessible through this menu system. You do have to click it and wait for page to load.