We have a framework with multiple plugins (for different functionality). Each plugin has it's own configuration/information pages. These pages also have sub levels; sometimes up to four level. If we consider each plugin as a tab in an application, each tab has been divided to sub level tabs again and so on. Also we want to display more than one plugin pages simultaneously. Can anyone please suggest an idea on how to design these pages and improve the usability and accessibility?

Sample layout

  • 4
    What does your current layout look like? Can you provide a sketch / mockup? (Just upload to imgur and leave a link to it so we can add it inline to your question).
    – JonW
    Jan 29, 2013 at 11:44
  • Sample layout image is uploaded to imgur and the link is provided. Kindly check.
    – user25319
    Jan 30, 2013 at 5:22
  • Inlined the samle image.
    – André
    Jan 31, 2013 at 9:07

3 Answers 3


If the number of levels are unknown, or just potentially very deep, then consider using breadcrumb navigation, where each item in said breadcrumb is a drop-down menu itself. E.G.:

Home > Plugin > Page > Subpage > Page settings > Confirm page

If, for example, you hover over "Plugin", you would get a drop-down as such:

Home > Plugin 1 > Page > Subpage > Page settings > Confirm page
       Plugin 1
       Plugin 2
       Plugin 3

And for other breadcrumb elements, where it applies, you could do the same:

Home > Plugin > Page 1 > Subpage > Page settings > Confirm page
                Page 1
                Page 2
                Page 3
                Page 4

Et cetera.

  • On mouseover/hover of the breadcrumb item, give the user an indicator of whether there are items below it;
  • Repeat the current breadcrumb item to allow the user to jump back to that level, if at all possible;
  • If items in the breadcrumb are filters, you might want to add an option to remove the filter from your results;
  • The last item in the breadcrumb is the current page being displayed, always make sure this is not a link and doesn't behave as such to properly indicate this fact.

Also we want to display more than one plugin pages simultaneously.

Bad idea in my opinion, but if you really need to you could simply open the plugin in a new window/tab (also a bad idea) or position the two plugins side-by-side... which obviously leads to issues when the user's screen resolution is too low.

If technically feasible, allow a link to be opened inside a modal window that can be dragged around. But keep things simple, usually you don't want to overload users with too much information. If they really need to, they'll just have to open the plugin in a new browser window.

  • Thank you for the reply. As per the current specification the maximum number of level is four. Regarding simultaneous display of more than one plugin; user may need to check the data from one plugin to enter some data in another plugin. That is why multiple plugins need to be displayed at the same time.
    – user25319
    Feb 4, 2013 at 9:39

I am still a little confused as to how "deep" your application will go but after a certain number of levels your navigation is going to get bigger and the space dedicated to content smaller.

Old software was often like this, you would burrow deeper and deeper until you found the setting you needed. All sub sections were still visible and still accessible.

The thing is that the user often doesn't need to access every part of the application at any given time.

How about breadcrumbing once you start getting really deep into settings?


Currently, web seems to steer away from tabbed navigation to prefer in-page navigation. This would be my recommendation to you. Use one large page per plugin, and ways to navigate within the page.

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.