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
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.
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; }
- 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.
- 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')">
☰
</button>
<!-- (A2) SIDEBAR ITEMS -->
<a class="item" href="#">
<span class="ico">☀</span>
<span class="txt">FOO BAR</span>
</a>
<a class="item" href="#">
<span class="ico">☁</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”.
<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.<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; }
}
- 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 withdisplay: none
.
- (A1) Same old layout trick –
- 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”.
- (B1) We show the “toggle sidebar” button
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')">
☰
</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;
}
- 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.
- (A1) 2 columns layout –
- 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 }
EXTRA 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
- 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

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!