0

What is the best form/ position for a submenu in a website, a dropdown for the menu item, a list in a sidebar or a second nav bar?

  • 1
    As with many UI / UX questions, there isn't necessarily a 'one size fits all' answer and this sort of question especially requires more context. – William Anderson Jul 10 '17 at 15:27
3

TL;DR:

  • Don't make users scroll, and make it as visible as possible.
    • Second navigation bar for a small number of items.
    • Side bar for a medium number of items.
    • Mega-menus for a sub-menu with a number of categories.
  • Mobile navigation is too broad of a subject to address.

Second navigation bar for a small number of items

The Nielsen Group regularly notes that:

Hiding content behind navigation diminishes people’s awareness of it.

This is mirrored by Don Norman in the Design of Everyday Things, who says:

In each state of the system, the user must readily see and be able to do the allowable actions. The visibility acts as a suggestion reminding the user of the possibilities.

So if possible, don't hide your navigation.

Use a form of navigation which makes the user's options immediately visible, such as a second navigation bar.

An added advantage is that the user will also have fewer types of navigation to contend with.


Side-bar for a medium number of items

If you can't fit your items on a second navigation bar, the next best thing is a side-bar.

But only if your users won't need to scroll to see the items at the bottom.

If they do, a mega-menu might be more suitable.


Mega-menus for a large number of items

It's sometimes not possible to show all items.

Nielsen and Li (March 2017) describe in detail why mega-menus work so well for categorised navigation with a large number of items.

They summarise by saying:

Large, rectangular menus group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices.

They also note the advantages over a standard drop-down menu:

  • For bigger sites with many features, regular dropdown menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain, and (b) scrolling hides the options at the top of the menu. As a result, you can't visually compare all your choices; you have to rely on short-term memory.

  • Mega menus let you visually emphasize relationships among items. This again helps users understand their choices.

  • Mega menus make it easy to use pictures and icons when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).


How about mobile?

I've intentionally not addressed mobile because it's a very broad area to cover.

For those wanting to delve into it, here's some great places to start:

| improve this answer | |
  • Thanks for your detailed answer. I don't see any reference about sidebars. What do you think about this option? I fact, I need to redesign a website that has submenus as dropdowns, but also in the sidebar. For me, the choice was, at the beginning, the second nav, but I wanted to see more opinions. – Madalina Taina Jul 10 '17 at 17:32
  • 1
    @MadalinaTaina If you can implement the sidebar without needing the user to scroll to see the bottom items, I would favour it to a mega-menu as it'll improve visibility. But if you can fit it on a second navigation bar, do so. Then the user will have fewer types of navigation to contend with. – Joel Tebbett Jul 10 '17 at 17:57
  • Can you update the answer and insert a reference to sidebars, like in your comment, please? The comment was more clarifying for me, more accurate. Thanks. – Madalina Taina Jul 11 '17 at 8:31
  • 1
    @MadalinaTaina Thanks for the feedback, I've added a section regarding side-bars to my answer. – Joel Tebbett Jul 11 '17 at 8:47

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