dear community members! I'm currently working on the solution and have a need to make a blue menu expandable and collapsible. Probably someone has good examples on this pattern? Here is how this is implemented now. enter image description here

3 Answers 3


Standard hamburger icon for menu should do. And for closing it, "X" icon seems more appropriate than this chevron up icon you have now.
Otherwise this you have seems good

  • Thank you so much for the answer, also landed on the hamburger Nov 18, 2019 at 9:19
  • Also clickable area of "closing" icon for the menu, in the upper right corner, should have same clickable width as icons to the left, user, question, and chat... Now seems much narrower
    – xul
    Nov 18, 2019 at 9:29

Your solution is not a common pattern. My take on this would be to have a label with the down arrow.


Name it depending on whats are the links under the menu. this way it'll be more visible and users will know what to expect when they hover/click it.


Both choices are great! hamburger vs Text with arrow the decision should be based on how much do you want user to see them

the better option in my opinion is to go with text with arrow and use hamburger on Mobile

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.