In our new product we have several pages grouped into several categories. One of those categories is more important than the rest. Moreover, we have relatively a small number of pages and categories (and no, we would not have more in the future, since this is a "lean" version of a fuller and richer app).

I am wondering how to spread the different options on the vertical nav-bar we have. Note that when hovering over the menu's buttons, a label expands to the right, and sometimes also sub-menu next to it.

  1. We could show only the categories, and under each, expand a sub-menu that shows all the corresponding pages. This alternative leaves us with a minimal menu.
  2. The other extreme is to spread all the pages, and group the options according to their category (and also color-code). This makes the nav-bar too long.
  3. The middle alternative is to show only the pages of the important category, and leave all the other categories inside a sub-menu.

See the following illustrations of the three alternatives (the first with the buttons only, and the other two expanded):

enter image description here enter image description here enter image description here

I really think that alternative 3 strikes the right balance. I just don't know if that will confuse users to see one category of pages spread out, and the rest hidden under a sub-menu. Do you think it is acceptable?

2 Answers 2


http://dev.sencha.com/deploy/touch/examples/production/kitchensink/ seems to show a good attitude to nested items on a menu. Try clicking 'user interface'.

Also, add a 'more' button for the lesser used pages, and reduce a need for many categories.

  • I don't understand how this related to my question. Can you elaborate?
    – Dvir Adler
    Feb 20, 2013 at 15:46
  • It shows a reasonable hierachy method of display, and appropriate limitations.
    – ir-g
    Feb 21, 2013 at 11:10

You're not all that far out - I think I got your idea. But I would like to place sub menu items in an accordion menu instead to make it easier for the user. As it is now - one can't tell the difference between category items and category.


download bmml source – Wireframes created with Balsamiq Mockups

  • My original ambition was to expose the options in the first level. Is this achieved by having the first section of the accordion open by default? Does this mean that the options of the second category are hidden?
    – Dvir Adler
    Mar 15, 2013 at 10:23
  • @DvirAdler Yes and yes. I took the inspiration from your images which lead me to the design on the left as default. Jou can set any catogory as deafult open in an accordion, maybe controled by a coockie if you want the users to quickly find where they where previously. Mar 15, 2013 at 10:37

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.