I've been constructing a page with a fixed sidebar, that has lot of info placed into collapsed accordions.When user remains at the top of the page ,all is well, he can expand the accordions ,say 5 and peruse the contents.

But when user has scrolled down to the bottom of the page, expanding the accordions is a bit tricky as they tend to overflow the parent page.

What will be the best experience in this case?

  1. Scrollbar inside the sidebar ?.
  2. Collapsing all the accordions and hiding the (+) icon of accordion.?

Any other options are welcome too, as i feel the sidebar which contains the summary is an equally important piece in the page.

  • This is very common in e-commerce catalog pages where filters are used. both experiences could be combined as well.
    – Blue Ocean
    Commented Nov 24, 2015 at 9:33

4 Answers 4


Check out the new Angular 2.0 Page .

If i caught your problem correctly, above approach is the best solution for the user experience. A fixed navigation like system on the left that acts like an accordion, on click of each element on the left side pane you can load the contents dynamically on the space on the right which can be scrolled.

If there are very large number of items on the left pane , you can make that scrollable too and add a search at the top to find each category. So that every content is easily accessible to the user without much hassle.

Here is a screenshot of the same.

enter image description here

  • These are accordions, but if you open one and then another, the previous one doesn't close, it stays open.
    – Legends
    Commented Dec 16, 2019 at 13:30

If you're going to keep the accordian menu, have it so that when one accordian opens the previous one closes to optimise space. Try to avoid a scroll at all cost.


Suggested Solution

You could possibly refrain from using the according all together like shown in the image. A fixed sidebar with provision to scroll the main items (the arrows at the top and bottom). On clicking the items, you could show a content area beside it showing all the contents that you had planned to display inside your accordion. The users should be able to toggle the visibility of this content area.

Using a scroll bar inside a side bar is not such a good idea I feel.

Hope this suggestion helps.

  • Ahh.. the fixed summary section s to the right hand side, the main content is to the left, So clicking on summary items and showing it again on the main content area would be overkill IMHO.
    – semuzaboi
    Commented Sep 6, 2015 at 6:47

Try to examine how Apple and Google have designed their design guidelines websites. On the Apple webpage after you click one of accordion's headers content of other boxes become hidden, but I don't find it an easy way to grab the big picture of opportunities of the menu. Otherwise Google doesn't hide any boxes until you click on the link (content of the accordion) it's a better solutions cause you could recognize all the content at once there is no need to click each accordion's header separately.

Moreover Google is using animation while you are clicking accordion's headers so it's easier for the user to see what content is appearing and how long the accordion content is.

https://www.google.com/design/spec/components/bottom-sheets.html https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

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.