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.
- 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.
- 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.
- 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):
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?