Tailwind Sidebar Navigation Menu

Source Code

Tailwind CSS is a great UI framework for designing and building websites faster, we can quickly implement different components in a short time using Tailwind CSS.

In this tutorial, we are going to create a beautiful tailwind sidebar navigation menu,

You will get all the source code of every step so follow along to get your hands dirty with tailwind CSS.

We’ll create a new HTML project and setup Tailwind CSS in that, after that we will create a sidebar navigation menu by styling with Tailwind CSS and we’ll use a little bit of javascript to make it responsive because we do not want to show SIdebar Navigation menu to show in mobile devices.

The sidebar menu will have a fixed position on the left side of the screen, and clicking on the menu items will smoothly scroll to the corresponding sections on the main content area.

#Step 1: Set Up the HTML Structure

We will start by setting up the HTML structure for our sidebar menu and main content area. In the <body> tag, we will create two <div> elements with IDs sidebar-section and content, respectively. The sidebar-section will contain the sidebar menu and the content will hold the main content area. Inside the sidebar-section, we will create a <div> element with ID sidebar that will contain the navigation menu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS links -->
    <title>Sidebar Tailwind</title>
  </head>
  <body>
    <!-- Sidebar navigation -->
    <div id="sidebar-section" class="h-screen fixed">
      <div
      id="sidebar"
      class="fixed h-screen top-0 left-0 bg-slate-800 w-20 hover:w-72 duration-200"
    >
      </div>
    </div>
    
    <!-- Main content area -->
    <div id="content" class="md:ml-24">
    </div>

  </body>
</html>

#Add Tailwind CSS using CDN

<script src="https://cdn.tailwindcss.com"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS links -->
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Sidebar Tailwind</title>
  </head>
  <body>
    <!-- Sidebar navigation -->
    <div id="sidebar-section" class="h-screen fixed">
      <div
      id="sidebar"
      class="fixed h-screen top-0 left-0 bg-slate-800 w-20 hover:w-72 duration-200"
    >
      </div>
    </div>
    
    <!-- Main content area -->
    <div id="content" class="md:ml-24">
    </div>

  </body>
</html>

Now inside the sidebar div I am going to create a nav menu with some example menu items

 <nav role="navigation" class="pl-4 pt-8 mt-4">
          <div class="mt-4 relative overflow-hidden">
            <h1 class="name text-white fixed top-0 left-0 text-lg">Tutorend</h1>

            <ul class="nav-list space-y-8" id="nav-list">

              <li
                class="nav-item text-xl active p-2 rounded-l-xl text-white "
              >
                <a href="#home" class="flex gap-5">
                  <i class="fa-solid fa-house fa-2x"></i>
                  Home
                </a>
              </li>
              <li
                class="nav-item text-xl  p-2 rounded-l-xl text-white "
              >
                <a href="#about" class="flex gap-5">
                    <i class="fa-solid fa-user fa-2x"></i>
                  About
                </a>
              </li>
              <li
                class="nav-item text-xl  p-2 rounded-l-xl text-white "
              >
                <a href="#service" class="flex gap-5">
                    <i class="fa-solid fa-toolbox fa-2x"></i>
                  Service
                </a>
              </li>
              <li
                class="nav-item text-xl  p-2 rounded-l-xl text-white "
              >
                <a href="#contact" class="flex gap-5">
                    <i class="fa-solid fa-at fa-2x"></i>
                  Contact
                </a>
              </li>

            </ul>
          </div>
        </nav>

In this example, we are using font awesome icons with menu items so we have to include its cdn

   <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

So now our code is like below

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS links -->
   <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <script src="https://cdn.tailwindcss.com"></script>
    <title>Sidebar Tailwind</title>
  </head>
  <body>
    <!-- Sidebar navigation -->
    <div id="sidebar-section" class="h-screen fixed">
      <div
      id="sidebar"
      class="fixed h-screen top-0 left-0 bg-slate-800 w-20 hover:w-72 duration-200"
    >
    <nav role="navigation" class="pl-4 pt-8 mt-4">
      <div class="mt-4 relative overflow-hidden">
        <h1 class="name text-white fixed top-0 left-0 text-lg">Tutorend</h1>

        <ul class="nav-list space-y-8" id="nav-list">

          <li
            class="nav-item text-xl active p-2 rounded-l-xl text-white "
          >
            <a href="#home" class="flex gap-5">
              <i class="fa-solid fa-house fa-2x"></i>
              Home
            </a>
          </li>
          <li
            class="nav-item text-xl  p-2 rounded-l-xl text-white "
          >
            <a href="#about" class="flex gap-5">
                <i class="fa-solid fa-user fa-2x"></i>
              About
            </a>
          </li>
          <li
            class="nav-item text-xl  p-2 rounded-l-xl text-white "
          >
            <a href="#service" class="flex gap-5">
                <i class="fa-solid fa-toolbox fa-2x"></i>
              Service
            </a>
          </li>
          <li
            class="nav-item text-xl  p-2 rounded-l-xl text-white "
          >
            <a href="#contact" class="flex gap-5">
                <i class="fa-solid fa-at fa-2x"></i>
              Contact
            </a>
          </li>

        </ul>
      </div>
    </nav>
      </div>
    </div>

    <!-- Main content area -->
    <div id="content" class="md:ml-24">
    </div>

  </body>
</html>

and then we are going to create some divs in the main content to make it look page full of content and scroll demo.


    <div id="home" class="bg-red-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">Home</h1>
    </div>

    <div id="about" class="bg-blue-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">about</h1>
    </div>

    <div id="service" class="bg-yellow-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">service</h1>
    </div>

    <div id="contact" class="bg-pink-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">contact</h1>
    </div>

#Adding Interactivity with Javascript

Now we’ll write some Javascript code to add interactivity to the sidebar menu by allowing the user to click on a menu item and highlighting it as active. This is accomplished by using event listeners and the “classList” property to add and remove the “active” class from the menu items.

var navList = document.getElementById("nav-list");
var items = navList.getElementsByClassName("nav-item ");

for (var i = 0; i < items.length; i++) {

  items[i].addEventListener("click", function () {

    var current = document.querySelectorAll(".active");
    
    current.forEach((element) => {
      element.classList.remove("active");
    });

    this.classList.add('active')
   
  });
}

In this code

1. The first line of JavaScript code gets the HTML element with the ID “nav-list” and assigns it to a variable called “navList”.

var navList = document.getElementById("nav-list");

2. The next line of code uses the “getElementsByClassName” method to get all the HTML elements on the page with the class name “nav-item”. This returns an array-like object containing all the matched elements, which is then assigned to a variable called “items”.

var items = navList.getElementsByClassName("nav-item ");

3. A “for” loop is then used to iterate through each of the elements in the “items” array. Inside the loop, an event listener is added to each menu item that listens for a click event.

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", function () {
    // Code to execute when a menu item is clicked
  });
}

4. Inside the click event listener, the first line of code uses the “querySelectorAll” method to select all the HTML elements on the page with the class name “active”. This method returns a NodeList of all the matched elements.

var current = document.querySelectorAll(".active");

5. The “forEach” method is then used to loop through each element in the “current” NodeList and remove the “active” class from each element.

current.forEach((element) => {
  element.classList.remove("active");
});

6. Finally, the “classList” property is used to add the “active” class to the menu item that was clicked.

this.classList.add('active');

We can write Javascript code either in a separate file or in the same file with script tag, I will write on the same page for simplicity

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS links -->
    <title>Sidebar Tailwind</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- Sidebar navigation -->
    <div id="sidebar-section" class="h-screen fixed">
      <div
        id="sidebar"
        class="fixed h-screen top-0 left-0 bg-slate-800 w-20 hover:w-72 duration-200"
      >
        <nav role="navigation" class="pl-4 pt-8 mt-4">
          <div class="mt-4 relative overflow-hidden">
            <h1 class="name text-white fixed top-0 left-0 text-lg">Tutorend</h1>

            <ul class="nav-list space-y-8" id="nav-list">
              <li class="nav-item text-xl active p-2 rounded-l-xl text-white">
                <a href="#home" class="flex gap-5">
                  <i class="fa-solid fa-house fa-2x"></i>
                  Home
                </a>
              </li>
              <li class="nav-item text-xl p-2 rounded-l-xl text-white">
                <a href="#about" class="flex gap-5">
                  <i class="fa-solid fa-user fa-2x"></i>
                  About
                </a>
              </li>
              <li class="nav-item text-xl p-2 rounded-l-xl text-white">
                <a href="#service" class="flex gap-5">
                  <i class="fa-solid fa-toolbox fa-2x"></i>
                  Service
                </a>
              </li>
              <li class="nav-item text-xl p-2 rounded-l-xl text-white">
                <a href="#contact" class="flex gap-5">
                  <i class="fa-solid fa-at fa-2x"></i>
                  Contact
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

    <!-- Main content area -->
    <div id="content" class="md:ml-24">
      <div id="home" class="bg-red-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">Home</h1>
      </div>

      <div id="about" class="bg-blue-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">about</h1>
      </div>

      <div id="service" class="bg-yellow-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">service</h1>
      </div>

      <div id="contact" class="bg-pink-400 h-screen flex justify-center">
        <h1 class="m-auto text-4xl">contact</h1>
      </div>
    </div>

    <script>
      var navList = document.getElementById("nav-list");
      var items = navList.getElementsByClassName("nav-item ");

      for (var i = 0; i < items.length; i++) {
        items[i].addEventListener("click", function () {
          var current = document.querySelectorAll(".active");

          current.forEach((element) => {
            element.classList.remove("active");
          });

          this.classList.add("active");
        });
      }
    </script>
  </body>
</html>

#Defining .active class

As we are adding and removing the active class we also need to style it otherwise there’s no use of all those JS code.


    <style>
    
        .active{
            background-color: aliceblue;
            color: rgb(60, 60, 165);
        }
    </style>

Also, add HTML scroll behavior to smooth the scrolling gives an amazing user experience


    <style>
        html{
            scroll-behavior: smooth;
        }
        .active{
            background-color: aliceblue;
            color: rgb(60, 60, 165);
        }
    </style>