How to Design Responsive Sidebars

We are constantly learning new techniques on how to handle responsive design challenges. Each time we build a responsive website, we come across a better way to handle challenging content contraints. The more navigation, columns and elements present, the more scenarios you have to deal with on smaller & larger screen sizes.

On the the biggest hurdles is handling sidebars. Especially when those sidebars contain important information that you don’t want to drop to the bottom of the website. Whether it’s navigation, a map or a call-to-action, sidebars can be challenging. Here are some scenarios in which sidebars hold important content and how it was handled with responsive design.

Responsive Sidebar Design Examples & Solutions

Pop-out Sidebar

Another solution to keep a sidebar content compact yet visible is to use a pop-out tab. This is a take on the popular Facebook approach to slide out additional content on the right or left of the screen using a button.

Responsive Sidebar Example

Responsive Sidebar ExampleResponsive Sidebar Example

Collapsed, Top Sidebar with Categories

For blogs and news sections, categories are quite important to keep higher up on the page to allow for exploration. In this example, we have collapsed the categories and kept them at the top of the page so they are accessible, but not in the way of the main content.

Responsive Sidebar Categories

Responsive Category SidebarResponsive Category Sidebar Open

Horizontal Shifting Sidebar Navigation

In this example, Microsoft takes navigation links and shifts them to a horizontal layout and back to vertical, depending on the size of the screen. This is a great way to keep a shorter list of navigational links on the top of the page without taking up too much vertical real estate.

Microsoft Responsive Sidebar

Microsoft Responsive Sidebar HorizontalMicrosoft Responsive Sidebar Vertical

What solutions have you come across that you have found to be successful?

Related Responsive Design Resources

Sarah Shuda

Sarah Shuda

Designer. Mom. Wife. Loves Gilmore Girls, healthy living and a good cup of coffee.

Need a hand with your website?