How to design multi-level navigation menus for web and apps

Question

We're creating some applications that need a multi-level menu navigation. This navigation menu should be presented in these environments:

1. Web (large browsers)
2. Web (responsive for devices)
3. Android app
4. iOS app
5. Possibly Windows Phone

We're stuck at deciding how to represent this navigation model across devices and platforms. Is there any best practice?

Update: One solution is:

Create a waterfall-like drop-down menus for web portals
Create a breadcrumb-like navigation for devices
Create a nested-accordion Android navigation drawer
For iOS, we're truly stuck.

Answer 1

You can always try the MultiLevel Push Menu which works fine for all the devices you mention and has very clear and easy to follow hierarchies.

Additionally, you could also use Responsive Multilevel Menu which is more or less the same, only that not taking the whole vertical space

Answer 2

Here is the example of IOS menu design : Hope it will help you.

Answer 3

A couple of suggestions:

• consider the acceptable level of information density for your target audience(s). Basically too many navigation levels on the same page are useful for those who are going to visit the same interface over and over again. That is people, who would have the time to learn it anyway and after that would need to have everything immediately reachable on the same page. If you expect users to come and go, then you'd better invest in navigation consisting in more but easier steps (e.g. many pages of progressive disclosure);

• keep navigation on the left, based on this hypothesis: https://psychology.stackexchange.com/questions/2056/any-research-on-right-hand-left-hand-based-preferences-when-interacting-with-an