so I am designing a device manager with a two-level side navbar, where the second level is constantly showing while the top level is hidden. I am having trouble deciding on how to design the expand/collapse section of the menu.

In option 1, the chevrons on the "Device 1" button look like they are linked to "Device 1" rather than the top level menu. In my image with option 1 expanded, for example, I would expect the chevrons to close the second level menu and not the top level menu as intended.

Option 1 Collapsed Option 1 Expanded

Option 2 gives the chevrons the different background than the "Device 1" button to indicate that it does not relate to the second level menu, however I do not like the way to UI looks. Option 2 Collapsed Option 2 Expanded

I am leaning towards option 2 because the chevrons match the color of the level that it will be affecting, however I am biased about the UI looking awkward. Will option 2 cause user confusion? Also is there another method that I am missing?

1 Answer 1


I agree, option 2 UI is little awkward and may cause some confusion. I did a bit of research and found a third option that might suit your needs of having multi-level navbar.

Source: https://www.jqueryscript.net/menu/Multi-Level-Sidebar-Menu-HC-MobileNav.html

Demo: https://www.jqueryscript.net/demo/Multi-Level-Sidebar-Menu-HC-MobileNav/

YT: https://www.youtube.com/watch?v=hUGGwhpvPZM&t=61s

There are also many other options from that source that you could consdier.

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.