18

What is the above menu called? This menu is similar to one that appears on bookmarks for Google Chrome.

What are the pros and cons of using this pattern?

I'm planning to use this pattern in the dashboard. In my design, the levels are restricted to 3. Is this feasible to use? Is it, user-friendly in terms of usability?

  • 5
    This is generally called a cascading menu, with menus below the top menu called sub-menus. This is still a very common design pattern used on many sites. If you use it, make sure you deal with the narrow mouse corridor issue (see: ux.stackexchange.com/questions/110932/…). Another common navigation pattern you might want to consider is called a mega-menu (nngroup.com/articles/mega-menus-work-well). – Jonathan Aug 17 '17 at 16:17
  • 18
    If you do implement this I strongly suggest only having one level of nested menus. Nothing makes me leave a site faster than having to carefully navigate my cursor between navs like the rest of the site is lava. – DasBeasto Aug 17 '17 at 18:45
  • 1
    I think they are bloody awefull. Mousing over one of these is extremly fragile. If you want to use them, at least make them resistant to minor changes in the cursor position or require a click to advance. – Clearer Aug 18 '17 at 12:05
  • An abomination. – R.. Aug 18 '17 at 19:10
30

In general, the main drawback to cascading menus is that there's only a narrow path you have to move your cursor along to go from menu to submenu to sub-submenu. (That is, you can't mouse in a straight line from a menu selection to the last item in its submenu. You have to mouse horizontally across the menu item then down inside the submenu.) It's too easy for the user to mouse off of that path and get a different, unwanted menu popping up. I'm sure this has happened to you. We hates it.

This is usually dealt with in three ways:

  1. Don't use cascading menus.
  2. Make the submenus appear after a hover delay. This allows users to stray off that path momentarily, but it makes the user slow down.
  3. Do this cool thing that Amazon did. They give users a wedge-shaped area that covers the user's likely paths from menu to submenu.
  • 13
    Wow, that "wedge-shaped area" is a little piece of fantastic UX design. – Dragomok Aug 17 '17 at 17:14
  • 2
    Although 3 is indeed pretty cool, please make sure to add proper keyboard support if you do it. Otherwise just stick with 1. – Stephan Bijzitter Aug 18 '17 at 0:23
  • 10
    That "cool thing that Amazon did" is actually what the Macintosh did for its pull-down menus way back in 1984. – Cody Gray Aug 18 '17 at 4:08
  • @Ken Mohnkern But the mega menu does have usability concerns. 1) Screen Size problems 2) Mega menus hide the information that’s under them. 3) With a mega menu, however, the user cannot scroll! For reference: raisedbyturtles.org/… Correct me if I'm wrong. – NB4 Aug 18 '17 at 4:17
  • This answer is based on a very specific assumption, namely, that submenus will open upon hovering over their parents, and close when the mouse selects another parent (or possible even just leaves the menu area). I agree this particular way of implementing a cascading menu is a severe UX annoyance. – O. R. Mapper Aug 18 '17 at 6:21
11

They are called Multi Level Dropdowns or Multi Level Menus

enter image description here

  • 1
    I think this is the most correct answer. – theonlygusti Aug 17 '17 at 20:18
8

They are known (by Mac OS Guidelines) as submenus.

A submenu is a menu item that operates as a menu, displaying a set of nested items when selected.

enter image description here

They provide some guidance for limiting the use of these, and some best practices.

Limit the depth and length of submenus. If you must include submenus, restrict them to a single level. If a submenu contains more than five items, consider giving it its own menu.

Material Design calls them cascading menus, as per @RCburns answer.

They are intended for desktop only.

Menu items can reveal nested submenus. Ideally, limit nesting to one level deep, as it can be difficult to navigate multiple nested submenus.

(Their own example shows 2 nested levels)

enter image description here

  • In my design, it will on hover instead of click. Similar to the way bookmark or above website image. – NB4 Aug 17 '17 at 13:01
  • That's fine; when they say 'selected' they are using a more generic term. The image they have in their documentation that I posted above shows the classic File menu, which reveals the subitems on hover. – Mike M Aug 17 '17 at 13:05
  • Is it good using this pattern in terms of usability for the dashboard design? – NB4 Aug 17 '17 at 13:07
  • Without knowing your use case and domain in depth, I can't provide the best answer. I enclosed a link to both material and mac guidelines. I would review those. You also might want to look up research articles from Nielsen Norman Group. They are a good resource. – Mike M Aug 17 '17 at 13:09
  • @NB4 its generally considered bad if you don't have many options, but a good use if you need to have many many options such as in most of these cases. It also allows a clear hierarchy of options, unlike some other options. – Rugnir Aug 17 '17 at 15:27
2

Using cascading menus (a.k.a. multi-level menus) is still a very common design pattern, but using 3 levels of nesting should generally be avoided, so you may want to consider using mega-menus.

It sounds like you're planning on having 3 nested menus, which goes against recommendations from both Apple and Google (as pointed out by @Mike M). A primary UX issue with cascading menus that activate on hover, as pointed out in @Ken Mohnkern's answer, is the narrow path for the mouse (sometimes called a narrow mouse corridor). There was an excellent discussion a few days ago that discusses this exact issue, and there are some additional resources there that may be of interest to you if you choose to use cascading menus.

Mega menus

Without knowing more about your information architecture, page layout, and other planned navigation, it's hard to make a concrete recommendation, but I suggest considering using mega menus. The NNGroup has shown that mega menus work well for site navigation. One of the big advantages of mega menus is that they allow you to show more information at a glance. Let's look at Amazon's top level navigation:

enter image description here

As you can see, it's a cascading menu, however, the only submenu is a mega menu. Things to note:

  • The top level menu clearly labelled what was going to appear in the submenu (Health, Beauty, & Grocery)
  • The submenu is a mega menu that contains two categories (Health & Beauty, and Grocery).
  • They used the mega menu to market their instant coupons using great typography and an attractive image. Unlike traditional cascading menus, mega menus afford the opportunity to add in additional design elements that can be used to market or promote related content.

When viewed on mobile, the menu is no longer presented as a mega menu, but a more common dropdown:

Amazon mobile menu - dropdown

Additional resources

If you do go with cascading menus, Smashing Magazine has an article on best practices for dropdown menu design. The article is from 2009, but contains some good advice which is still applicable. They have a more contemporary article which offers good practical advice on interaction design related to dropdown/cascading navigation. Design Modo also has an article on UX Design Tips for Dropdown Menus with more practical advice.

  • But the mega menu does have usability concerns. 1) Screen Size problems 2) Mega menus hide the information that’s under them. 3) With a mega menu, however, the user cannot scroll! For reference: raisedbyturtles.org/… Correct me if I'm wrong. – NB4 Aug 18 '17 at 4:19
  • My level 1 would be fixed. On hover, I'll be able to see 2nd level. For reference, I've added wireframe. – NB4 Aug 18 '17 at 4:29
  • Sorry I didn't get your point. – NB4 Aug 18 '17 at 5:37
  • Two levels of nesting like you've got here is more than the recommendations from most sources. Re: mega menu usability concerns (the article is quite dated); (1) Screen size can be an issue, but the same can be said of cascading menus. Degrade gracefully (I added a mobile screenshot for how Amazon deals). (2) This is true, but generally when people are looking at a menu, they're reading the menu, not what's underneath. Also, same can be said for cascading menus. (3) This article is pre-responsive design: if your menu isn't going to fit in the viewport, respond accordingly. – Jonathan Aug 18 '17 at 5:46
  • 1
    "A primary UX issue with cascading menus, as pointed out in @Ken Mohnkern's answer, is the narrow path for the mouse (sometimes called a narrow mouse corridor)." - but that is only true under the assumption that the menu relies on hovering for opening/closing sub-menus, rather than on clicks. – O. R. Mapper Aug 18 '17 at 6:23
1

I dont know its actual name but I have always called them cascading menus. In most cases I do my best to avoid them because it is very easy to loose the user. That said it is a pattern that Apple has used since the beginning for file navigation. The core idea behind this approach is that the user will know where to look for what ever item they are searching for and once they identify that item they dont need to remember where it was located in relationship to everything else.

You say that you are only taking it three levels deep, but how big is each level? If your levels contain too many items it can be just as bad as having too many levels.

  • each level can contain many items (for ex: 22) or in some cases, it may contain (for ex: 4) items. The number of items is not fixed. – NB4 Aug 17 '17 at 12:54
-2

They are also called "mega menus" http://www.vandelaydesign.com/mega-menus/ and can be used on both desktop and mobile devices https://www.npmjs.com/package/mobile-mega-menu

  • 1
    Multi-level dropdown and mega menus are not the same. – Tero Lahtinen Aug 18 '17 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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