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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Sidebars Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

RESPONSIVE SIDEBAR DESIGNS

All right, let us now get into the various common sidebar designs in this section.

 

1) SIMPLE COLLAPSING SIDEBAR

SIMPLE SIDEBAR DEMO

MAIN
SIDE

 

THE HTML

1-basic.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.

 

THE CSS

1-basic.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, 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

DRAWER SIDEBAR DEMO

ITEM A
ITEM B
MAIN

 

THE HTML

2-drawer.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.

 

THE CSS

2-drawer.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, 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

FULLSCREEN SIDEBAR DEMO

SIDEBAR

MAIN

 

THE HTML

3-fullscreen.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.

 

THE CSS

3-fullscreen.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, 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 }

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Responsive CSS Sidebar (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.