Building a collapsible sidebar with Stimulus and Tailwind CSS

Building a collapsible sidebar with Stimulus and Tailwind CSS

Today we’re building one of the most common elements in web design — a lefthand sidebar for navigation — using Tailwind CSS and Stimulus.js.

Today we’re building one of the most common elements in web design — a lefthand sidebar for navigation — using Tailwind CSS and Stimulus.js.

Our sidebar will always take up 100% of the height of the page and we’ll be able to expand and collapse the sidebar by clicking a button. The whole thing will be accomplished with just a bit of Stimulus for the expand/collapse action and a small amount of Tailwind in our markup.

Here’s what it will look like when we’re finished.

To accomplish this, we’ll start with a plain HTML file, pull in Tailwind CSS to make things look nice, and use Stimulus for interactivity.

I’m writing this assuming a solid understanding of HTML and CSS, and some level of comfort with JavaScript.

If you’ve never seen Tailwind before, some of the classes we add for styling might feel a little odd. You don’t need any knowledge of how Stimulus works, but if you’re brand new you might want to read the Stimulus Handbook to help solidify some concepts as we go.

You can find the complete code for this project on Github.

Let’s dive in.

  • Project setup
  • Building a static sidebar
  • Creating the sidebar Stimulus controller
  • Connecting to the DOM
  • Wrapping up

tailwind tailwind-css javascript stimulusjs stimulus

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Money Manager App with Javascript and Tailwind CSS

Money Manager App with Javascript and Tailwind CSS. In this video we're going to build a small application called Money Manager and we will be using Javascript and Tailwind CSS to build this application. This is the first part of this entire vide where we will be creating the user interface . If you don't know Tailwind CSS , don't worry we're also gonna cover that as well . It's really simple . However since this is not a Tailwind CSS tutorial I'm not gonna explain every class there is but just the ones that I"ll be using to create the UI . Do tell me in the comment section if ou want a tutorial on Tailwind CSS .

Animate Website on Scroll easily without learning CSS Animations or JavaScript

This video shows you how to make use of wow.js and animate.css to add animations to any element of your web page really fast without having any knowledge of CSS animations or JavaScript or jQuery.

Money Manager App with Javascript and Tailwind CSS - Part 2

In this video tutorial, we'll learn Money Manager App with Javascript and Tailwind CSS - Part 2. In this video we're going to build a small application called Money Manager and we will be using Javascript and Tailwind CSS to build this application. This is the second part of this entire video where we will be adding our Javascript to make the functionality of our application.

Easily Set Up Tailwind CSS with Vanilla JavaScript in 10 Minutes

It only takes a few minutes to set up Tailwind CSS with Vanilla JavaScript! You've probably used Tailwind CSS with a framework like React or Vue, but have you ever used it with Vanilla JavaScript? In this video, we'll walk through how to easily set it up!

Getting Started with Alpine.js: Tailwind CSS for JavaScript

Getting Started with Alpine.js: Tailwind CSS for JavaScript. Alpine.js is a lightweight JavaScript framework that's a perfect fit for adding functionality onto existing markup.