Current scenario:

I've a webapp, in which there is a left sidebar. There are some menuItems and subMenuItems in sidebar. This hierarchy can go to N level.

enter image description here

New Requirement:

Now There can be multiple programs in this application. User can switch program at any time. Each program has some menuAreas. User can also switch between menuAreas. Each menuArea has its own list of menuItems (and subMenuItems in hierarchy). At a time, User can only see menuItems for selected program and menuArea. These menuItems should appear at same place where current menuItems appear.

Can anyone suggest UX for this scenario? (If possible, also for small touch devices)

  • How does programs and menus correlate? Can user view multiple programs at the same time? Nov 29, 2019 at 5:51
  • Programs can be considered same as SubSites as described by @QWERTZdenker, and cannot be viewed at same time. List of Menuareas can be seen but user can view Menus of only selected MenuArea. Nov 29, 2019 at 8:18

6 Answers 6


I would like to suggest to revamp your current flow if it still in the design process.

The sidebar is useful when you have two levels of hierarchy. For the three-level hierarchy, I recommended put the primary menu in the header. Browsing to many things in the same navbar maybe serves a monotonous experience for your users.

enter image description here

  • Tertiary navigation or tabs are already there on the main working page. They are independent of sidebar menuitems. So three level hierarchy are : Program (or subsites) - MenuArea - MenuItem (and of course MenuItem can have subMenuItems) Nov 27, 2019 at 14:51
  • We will help you better if you provide the actual screenshot, as per your current attached screenshot no one get the idea how complex hierarchy the product have.
    – Rishi Shah
    Nov 28, 2019 at 5:01
  • The design given in question is nearly same as screenshot. Current design is not that complex, Just menus and submenus. But new requirement is complex, and I want suggestions of designs with new requirement. Nov 29, 2019 at 8:13

You can have different menuArea somewhere around the menuItems and submenuItems. A good option would be creating a dropdown icon just beside the name of the menu on the header menu.

Another option would be to create a side bar that contains names of header just like the slack app (picture below).enter image description here

  • I did not like this idea much, as it increase sidebar area and hence decrease main working area. Nov 27, 2019 at 12:53
  • It is actually built such that you can increase or reduce the width of the sidebar. Different folks different strokes.
    – Wurah
    Nov 27, 2019 at 12:56

If I understood you correctly, you are speaking about universal navigation, that allows the user to switch between several subsites (or "programs"), while each subsite has its own menu.

The StackExchange Network is a prominent example for this kind of hierarchical navigation:

enter image description here

It provides a sidebar for navigation within the current page (UX) and a topbar navigation for universal controls.

To find out more about this topic, I recommend this article by the Nielsen Norman Group, as it covers main issues as well as design guidelines for universal navigations.

  • This covers programs or subsites design, What about "menuArea" concept? Nov 27, 2019 at 12:49

Auto trigger a collapse of menu items with dropdowns... I believe auto collapsing is a common design pattern with labels of the current Menu items that the user is working on?


What I understand from your question is that you have an app which is acting as a platform app to which users can login and then from with in navigate to other small apps or modules. These all individual programs/apps/modules would be having their own independent n-level hierarchal menu? When a user want to switch to other program/app, respective menu items should be populated at the fixed menu area?

So I think we need to provide 2 things here

  1. An accessible common area to select programs/apps
  2. Fixed MenuArea with a capability to show n-level menu hierarchy

If the above assumption is true then my solution to this problem follows

enter image description here

I hope the above solution helps!


A pattern we use is a collapsible side nav. So you have a main nav when clicking on an item, if it has a secondary level not all do, then the primary nav minimises to the left with icons only and a secondary side nav opens. Clicking a primary icon closes the secondary re-opening the primary side.

Updated to include images

This is the main navigation

main navigation

Then when navigating to settings the main nav is minimised and a secondary side nav is introduced:

secondary side navigation

  • It seems it is same as suggested by @Wurah. I would get better idea if you can provide a screenshot or dummy design. Nov 29, 2019 at 8:10
  • @RudrikAndharia I have added screen shots as requested.
    – Gurnard
    Nov 29, 2019 at 14:05

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.