Navigation hierarchy: categories next to single items at the top-level

Question

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

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?

Answer 1

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.

Answer 2

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}