I have an app that I am creating for a customer that at some points has 6 levels of navigation. Basically our user wants to select an item from a navigation. that will lead to another set of navigation, that will lead to another set of navigation and so on until you are 6 levels deep in on navigation property.

Some of the menu items do not go that far some in fact do not have sub menu's.

To make matters even more complicated some of the links are required to have descriptions of what report the link leads to. The caveat here is that some of the descriptions are 15 lines long, basically huge paragraphs of text.

I have tried the on hover open the sub menu but when you get down to the sixth level if you move your mouse a hair too much your going back in and treeing them out again.

I tried the accordian method from twitter boostrap but that didn't work because on the 6 level menu's most of the navigation was pushed off the page.

I tried using xml to populate dropdown lists where basically the user would click a link and the "sublinks" would appear in a partial view with a dropdown list. and that continued until you were at the lowest level. The problem is I run out of screen real estate with 6 drop down lists and a description.

Anyone have any suggestions on what else I can do with an app like this?

2 Answers 2


I cannot add this as a comment to your question;
You gave scrollers a shot ? You could basically use horizontal and vertical scrollers in any of the scenarios you mention. To make it aesthetic instead of scrollbars like on windows you could display arrows like >,^,<, inverted ^ on the menu borders and on mouse over scroll in the mouse overed direction.
One other way could be to display the navigation as trees in the hover window ?

  • I tried the tree version by the time I get down to the last level the roots are almost as big as the page itself. As for the scrollers I don't think that is the best option. If you have to use a scroll bar in the nav section then it seems to me like there would be a better option
    – Robert
    Commented Mar 14, 2013 at 18:18

I assume you're talking about a responsive web app since you mention Bootstrap.

What about making the description text available only if the user needs it. That will save you some space and reduce information overload. Something like this:

YourMenuItem (i) where (i) shows a tooltip/drawer on click/tap.

Also, you should provide your users to go back quickly to any root section at any time with a breadcrumb. Ideally clicking on each link of the breadcrumb could load a list of page, a little bit like windows explorer but with a simpler implementation.

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.