I'm currently working on a site with a quite complex information architecture. The IA has 3 levels and each level can have up to 12 items.

  • Level 1: 4 items
  • Level 2: up to 12 items
  • Level 3: up to 9 items

On desktop, I'm using a mega dropdown (e.g. Mashable) and I need to adapt this for smaller screens and mobiles. I'm exploring concepts at the moment and have found this example: Multi-Level Push Menu

How would you solve this problem and what pattern would you use?

  • You gave Mashable as an example for the desktop menu. But you can take the mobile version as an example too, it has a simplified menu. Did you take a mobile friendly IA into account? Or is it simply impossible to avoid confronting people on their way with lots of options on a small screen?
    – jazZRo
    May 4, 2015 at 8:40

2 Answers 2


Another pattern to consider is a multi-step toggle, as illustrated here: http://codepen.io/bradfrost/full/qwJvF from the excellent This is Responsive resource. Another interesting idea is to skip the subnav entirely.

I've been trying to keep tabs on this problem too, so perhaps these will be relevant to you:

Really, whatever you choose should be informed by usability testing/hallway testing/whatever you can afford to do.

A parting thought: "Obvious always wins."

enter image description here

  • Good last point and although it pretty much is in that case, "Obvious" isn't always as obvious to everyone in the same way.
    – Andree
    May 29, 2015 at 17:38

jazZRo took the words off my keyboard. I was going to suggest looking at what Mashable do in a responsive view to see what their solution is.

I have recently spotted a clever alternative that Apple (http://www.apple.com/) have done - note you should open this on a mobile device to view it properly - where they still keep all the top level items but you can rotate through them all without having to re-structure the nav.

As an alternative to the high level, the site for the Rugby world cup uses a collapsible sidebar (Microsoft Azure uses this for their navigation where each item opens another item next to it)Microsoft Azure

I think their argument would fall under the lines of when a user is focusing on the nav, the rest of the page becomes less important.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.