Jacob Paris
← Back to all content

Build a sliding sidebar with vanilla javascript


<ul id="sidebar" class="sidebar">
<li>Home Page</li>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>

We need a basic button with an ID so we can reference it in javascript, and a sidebar with an ID for the same reason.

.sidebar {
background: #333;
color: white;
max-width: 200px;
transition: transform 0.5s;
&.isClosed {
transform: translateX(-100%);
&__button {
width: 300px;
border: 1px solid #ddf;
padding: 1rem;
border-radius: 0.25rem;

Here the styles are all written in SCSS so we can take advantage of nesting. This saves a lot of repeated code, but requires that we precompile the CSS before serving it to the browser.

The & refers to the parent selector, so once this compiles out the .isClosed class will look like this:

.sidebar.isClosed {
transform: translateX(-100%);

This class translates the sidebar by its width to the left. Add the class, sidebar hides. remove the class, sidebar appears. Simple!

const sidebar = document.getElementById("sidebar")
const sidebarTrigger = document.getElementById(

Our first step is to select both of our elements so we can use them in our Javascript.

sidebarTrigger.addEventListener("click", () => {
if (sidebar.classList.contains("isClosed")) {
sidebarTrigger.innerText = "CLOSE"
} else {
sidebarTrigger.innerText = "OPEN"

Here we add an event listener for the click event. Every time we click on the sidebarTrigger, the function we specify here will run.

If the sidebar has the .isClosed class, remove it and change the button text to CLOSE. Otherwise, add it and change the button text to OPEN.

And that's it! CSS handles all the animation and all the javascript has to do is toggle a class.


Professional headshot

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.