How to display two sidebars on mobile?

by Hola   Last Updated July 13, 2016 08:06 AM

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


Answers 3

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.

Serag Alzentani
Serag Alzentani
July 13, 2016 04:48 AM

I create a little prototype to deal with this situation on devices with little space. You can find it here

  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.

July 13, 2016 05:06 AM

Two usable options come to mind.

1. Accordion menus

accordion navigation

2. Sliding panels

Sliding panel navigation

July 13, 2016 05:57 AM

Related Questions

Best way to create responsive sidebar content

Updated April 14, 2016 09:06 AM

How do I tweak this layout for mobile?

Updated January 15, 2018 10:16 AM