Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
I certainly would expect them to link to a page. At the very least some kind of overview or search page for the subject matter "under" that top level menu. –  Marjan Venema Jul 12 '11 at 6:24
    
@MarjanVenema: I personally agree, at the very least an overview - but should these links be reserved for "overview" pages only, and never for important content that can't be accessed by other means? This is at least the 3rd client I've had that's mentioned this issue, and I don't do usability testing, so I can only assume there are many other users out there who are confused as well. –  Wesley Murch Jul 12 '11 at 15:39
    
Yes, I can understand that. I wouldn't expect any important content to be only accessible from a top level menu item link. If such a page contains important content, I would do what you have done: repeat it at the sublevel with a more meaningful name, and/or make it available from the other "sub level" pages. –  Marjan Venema Jul 12 '11 at 16:09
    
I so much hate top-navigation items that are both link to content of their own (typically, a web page), but also a trigger to show more content. I mean, wtf, what if I don't want to see the content of this top-navigation item? what if I miss that clicking on the icon (typically an arrow) vs the text gives a different behavior? I often find myself clicking on a top-navigation item that loads some side content before being able to show me the rest of the navigation tree & that annoys the hell of me! ha! done. said. happy. going for coffee now –  Adrien Be 2 days ago

8 Answers 8

up vote 5 down vote accepted

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. ;)

share|improve this answer
1  
Just to be clear: I'm not wondering if or suggesting that clicking the top level should be the trigger to open the submenu (like a desktop app). It should be hover, as you said. odds are the top level link isn't going to be clicked nearly as often - totally agree, which leads me to think that having those links be "dead" is not that bad of an idea. As far as "table-of-contents" goes, I'm starting to lean towards this being the only practical use of navigating somewhere by clicking a top-level link. –  Wesley Murch Jul 12 '11 at 16:51
1  
I mostly agree. I updated my answer with a bit more info. –  DA01 Jul 12 '11 at 16:59
1  
Yes, there are some truly abominable js-only menus from the past, before CSS really picked up and people realized they don't need javascript for it. Interesting that your clients would omit content for the top level links, I am not experiencing that. Good point about touch devices and also about not using dead links. If for some unlikely reason the css/js (or browser) is busted and the dropdowns don't work, you need a way to navigate to sub-links by hitting the table of contents. This pushes me even further in the direction I previously stated. Thanks for the feedback. –  Wesley Murch Jul 12 '11 at 17:21
1  
Just got this exact question from a client again, and happily copy/pasted part of your very well-worded answer into my response. Thanks again for the excellent feedback. –  Wesley Murch Oct 20 '11 at 17:56
    
@DA01 "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)" : also, you can't "hover" with touch devices. –  Adrien Be 2 days ago

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.

share|improve this answer

"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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

enter image description here

share|improve this answer
    
It appears they are inconsistent between the side menu and top menu. In the top, clicking Savings, Services, or Help takes you nowhere, but in the side menu, clicking "Appliances" or "Bath" (top level links) takes you to an overview page for that category. A friend of mine suggested that it depends almost entirely on context, so for instance on Home Depot we know the side menu is for categories, and although I did expect clicking a top level link to take me to an overview, I only clicked it for testing. In all cases I felt inclined to drill down to the last level in order to select something. –  Wesley Murch Jul 12 '11 at 16:37
    
They did a good job here though, and I like that there aren't nested flyouts (hover over "Outdoors", there are multiple expanded sub categories instead of another hidden submenu), and it works perfectly without javascript (as it should). Of course the links should appear on mouseover, that is the very essence of this kind of navigation (not what I was asking). So to summarize, you suggest "overview" pages only (and always) for top level links? –  Wesley Murch Jul 12 '11 at 16:39

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.

enter image description here

share|improve this answer
    
So to be brief, what do you think? 1. Of course people know to click the top level, it's just "dumb" users who don't realize it. 2. This client has a valid point, the fact that it isn't obvious is a design issue, that can be remedied with a different look. 3. Something else? --- You say that adding an extra link adds to the cognitive load of the user, but suggest "breadcrumbs" (which I am not a fan of..), which seems contradictory (More stuff on the page to process). Besides, I don't want to have to add breadcrumbs to every site that uses a dropdown menu. –  Wesley Murch Jul 12 '11 at 15:36
    
I guess I'm looking for some kind of "Golden Rule". However, on the demo you linked to, each top level link that contains a submenu, when clicked, provides a landing page that contains a summary of what was in the dropdowns - another solution I proposed. If this is the best case then, should these links always be a summary page, and never contain anything other than that (like important information that cannot be accessed from any other link)? –  Wesley Murch Jul 12 '11 at 15:37
    
I think (2). Breadcrumbs (not to be used alone and more useful on deeper hierarchies where dropdown menus don't cut it) are there all the time to see, but menu items (not on display all the time) add to the cognitive load because the user has to remember which menu stuff was under. IMO each top level link landing page should at least provide an overview of (+ access to) the sub-pages, but can also provide content not accessible elsewhere, especially if the top level item is a 'topic' in its own right rather than just a collective. It's also a good place to cross link to other sections. –  Roger Attrill Jul 12 '11 at 16:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.