Sidebars are a staple of website navigation — they’re convenient to users and ensure that certain page elements are always in view. Within them, you can place links, menus, widgets, CTAs, display ads, and more.

If you’re DIY-ing your website, it’s relatively easy to add sidebars with just a bit of HTML and CSS know-how. You might try a CSS framework like Bootstrap CSS for your sidebar — this template from Start Bootstrap provides a basic, mobile-friendly sidebar interface you can try. Or, you might be interested in a pure CSS implementation.

In this article, we’ll walk through several ways to make a sidebar with CSS: We’ll cover static sidebars, fixed and sticky sidebars, full-page sidebars, sidebars in CSS grids, and, finally, collapsible sidebars. That’s a lot to learn, so let’s dive in.

Download Now: Free Intro Guide to HTML & CSS

How to Create a Sidebar in CSS

The simplest way to implement a sidebar is with a static sidebar element (highlighted in blue below) that spans the height of the page and is positioned on the side of the screen.

a static css sidebar

To make this, use the following HTML and CSS:

 
<!-- HTML -->

<div class="sidebar">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
</div>

<div class="body-text">
<!-- body content -->
</div>

</body>

 
/* CSS */

.sidebar {
height: 100%;
width: 150px;
position: absolute;
left: 0;
top: 0;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-left: 150px;
font-size: 18px;
}

This works fine and good, but what if you want the same sidebar elements to be in view at all times? In this case, you can make a fixed sidebar or a sticky sidebar.

How to Create a Fixed Sidebar in CSS

A fixed sidebar remains in the same place relative to the viewport (i.e. the visible browser window) when the user scrolls. For example, this sidebar stays pinned to the top corner of the screen:

a fixed css sidebar

To accomplish this, use the following HTML and CSS:

 
<!-- HTML -->

<body>

<div class="sidebar">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
</div>

<div class="body-text">
<!-- body content -->
</div>

</body>

 
/* CSS */

.sidebar {
height: 200px;
width: 150px;
position: fixed;
top: 0;
left: 0;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-left: 150px;
font-size: 18px;
}

To pin the sidebar to the right side of the viewport, apply the following CSS instead:

 
/* CSS */

.sidebar {
height: 200px;
width: 150px;
position: fixed;
top: 0;
right: 0;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-right: 150px;
font-size: 18px;
}

This flips the sidebar placement:

a fixed css sidebar on the right side of the page

How to Create a Sticky Sidebar in CSS

Sticky sidebars are similar to fixed sidebars in that they follow you as you scroll down the page.

However, a sticky sidebar element maintains a relative position until it crosses a specific threshold in the viewport (i.e. the user scrolls past a certain point on the page). At that point, the element stays in place, like a fixed element.

This makes it appear to “stick” to the top of the screen, like so:

a sticky css sidebar

To achieve a sticky sidebar effect, use the following HTML and CSS:

 
<!-- HTML -->

<body>

<div class="sidebar">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
</div>

<div class="body-text">
<!-- body content -->
</div>

</body>

 
/* CSS */

.sidebar {
height: 200px;
width: 150px;
position: -webkit-sticky; /* for Safari users */
position: sticky;
top: 0px;
float: right;
margin-top: 100px;
padding-top: 40px;
background-color: lightblue;
}

.sidebar div {
padding: 8px;
font-size: 24px;
display: block;
}

.body-text {
margin-right: 150px;
font-size: 18px;
}

In this code, the position: sticky declaration tells the sidebar div to “stick” to the top border of its parent container, which here is the viewport.

How to Create a Full Height Sidebar in CSS

To make your sidebar extend to the bottom of the browser window, simply set the height property to 100% in your CSS:

 
/* CSS */

.sidebar {
height: 100%;
width: 150px;
position: fixed;
top: 0;
left: 0;
padding-top: 40px;
background-color: lightblue;
}

As you can see, the sidebar is fixed and spans the full height of the browser window. This will always be the case, no matter the height dimension of the viewport.

a full height css sidebar

How to Create a Grid Sidebar in CSS

You can use the CSS grid layout to create a sidebar element — set your leftmost or rightmost grid item to extend to the bottom of the grid (or as far down as you want it to go), and you’ll end up with something like this:

a grid css sidebar

Here’s the HTML and CSS code for the above example:

 
<!-- HTML -->
<body>

<div id="grid-container">
<div id="box-1">1</div>
<div id="box-2">2</div>
<div id="box-3">3</div>
<div id="box-4">4</div>
<div id="box-5">5</div>
<div id="box-6">6</div>
<div id="box-7">7</div>
<div id="box-8">8</div>
<div id="box-9">9</div>
<div id="box-10">10</div>
<div id="box-11">11</div>
<div id="box-12">12</div>
<div id="box-13">13</div>
</div>

</body>

 
/* CSS */

#grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 8px;
padding: 8px;
}

#grid-container div {
background-color: lightblue;
text-align: center;
padding: 30px;
font-size: 24px;
}

#box-1 {
grid-row-start: 1;
grid-row-end: 7;
}

This sidebar element will be positioned relative by default, meaning it will move upwards as the user scrolls downward. You can turn this sidebar element into a sticky element by adding the sticky CSS declarations to the first box element:

 
/* CSS */

#box-1 {
grid-row-start: 1;
grid-row-end: 7; /* substitute this value for your sidebar’s vertical row height */
height: 200px;
position: sticky;
top: 0px;
}

And voila, the sidebar sticks:

a sticky css sidebar in a grid layout

 

How to Create a Collapsible Sidebar in CSS

Finally, let’s cover how to create a collapsible sidebar. These can be handy for secondary navigation and saving page space by hiding nonessential items.

The easiest way to add a smooth collapsible sidebar involves a bit of JavaScript coding, so brush up on that if you need to. Here’s a simplified version of W3School’s implementation:

 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: lightblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidebar div {
padding: 8px 8px 8px 30px;
font-size: 24px;
display: block;
transition: 0.5s;
cursor: pointer;
}

.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}

.openbtn {
font-size: 24px;
cursor: pointer;
background-color: lightblue;
}

#main {
transition: margin-left .5s;
}
</style>
</head>
<body>

<div id="mySidebar" class="sidebar">
<div class="closebtn" onclick="closeNav()">×</div>
<div>About</div>
<div>Services</div>
<div>Clients</div>
</div>

<div id="main">
<button class="openbtn" onclick="openNav()">Open Sidebar</button>
<p> (your body text here)) </p>
</div>

<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>

</body>
</html>

This code produces a basic collapsible menu. When the “Open Sidebar” and “X” buttons are clicked, some JavaScript code changes the width of the sidebar element. The transition declarations animate the growing and shrinking of the menu when the width is changed, so we get the following effect:

a collapsible css sidebar

How to Create a Sidebar Navigation Menu in CSS

A sidebar makes a great home for a navigation menu. Adding one to your CSS sidebar is easy — to do it, we’ll turn our menu item divs into links (using the <a> tag) and add some additional styling for a cleaner look and a more comfortable user experience.

css-sidebar-navigation-menu

To aid screen readers and provide better accessibility, we’ll also wrap out menu item links in a <nav> tag to denote a navigation menu. Use the following HTML and CSS:

 
<!-- HTML -->

<div class="sidebar">
<nav>
<a href="URL">Menu Item 1</a>
<a href="URL">Menu Item 2</a>
<a href="URL">Menu Item 3</a>
</nav>
</div>

<div class="body-text">
<!-- body content -->
</div>

</body>

 
/* CSS */

.sidebar {
height: 100%;
width: 150px;
position: absolute;
left: 0;
top: 0;
padding-top: 40px;
background-color: lightblue;
}

.sidebar a {
padding: 8px;
font-size: 24px;
display: block;
text-decoration: none;
}

.sidebar a:hover {
cursor: pointer;
opacity: .7;
}

.body-text {
margin-left: 150px;
font-size: 18px;
}

CSS Sidebars: Some Testing Required

Sidebars are one of those interface features that visitors have come to expect from any website, and they’re usually a safe bet for enhancing navigation or adding extra display elements without distracting from the key page content.

It probably goes without saying, but the methods I’ve described in this post are pretty bare-bones. It’s up to you to apply CSS to personalize your sidebar feature exactly to your liking, so expect a lot of trial and error here (and when working with CSS in general). Still, any of these HTML/CSS templates make a great starting point for a sidebar that improves your navigation and user experience.

Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.

New Call-to-action

 css introduction

Originally published Jun 9, 2021 7:00:00 AM, updated June 09 2021

Topics:

Bootstrap & CSS