1

Collapsed side menu

I'm designing a dashboard with a side menu that can collapse and expand using the icon at the top, because we need the horizontal space.

So the user can interact with the collapsed menu and go to a new page by clicking on any of the menu icons.

The problem I'm having is that some of the menu items have sub-items, which will not be visible in the collapsed state. How do I allow the user to select one of those sub-items while the menu is in a collapsed state? Any best practices here? I thought of using a tooltip on hover but that seems like a clunky method to me.

1

I don't know about "best" practices, but I've seen some related patterns in the wild.

First that came to mind was Shopify.
enter image description here

Their first level menu collapses. It opens again on hover with a delay.
Personally, I think this pattern feels a little buggy. I often loose context when trying to look around. I still have that problem and I've spend countless hours on Shopify's dashboard and am an experienced web user.

I might have some suggestions for you, based on other things I've seen.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I hope this helps.

  • Thanks for your insight. The Shopify method was actually my first iteration. The rest of the team didn't like it, for the exact reason you mentioned. The sidebar with icons isn't an option for me because the items in the menu are nearly impossible to create icons for, so it'll have to be text. The text at the top also isn't really an option because we're using that space for tabs. Here's my current idea: clicking or hovering a menu item that has sub-items shows this: i.gyazo.com/6bedf078c9e1ed3e0b87fa95b59af9c3.png – Jasper Mar 9 '17 at 14:35
  • If it's hard to create icons for menu your solution on clicking or hover might be best. I see no other solution for showing text links within your constraints. – Paul van den Dool Mar 9 '17 at 14:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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