3 Very Simple Responsive Sidebar Examples (Free Download)

Welcome to a tutorial on how to create a responsive sidebar in HTML and CSS. Once upon a time in the Stone Age of the Internet, sidebar layouts were simple. But something called “mobile devices” came along and changed the way we have to deal with sidebars – Let us walk through 3 common responsive sidebar designs in this guide, read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) SIMPLE COLLAPSING SIDEBAR

1A) SIMPLE SIDEBAR DEMO

 

1B) THE HTML

<div id="demo-main-a">MAIN</div>
<div id="demo-side-a">SIDE</div>

Yep, this is as simple as it gets.

• <div id="demo-main-a"> The main content area.
• <div id="demo-side-a"> The sidebar.

 

1C) THE CSS

/* (A) BIG SCREEN - 2 COLUMNS LAYOUT */
body { display: flex; }
#demo-main-a { flex-grow: 1; }
#demo-side-a { width: 30%; }
 
/* (B) SMALL SCREEN - 1 COLUMN LAYOUT */
@media screen AND (max-width:768px) {
  body { flex-wrap: wrap; }
  #demo-main-a, #demo-side-a { width: 100%; }
}
 
/* (C) COSMETICS */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
#demo-main-a, #demo-side-a { padding: 10px; }
#demo-main-a { background: #ffe0de; }
#demo-side-a { background: #deffff; }

1. On big screens, we have a 2 columns layout.
   • body { display: flex } will do the layout magic automatically.
   • Define a percentage width on the sidebar #demo-side-a { width: 30% }.
   • Then, #demo-main-a { flex-grow: 1 } will allow the main content area to automatically fill up the remaining screen width.
2. On small screens, we will collapse the sidebar and content into a 1 column layout.
   • body { flex-wrap: wrap; } will allow the main container and sidebar to break into 2 different rows.
   • #demo-main-a, #demo-side-a { width: 100%; } does the exact magic of collapsing the layout into a single column.

 

 

2) DRAWER SIDEBAR

2A) DRAWER SIDEBAR DEMO

 

2B) THE HTML

<!-- (A) SIDEBAR -->
<div id="demo-side-b">
  <!-- (A1) EXPAND/COLLAPSE SIDEBAR -->
  <button id="demo-tog-b" onclick="document.getElementById('demoB').classList.toggle('open')">
    &#9776;
  </button>
 
  <!-- (A2) SIDEBAR ITEMS -->
  <a class="item" href="#">
    <span class="ico">&#9728;</span> 
    <span class="txt">FOO BAR</span>
  </a>
  <a class="item" href="#">
    <span class="ico">&#9729;</span> 
    <span class="txt">HELLO WORLD</span>
  </a>
</div>
 
<!-- (B) MAIN CONTENTS -->
<div id="demo-main-b">MAIN</div>

No need to panic, this is still the same old sidebar and main content layout. It just has a little more “stuff”.

1. <div id="demo-side-b"> The sidebar. But this time, we have a toggle button <button id="demo-tog-b"> and menu items <a class="item> inside.
2. <div id="demo-main-b"> Main contents.

 

3C) THE CSS

/* (A) BIG SCREEN */
/* (A1) 2 COLUMNS LAYOUT */
body { display: flex; }
#demo-side-b { width: 150px; }
#demo-main-b { flex-grow: 1; }
 
/* (A2) HIDE TOGGLE SIDEBAR BUTTON */
#demo-tog-b { display: none; }
 
/* (B) SMALL SCREEN */
@media screen AND (max-width:768px) {
  /* (B1) SHOW TOGGLE SIDEBAR BUTTON */
  #demo-tog-b { display: block; }

  /* (B2) COLLAPSED SIDEBAR BY DEFAULT */
  #demo-side-b { width: 60px; }
  #demo-side-b .txt { display: none; }
 
  /* (B3) EXPAND SIDEBAR */
  #demo-side-b.open { width: 150px; }
  #demo-side-b.open .txt { display: inline; }
}
 
/* (C) COSMETICS */
/* (C1) PAGE LAYOUT */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body { padding: 0; margin: 0; }
#demo-side-b, #demo-main-b { padding: 10px; }
#demo-side-b { background: #deffff; }
#demo-main-b { background: #ffe0de; }
 
/* (C2) MENU ITEMS */
#demo-side-b a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #000;
  margin-bottom: 10px;
}
#demo-side-b a:last-child { margin: 0; }
 
/* (C3) TOGGLE BUTTON */
#demo-tog-b {
  font-size: 20px;
  width: 100%;
  margin-bottom: 10px;
}
 
/* (C4) COLLAPSE/EXPAND SIDEBAR */
@media screen AND (max-width:768px) {
  #demo-side-b {
    text-align: center;
    transition: width 0.2s;
  }
  #demo-side-b .ico { font-size: 30px; }
  #demo-side-b.open { text-align: left; }
  #demo-side-b.open .ico { font-size: inherit; }
}

1. On big screens, it’s the same 2 columns layout.
   • (A1) Same old layout trick – body { display: flex; }, #demo-side-b { width: 150px; }, and #demo-main-b { flex-grow: 1 }.
   • (A2) But take note that the “toggle sidebar” button #demo-tog-b is hidden with display: none.
2. The transformations on the small screen are slightly confusing.
   • (B1) We show the “toggle sidebar” button #demo-tog-b { display: block }, allow users to expand/collapse the sidebar.
   • (B2) Sidebar is collapsed by default – #demo-side-b { width: 60px; }, and the menu item text is hidden #demo-side-b .txt { display: none; }.
   • (B3) When the user clicks on the “toggle sidebar” button, #demo-side-b.open will be used to expand the sidebar, shown in “full width”.

 

 

3) FULL-SCREEN HIDDEN SIDEBAR

3A) FULLSCREEN SIDEBAR DEMO

 

3B) THE HTML

<!-- (A) SIDEBAR -->
<div id="demo-side-c">
  <!-- (A1) CLOSE SIDEBAR BUTTON -->
  <button class="demo-tog-c" onclick="document.getElementById('demoC').classList.toggle('open')">
    X
  </button>
  
  <!-- (A2) SIDEBAR ITEMS -->
  <a href="#">ITEM</a>
</div>
 
<!-- (B) MAIN CONTENTS -->
<div id="demo-main-c">
  <!-- (B1) OPEN SIDEBAR BUTTON -->
  <button class="demo-tog-c" onclick="document.getElementById('demoC').classList.toggle('open')">
    &#9776;
  </button>
 
   <!-- (B2) CONTENTS -->
   MAIN
</div>

Once again, don’t panic. This is quite literally the same old “container to sandwich the sidebar and main contents”. But as you can see, the only difference here is 2 buttons <button class="cTog"> to toggle the fullscreen sidebar on small screens.

 

3C) THE CSS

/* (A) BIG SCREEN */
/* (A1) 2 COLUMNS LAYOUT */
body { display: flex; }
#demo-side-c { width: 30%; }
#demo-main-c { flex-grow: 1; }
 
/* (A2) HIDE TOGGLE BUTTONS */
.demo-tog-c { display: none; }
 
/* (B) SMALL SCREEN */
@media screen AND (max-width:768px) {
  /* (B1) SHOW TOGGLE BUTTONS */
  .demo-tog-c { display: block; }
 
  /* (B2) TRANSFORM TO FULL SCREEN */
  body { display: block; }
  #demo-main-c {
    width: 100%;
    min-height: 100vh;
  }
  #demo-side-c {
    position: fixed;
    top: 0; left: 0; z-index: 999;
    width: 100vw; height: 100vh;
    visibility: hidden; opacity: 0;
  }
 
   /* (B3) SHOW SIDEBAR */
  #demo-side-c.open {
    visibility: visible; opacity: 1;
  }
}

/* (C) COSMETICS */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body { padding: 0; margin: 0; }
#demo-side-c, #demo-main-c { padding: 10px; }
#demo-side-c {
  background: #deffff;
  transition: opacity 0.2s;
}
#demo-main-c { background: #ffe0de; }
.demo-tog-c {
  font-size: 24px;
  margin-bottom: 10px;
}

1. I think you guys should be bored of this by now.
   • (A1) 2 columns layout – body { display: flex } #demo-side-c { width: 30%; } #demo-main-c { flex-grow: 1; }
   • (A2) Hidden sidebar toggle buttons.
2. CSS transformation for small screens is a little tricky.
   • (B1) Show the toggle buttons.
   • (B2) Turn the sidebar into a fullscreen menu – position: fixed; top: 0; left: 0; z-index: 999; width: 100vw; height: 100vh;
   • (B2) Of course, hide the fullscreen sidebar by default – visibility: hidden; opacity: 0;
   • (B3) Show the fullscreen sidebar when toggled – #demo-side-c.open { visibility: visible; opacity: 1 }

 

 

 

LINKS & REFERENCES

• Need more? Here’s a collection of “nice-looking” sidebars – Free Frontend.
• More sidebar design ideas – CodeDemy
• Hidden Sidebar Menu – Code Boxx

 

INFOGRAPHIC CHEAT SHEET