How do users expect dropdown navigation to work?

Question

This question is in regards to expected behavior with drop-down navigation in web pages.

---

This is part of an email I just got from a client: ("Admissions" is one of the top level navigation links)

Question about top level of navigation when it comes to Admissions (and any other top level items you can click on and get a page to open). There’s good stuff under Admissions when you click the top. Unless you click on the word Admissions, you don’t get the full description. This may sound silly, but do people know to first click on the navigation headings to get info, and then work the sub-menus that pop up? I always thought you hover over the main heading, get the pop-down menu, and go from there. (Maybe said more technically – do top menu navigation items typically have a landing page when you click on them directly?)

Here's another email I got from a client with the same question:

Question for you - the pull down menus.....when I see a pulldown menu I don't think to click on the top item because I assume it's the heading - is that just me or do you think people might acutually miss clicking on the 'About the foundation' and seeing the piece there? Same with the grant application - should the instructions and application both be sub-menu items so people can easily find both the application and instructions? I'm not sure if this makes sense to you, but I guess I'm asking if when there are sub menu items the heading should not be a link?

In the past I've assumed users know that the top-level link in indeed a link to a page, and not just a placeholder to hover over in order to trigger the dropdown and display the "real" links. I think this assumption has been wrong, and this is not the first time I've had a client ask me about this, or miss reviewing several pages because they weren't aware of the links.

If I didn't have best practices in mind and wasn't an HTML purist, I would simply make the top level links "dead", either with href="#" or href="javascript:void(0)", let them be placeholders only, and call it a day. For technical reasons, they do still need to be <a> elements. Though this is tempting, I think it's bad practice and there are probably accessibility issues with doing that as well.

I've handled this issue by duplicating the top level link inside the dropdown (creating another identical link with different text), which is the best idea I can think of. I've also made "summary" pages that just re-list the sub links (kind of pointless).

Users don't always know that hovering the link will trigger a dropdown until they actually do it (unless there are little arrows or something). Do they expect every link that opens another level of navigation (when hovered) to actually link to a page when clicked as well? What about for navigation that is 3 or even 4 levels deep?

It's amazing I've gone so may years without ever thinking about this: How do users expect links in dropdown navigation to work, and what do I tell this client?

Should links that have a sub-menu be either unclickable or navigate to an overview/summary page (likely containing an expanded version of the sub-menu), or is it "OK" to put links to unique, important pages as the top level of a drop-down? The more I think about it, the more I'm inclined to say that it's not OK, because these links can be easily missed or overlooked, or users expect nothing more than an overview page.

Interested in hearing what you have to say about user expectations of this extraordinarily common web interface.

Answer 1

In general:

• HOVER to show more links when the menu bar is primarily a way to navigate a web site
• CLICK to show more links when the menu bar is primarily used as a web application's task bar (more akin to a standard desktop app)

When used as navigation, there's the perpetual issue that when hovering over a top-level link, people see the secondary links, and are likely to then click one. This is fine, except that odds are the top level link isn't going to be clicked nearly as often.

The typical remedy there is to treat that top level link's page more as a table-of-contents for that section. In and of itself, it doesn.t have a lot of unique content but acts as a gateway/overview to the other pages.

To answer your comment, I would suggest not making them dead links. The reason for that is that if the drop-down menus are badly built (there are a lot of really bad JS heavy ones out there) google and screen readers and the like will have a tough time traversing the site. Additionally--and this is just my opinion--I've found on touch devices, I hate dealing with drop-downs. I just want to tap and go.

This does remind me of way back in the late 90's (before UX was considered an important thing) when we'd do very basic site maps. The client with more often than not then create the content for all the pages EXCEPT the top level ones. That always led us to having to slap together a quick list of links to the other pages for the content of that top-level page. I guess it's always been an issue. ;)

Answer 2

I have many times found myself visiting a page from a navigation menu and found myself jumping in at one level lower in the content hierarchy than I was expecting because it was not obvious that the navigation bar itself held a layer of content between the page I was on and the pages for the menu items.

There are a few problems I can think of with duplicating the top level item:

• Sometime items in a navigation bar do not have a menu as the navbar item has enough content for only one page. Your suggestion of having a duplicated item in this case results in a menu with a single item.

• Users will typically use a navigation menu to navigate to other pages at the same level in the content hierarchy - under the premise that all items in a menu are at the same level. If one of them happens to be a level up from the current page that can be disorienting. (Breadcrumb trails help with this)

• It adds to the cognitive load of the user - there appears to be more information to remember how to access.

• For those who are used to the navbar items having their own links, the duplicated item in the menu is confusing and appears unnecessary

Typically, the confusion arises because the navbar does not indicate to the user that items in the bar are themselves clickable in their own right, and when you hover over them, the menus that popup appear and behave very similarly to desk top application menu bars - where users never expect the bar items themselves to activate anything other than a dropdown menu.

So design the navigation bar significantly differently to a desktop menubar and provide enough clues to the user that navbar items are themselves clickable - e.g. by separating items from each other in the bar, and highlighting the items to make them 'hot' as you hover will help. Separate the menu itself a little from the bar, perhaps making the menu itself appear in a different style to the navbar itself. This can then certainly go along way to help. Note that the menu should appear quite quickly when you hover over a navbar item.

I have found this problem quite frequently in WordPress themes, so when I chose a WordPress theme for my own website, I was particularly attracted to a theme from ThemeShift ( See sample below from their website: http://themeshift.com/demo/designum/ ) that made the navbar distinctive enough, so as to make the navbar items clearly clickable in their own right, and the hover menus show their items in a significantly different style. I cite this as a good example, but there are of course many sites that do show the navigation bars well.

Answer 3

I got a similar request from a client recently saying he didn't want content in the top-level page and we added a page in the dropdown area instead and put the content there.

Afterwards, while I was fiddling to fix cursor issues so it will show an arrow on first level and a pointer only on sub-levels...realized that once my mediaqueries kick in, in the mobile layout, I end up with that same top level page that looks very clickable but goes nowhere. I could create a list of links but the client hardly has enough content to justify that.

Anyways, it can probably be fixed but just a thought that these decisions also end up having an impact on mobile navigation.

Answer 4

"How do users expect drop down navigation to work?"

This has no single answer, as some expect different behavior than others.

The key to this problem, in my opinion, is to better the content structure. As soon as you steer away from a one-level sitemap, you should be thinking hierarchical. Each parent page is the summary of it's child pages and each child page covers a part of it's parent topic.

This way of thinking solves two problems:

1. Users that don't click the parent page will not miss any in depth information, just the overview.

2. It makes the content manager think about the right content-driven menu titles.

Duplicating the parent link in the drop down menu can work in some cases. The first or last item can be Admissions overview, but should be visually separated from the other items.

Answer 5

I've been challenged with this for a few years now. It astounds me that I hear similar comments and questions. It's becoming more commonplace now that people are on auto-pilot and tend to click only what they assume. We have "seasoned" site users who know to click on anything, and others who click on things based on poor UI and UX approaches established by Windows.

My response to this is, unfortunately, that when enough people use a common thing incorrectly, that becomes standard. Like recording digital TV is now called DVRing, yet we never called it VCRing in the past. So, if the expectation is that the main menu item (ugh, 'tab') does not hold content itself, and only the fly-down subpages, then, I agree with the solution above in creating a table-of-contents for this section as a landing page, just in case it is clicked on.

It's a shame that so many people just don't know how to use websites and make many assumptions which cripple and dumb down site interfaces.

Answer 6

For one of the sites I manage I got a request to fix that the most important content be moved to the sub menu, as most people wouldn't think to click on the main menu. I'm a bit floored that people would assume there is nothing there. In my mind it's obvious that the main menu has content, and it would be the place to start. On searching the internet, I see many web queries to be able to make the top menu non clickable. So we have to contend with two types of users, the ones who only look in sub menus and the ones who click on main menus. Rather than make the main non clickable, I think a better solution is to make a sub menu link to that same page and call it something different. This gets around the non clickable issues on mobile and tablet devices. If the web design allows it, you could duplicate the name, but I suspect search engines would have trouble with that. Apparently we see most what is first and last, so I'd go for the repeat at the bottom of the drop down menu. In the meantime, I've set up Google Analytics to see how people actuall navigate my site.

Answer 7

I first came across this issue in 2008, and wrote it off as the client not getting it. I did some quick informal testing and found that other people didn't get it either, that the main nav items with dropdowns are also clickable themselves. To any initiated web user, it's a no brainer. But apparently not to others.

I've just come across it again in 2015 with a new site I'm about to launch, and again with another site I'm updating for a client. It's unfathomable to me that people don't get it, but that seems to be beside the point since this is what's happening.

Flickr adopts the same approach as Home Depot, having the first item in the dropdown link to the same page as the main nav item, but with a different name. It pains me, but this is the approach I'll take. I'll also test the idea of a visual difference between main and secondary nav, but I doubt that'll fly...

Answer 8

If it has extra content (drop down) it should appear on mouse over. If you click the parent link, it will bring you to the parent page for that content (Admissions).

Take a look at Home Depot's site. They do exactly this. They also add a caret to every main navigational item that contains a list of additional content.

Answer 9

It is a long standard that every top level link should present a page with the name of the link and that page should present the next level of sub links. This continues for each level. The content on those pages should contain and overview of of the pages each link will present A bread crumb trail below the nav bar is also very good for people who prefer to go directly back to the link above or even two levels above.

There are many reasons to do this for example I use a 1900x1200 resolution and a high resolution mouse, so cascading navs can be difficult on sites where they are too thin, or not well structured and they cave in while navigating. In cases like that I would rather just click the link and go to the overview page where I can click regular text links. I am also very fond of bread crumbs when surfing sites with a large amount of pages.

If you plan to make your site responsive, you will need to do single level drop downs as cascading drop downs don't port well to phones.