Possible Duplicate:
How to structure Android app navigation with many levels?

What is the best way to present navigation with around 3 levels of sub-categories for mobile? The problem is that the user should be able to quickly navigate through different sub-categories. Also, list of sub-categories and sub-sub-categories can range from 0-20.

How do you take a lengthy side nav and efficiently "squeeze" it into mobile?

Edit: The best I've come up with is splitting the navigation into 2 parts:

  1. Main menu at the top
  2. A drop down with sub-sub-categories for fast switching.

This works for now, but I do not believe that this is the best solution for very dynamic content. =(

marked as duplicate by JonW May 5 '12 at 21:29


  • 1
    Is your question answered by this question's answers or do you have a more specific problem? – Ben Brocka Mar 28 '12 at 2:03
  • Do you need three levels? Could you perhaps flatten the hierarchy, or use a keyword filter approach instead? Of course, if the categories and sub-sub-categories are externally imposed (e.g. vendor or supplier product categories) then changing the hierarchy isn't an option. – Erics Apr 10 '12 at 3:28

Brad Frost wrote an excellent summary of the techniques for handling navigation on mobile. He analyses the pros and cons of each solution and gives many examples of websites that use these patterns.

Yet, I recommend taking into account Luke Wroblewski's advice on navigation for mobile:

As a general rule, content takes precedence over navigation on mobile. Whether people are checking on frequently updated data like stocks, news, or scores; looking up local information; or finding their way to articles through search or communication tools — they want immediate answers to their needs and not your site map.

Extract from the book 'Mobile First', by Luke Wroblewski


I would go with the drop-down. Your first idea, with the menu at the top, is OK only if you have a small number of menu items. Generally, I go with menus at the top only if I have max. 8, single-word menu items.


If I'm understanding your question correctly, you are designing for mobile use right? Have you considered using a UI Table View like apple does? Once selected it could slide over to the sub categories and have a "back" button on the upper left.

This will still work for a mobile website using Sencha Touch. It keeps the "feel" of an app while still being a mobile website.

  • That's pretty much what I concluded was the best option. – olya777 Apr 25 '12 at 20:10

I think it depends on the number of choices.

My favorite web database that has 845,281 records which can be searched by a dozen categories with buttons or text based search like google and you can ordered in minutes and have it shipped same day.

The sort and select capabilities are not surpassed with Ctrl and shift range options and also select icon and sort by cost with any defined stock on hand qty.

Any guesses? answer here.

and glimpse here with multiple expanded sub-groups opened here enter image description here

so it works on narrow mobile displays.

But DON'T make the sidebar slow. It should be quick categories not, content searched results


Users could swipe between the three sections or tap the header. Depending on how many releases you have you could certainly add a search or filter but this puts your content front and center and makes it easy to navigate through helpful chunks of each release.


download bmml source – Wireframes created with Balsamiq Mockups
