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?

Improve this question
5
  • 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, 2017 at 16:17
  • 19
    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, 2017 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, 2017 at 12:05
  • 1
    An abomination.
    – R.. GitHub STOP HELPING ICE
    Aug 18, 2017 at 19:10
  • I think I've heard it being called "menu diving" or something like that?
    – User1974
    Apr 12 at 4:45

6 Answers 6

Reset to default
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.
Improve this answer
9
  • 13
    Wow, that "wedge-shaped area" is a little piece of fantastic UX design.
    – Dragomok
    Aug 17, 2017 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, 2017 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 - on strike
    Aug 18, 2017 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, 2017 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, 2017 at 6:21
11

They are called Multi Level Dropdowns or Multi Level Menus

enter image description here

Improve this answer
1
  • 1
    I think this is the most correct answer.
    – theonlygusti
    Aug 17, 2017 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

Improve this answer
5
  • In my design, it will on hover instead of click. Similar to the way bookmark or above website image.
    – NB4
    Aug 17, 2017 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, 2017 at 13:05
  • Is it good using this pattern in terms of usability for the dashboard design?
    – NB4
    Aug 17, 2017 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, 2017 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, 2017 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.

Improve this answer
9
  • 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, 2017 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, 2017 at 4:29
  • Sorry I didn't get your point.
    – NB4
    Aug 18, 2017 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, 2017 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, 2017 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.

Improve this answer
1
  • 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, 2017 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

Improve this answer
1
  • 1
    Multi-level dropdown and mega menus are not the same.
    – Tero Lahtinen
    Aug 18, 2017 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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