On a website using a layout with main content to the left and a right sidebar, I would like to add a button to show/hide sidebar to maximize the main content (see image below).

enter image description here

Another option would be to show the sidebar upon hovering over the button/sidebar area.

Any suggestions? I think the second option could be better, but I am not sure.

  • In the era of touch screens, do not rely on hover interactions.
    – DA01
    Mar 20, 2014 at 5:32

3 Answers 3


I've seen a very nice implementation of this idea in Adobe Lightroom and in case you don't have the app, I can try to explain it to you. Internally, we are also in the process of implementing this idea in one of our applications to make more room for the user.

Below you will see the Lightroom screenshot. Look at the middle left of the screen at the arrow icon facing out, just to the left of the "Folders" and "Catalog" expanders.

enter image description here

What Adobe did was allow the user to make more room for the middle of the screen by allowing the user to collapse the left navigation options. What they did that was really nice though was besides the show state or hide state, when the user clicks it to hide, the arrow switches to a dotted/lighter arrow that has a new behavior—on the new behavior, just on hover, the navigation flies back out and disappears onMouseOff. If they want it locked back in place, they click the arrow again and it pops back out. This really helps users who are on laptops or smaller screens.

Linda has a good point though in regards to responsive design as well. If it's just a site showing information and they aren't moving through it without interacting with that show/hide section, you could handle it differently. If they are interacting with it a lot, like in an application, giving them the ability to hide, bring it back onHover or by clicking, is a nice option for those with smaller real estate or if a user wants to focus and remove visual distractions.

Hope some of that is helpful.

  • On my edit: No offense brother but signatures are not necessary on this site :) Mar 19, 2014 at 21:17
  • 1
    Whoops. My bad. :)
    – Charles
    Mar 19, 2014 at 21:18

Is this an issue of screen real estate? If you expect users to access your site from multiple devices, you could use a responsive pattern that only shows the sidebar when there is enough room for it. Here is an example of this responsive pattern, and here is the landing page for a collection of responsive patterns. These patterns adjust the content dynamically when the page renders at different screen sizes. You can see them in action by adjusting the size of your browser window.


I suggest going for option 1, using a button to toggle the sidebar.

Since toggling the sidebar on or off changes the layout of your site, it can be fairly annoying for the user, if it changes without their consent.
Imagine reading an article, when suddenly the layout changes and the text shifts, just because your mouse wandered to the hover area.
I've created a mockup of your site design using option 1. If you scroll a bit and then toggle the visibility of the sidebar (by pressing the button on the right), you'll notice the text shifts quite a bit.

Additionally, hover related actions are incredibly difficult to pull off on a touchscreen. By showing the sidebar on hover, you effectively restrict the user's ability to navigate through your site properly, using a smartphone or tablet.

About toggling the visibility of the sidebar:

If you were looking at the mockup on a large screen, you'll notice the text can be a bit painful to read due to the length of each line.
Since your design shows the content being delivered on multiple columns, as opposed to only a single one as in my mockup, you are probably aware of the fact that too much text on a single line can be uncomfortable to read.

What you could do, is design a single-column view for mobiles, with the sidebar collapsed and expandable through a button click, and increase the number of columns on bigger screens, with the sidebar always visible and non-collapsable.

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.