I got stuck with dealing making two sidebars for mobile screens. How I can make responsive to display nice on mobile? Maybe it's some pattern?enter image description here


  • If i understood you well, Your "SubLink" are based on "Link" right?
    – divy3993
    Jul 13, 2016 at 5:07
  • The sublinks change based on active 'Link" Right? Something like this.
    – divy3993
    Jul 13, 2016 at 5:13

3 Answers 3


Two usable options come to mind.

1. Accordion menus

accordion navigation

2. Sliding panels

Sliding panel navigation


I create a little prototype to deal with this situation on devices with little space. You can find it here http://5rsg1w.axshare.com/

  1. First you show your users a Menu-Button
  2. Then the first level navigation apear
  3. After clicking on one of the link the user will see the second navigation
  4. Then the user can click on the link 1 or on one link of the second level navigation


The dissadvantage here is: the user have to click twice to reach a link on the first level navigation. You can improve this by adding a splitbutton-pattern on each link:

  1. “Link to this target”-Link
  2. “To next deeper level”-Link


This example is shown on the second page of the demo.


Can you elaborate more ? Are you seeking an answer from
user-experience/programming perspective ?

If programming, then you should search for three column layout design such as

This or This

enter image description here

Additionally, if you really want to see more creative and clean design of the sidebar while learning how to structure your web application and other great tricks.Check this codyhouse. They have implemented a clean, user-friend and responsive sidebar (Demo) and (source-code).

Hope this useful.

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.