0

I have a compact vertical menu that's app-drawer style. It works really well since I only need the menu for basic navigation but need it small otherwise, but it has a navigation visualization issue.

My navigation is setup like:

Top Menu Item 1
     Sub-menu item 1
     Sub-menu item 2
Top Menu Item 2
     Sub-menu item 1

and so on. All are dynamically named and assorted. Therefore a user has to select a initial option before the other items can be shown. But once a user selects a top-menu item they rarely navigate to another item. Currently I have it setup where the first item is 'top' level selector and then after that the items appear below.

Collapsed

enter image description here

Top Expanded

enter image description here

Secondary Expanded

enter image description here

Another option top level selected

enter image description here

Note here the DEM changed to PRIV to represent the secondary options for the Privacy Incident and Policy Management space.

So, do you think this is a good way to illustrate the navigation? Do you think users will get lost in the initial selection? Do you have a better concept?

Additional thoughts: I thought about having the top level items be the first set of items on the space and then hovering would show the secondary items but because once a user selects a top level its rare that they change and then thats just more clicks to get to the action they want to perform.

Improve this question
2
  • 1
    I'm not sure if this is all web-based system or not, however if this is a desktop site / app then reducing the menu down to a menu icon is not an advised option to take. If it's a mobile menu then your additional thought of hovering to show secondary items isn't going to be possible (and on desktop sites using hover to reveal content isn't very accessible either as it assumes all users browse with a mouse)
    – JonW ♦
    Feb 19, 2014 at 14:59
  • @JonW - Its web-based desktop. Its hover/click/tap to show secondary. Do you have a better suggestion?
    – amcdnl
    Feb 19, 2014 at 15:14

2 Answers 2

Reset to default
1

I was looking at multi-level push menus over at Codrops. Demo 3 looks like a good solution.

Demo 3: Overlapping levels with back links This menu will open by pushing the website content to the right. It has multi-level functionality, allowing endless nesting of navigation elements. The next level can optionally overlap or cover the previous one.

Improve this answer
1
  • I do REALLY like that and thats what I started off with but I've heard feedback from others that some users just dont get the level approach like that.
    – amcdnl
    Feb 21, 2014 at 20:29
0

I would offer hamburger button + accordion inside:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.