3

I have a nav menu in a mobile site I'm developing. I'm wondering what would be the best way to distinguish parents from the sub menus. The sub menus can go on forever, so I need to distinguish the entire hierarchy, no matter how complex. I was thinking of darkening the color, but if that's the case, it would darken until it's black. Also, I don't know how to implement that through CSS, to make it darker automatically, no matter how deep the level of the dropdown.

Here's an image to help better understand: enter image description here

1
  • 3
    Seems you should reconsider your IA, rather then bury your user with submenus. Jun 8, 2016 at 2:16

3 Answers 3

2

If there's no way to get around submenus, the key is to provide a clear visual difference between levels and making it clear which main menu the submenu corresponds to. There's probably a million different ways you could do that, but the most common tend to involve changes in:

  • Indentation
  • Color
  • Font size, weight, or family
  • Spacing/delimiters
  • Casing

In your example above, the changes are too subtle to provide a clear indication of menu hierarchy. Here's an example that provides a clearer differentiation between levels which uses a combination of the above approaches:

example

Now, this example isn't infinitely scaleable, but a properly designed information architecture should not really require much more hierarchy than this.

1

This article outlines the most common mobile navigation patterns and should help you choose the right navigation approach for your scenario:

https://www.nngroup.com/articles/mobile-navigation-patterns/

1

If the sub-categories are not more than 2 in each category then show it upfront, by placing category as title. This way you will not confuse the user and also you are not hiding the information. But if you have more category with sub-categories then you have to find a work around on IA.

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.