How to display sub menus on mobile?

Question

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:

Answer 1

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:

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

Answer 2

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/

Answer 3

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.