Best practice for collapsible submenus?

Question

I have a website navigational menu:

• Lorem
• Ipsum <
  • Situs
    • Pratius
    • Quisque
  • Dolor
• Duis
• Proin <
  • Folios
    • Artius
    • Zalto
  • Ramo
• Neque

What should be the best practice for users; if a user opens up the Ipsum submenu, then opens up the Proin submenu, should the Ipsum submenu close before the Folios submenu opens up, or should it leave the previous open one and simply open up the new one?

Also, are there any scenarios in which the user would want to have a list of collapsable submenus that would open up without closing the sibling submenus?

Answer 1

"It doesn’t matter how good your website is if users can’t find their way around it."
- By jerrycao

Continuing with my answer posted just a day before. I stated that collapse menu's are better, and also gave some valid reasons.

Note: Please read my previous answer(linked above), come back and continue here.

Now talking about your case, I would like to extend the answer for you.

Everything stated in previous answer was why it was good to have collapse menu from users point of view. Everything goes same for your case too, but you have SUB-SUB Menu. It actually depends on design and changes based on device's width.

The Extended Answer...

Considering 3 device width's(it's "just" 3 could be more):

• Desktop/PC
• Tablet
• Mobile

Best practice on all three types is:

• To have collapsible functionality like previous one collapses when any other opened for Parent-Menu in any width's of device(Large to Very-Small).

• While for SUB Menu it would depend on design and device width's. You could allow them to have same functionality as parent does in device with small width's. But on device with large width's it's fine if the previous one doesn't collapse.

^{download bmml source – Wireframes created with Balsamiq Mockups}

REASON:

• Some time it's required that according to design or if there are lots of SUB Menu links, in that case it's better to let SUB Menu remain open.

• Example: Like user searching for some particular link (mostly happens in Admin Panel's). User would be distracted if that time collapsing happen as users' main goal is to find something.

• But again in mobile(small width) devices it's too much for users to do if they wouldn't collapse. As they have to find and scroll and stay focused for what they are looking for.

• Also from developers point of view, there may be a chance that application has more pages in future, which happens to have more links.

---

Conclusion: Collapsing previous one had been the best practice from all point of view, i.e. Developers, Designers and Users. Again lastly it all depends on you how you want users to sail.

"You are the captain of your ship, don't make it hard for sailors to sail with you."

Answer 2

Provide them shortcuts for expand/collapse all, then let them organize it from there (unless there's some explicit reason for them not to be able to expand multiple siblings concurrently).

Answer 3

I've found that letting users choose when tabs open and closed is best, so I would leave it up to the user to collapse one menu, even when following a link in another menu. A scenario describing why would include users who might be navigating through different parts of the site multiple times. If I want to go to the pratius page, then artius, them to quisique, it could be done in two ways.

If you let the users choose which collapsible menus stay open or closed, a navigation between two main sections can look something like this:

Ipsum > Situs > Pratius > Proin > Folios > Artius > Quisique

However, if it were formatted in a way that Ipsum closes when I navigate to Proin, the navigation would look something like this:

Ipsum > Situs > Pratius > Proin > Folios > Artius > Ipsum > Situs> Quisique

It doesn't seem like much more than the first one, but depending on the depth of the site and how much a user might switch between "folders," this can become daunting.

Answer 4

In 99% of the cases you don't need to keep multiple parent items expanded at once. Moreover, it is advisable not to do so, as you don't want the user to get confused about her current location on your website and eventually get lost.

And yes, there are scenarios in which you would want to have all the items expanding without collapsing their siblings. Such cases are when one might want to: - rearrange the items via e.g. drag and drop - list grouped items (think of files and folders or people and teams) - show the whole navigation structure - e.g. sitemap

Yet, for the purpose of a simple website navigation those are not applicable.

Answer 5

From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

drop-down navigation menus can be user-friendly. Recently Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

Best Practices Drop-down menus do in fact organize content into small, uncluttered elements, but if not done correctly, they can be just as bad as a messy layout.

Avoid a Drop-Down with More than Two Levels

Option 1: Hover Menu Basically, there are two ways to approach the drop-down menu: with either a hover or a click to activate the menu. From a design and convenience standpoint, a hover menu is better.

Option 2: Clickable Menu On the other hand, many will argue that a clickable menu is better because it is much more usable. Reason? Because of the way a hover menu is constructed, the user has to have the pointer over the menu at all times. If the user loses focus of the hover menu, it closes. Therefore, it is better to go with a drop-down menu that is activated by clicking a button, then deactivated by clicking the button once more.

Reference: https://www.smashingmagazine.com/2009/03/designing-drop-down-menus-examples-and-best-practices/