Dropdown Sidebar Menu using HTML CSS & JavaScript

Hello readers, today we are going to learn to create a Responsive Dropdown Sidebar Menu using HTML CSS, and JavaScript. If you want this sidebar design without a dropdown menu, you can visit this link: Responsive Sidebar Menu.

Sidebar means the section on the website that is located on the right or left side with some important navigation links and the user can open or close it. Dropdown menu means that sub-menu or nav links which are hidden in very first but when user do hover or click on the main nav link then sub-menu appears.

There are various ways to create a drop-down navigation menu. I think the following are the best and easy ways:

In HTML:

Make <ul> </ul> tag as a parents for the main navigation links.

Inside the <ul> </ul> tag add <li> </li> tag like this <ul><li>Home</li></ul>

Now for submenu add <ul> </ul> tag again inside the <li> </li> like this:

<ul><li>Home

<ul>

</ul>

</li></ul>

If you want to watch the real virtual demo and tutorial of this sidebar menu with a submenu then I highly recommend you to watch the given video tutorial of the dropdown. After watching the video I sure you will understand how all code works behind this design.

Dropdown Sidebar Menu in HTML CSS & JavaScript | Video

I hope you have watched the video tutorial of our drop-down side navigation bar in HTML CSS and JavaScript. As we have seen on the tutorial, first our sidebar is close and we can see an icon of navigation but when I did hover the navigation link's name and a submenu appears. When I open the dropdown sidebar menu, all navigation links' names appear, and the submenu comes at the bottom of the main navigation links.

Actually, all these are made by HTML and CSS, but I have used a little touch of JavaScript to make open and close functions. We can also make open-close functions with HTML and CSS only if you are wondering to know then on this link - Sidebar Menu using only HTML and CSS.

I believe, now you guys can easily build this drop-down sidebar menu but if you are confused to make this side navigation bar then scroll down to get all source code.

Dropdown Sidebar Menu | Free Source Code

Before copying the given code, you need to create two files: HTML and CSS files. After Creating these two files then you can copy-paste the following codes in your documents.

To copying the following HTML of the dropdown sidebar menu you have to create a file with the name of index.html on your computer and copy-paste the given HTML code in your HTML document.

HTML CODE:

<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/CodingLabYT-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <!--<title> Drop Down Sidebar Menu | CodingLab </title>-->
    <link rel="stylesheet" href="style.css">
    <!-- Boxiocns CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="sidebar close">
    <div class="logo-details">
      <i class='bx bxl-c-plus-plus'></i>
      <span class="logo_name">CodingLab</span>
    </div>
    <ul class="nav-links">
      <li>
        <a href="#">
          <i class='bx bx-grid-alt' ></i>
          <span class="link_name">Dashboard</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Category</a></li>
        </ul>
      </li>
      <li>
        <div class="iocn-link">
          <a href="#">
            <i class='bx bx-collection' ></i>
            <span class="link_name">Category</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Category</a></li>
          <li><a href="#">HTML & CSS</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">PHP & MySQL</a></li>
        </ul>
      </li>
      <li>
        <div class="iocn-link">
          <a href="#">
            <i class='bx bx-book-alt' ></i>
            <span class="link_name">Posts</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Posts</a></li>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Login Form</a></li>
          <li><a href="#">Card Design</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-pie-chart-alt-2' ></i>
          <span class="link_name">Analytics</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Analytics</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-line-chart' ></i>
          <span class="link_name">Chart</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Chart</a></li>
        </ul>
      </li>
      <li>
        <div class="iocn-link">
          <a href="#">
            <i class='bx bx-plug' ></i>
            <span class="link_name">Plugins</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Plugins</a></li>
          <li><a href="#">UI Face</a></li>
          <li><a href="#">Pigments</a></li>
          <li><a href="#">Box Icons</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-compass' ></i>
          <span class="link_name">Explore</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Explore</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-history'></i>
          <span class="link_name">History</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">History</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cog' ></i>
          <span class="link_name">Setting</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Setting</a></li>
        </ul>
      </li>
      <li>
    <div class="profile-details">
      <div class="profile-content">
        <!--<img src="image/profile.jpg" alt="profileImg">-->
      </div>
      <div class="name-job">
        <div class="profile_name">Prem Shahi</div>
        <div class="job">Web Desginer</div>
      </div>
      <i class='bx bx-log-out' ></i>
    </div>
  </li>
</ul>
  </div>
  <section class="home-section">
    <div class="home-content">
      <i class='bx bx-menu' ></i>
      <span class="text">Drop Down Sidebar</span>
    </div>
  </section>
  <script>
  let arrow = document.querySelectorAll(".arrow");
  for (var i = 0; i < arrow.length; i++) {
    arrow[i].addEventListener("click", (e)=>{
   let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
   arrowParent.classList.toggle("showMenu");
    });
  }
  let sidebar = document.querySelector(".sidebar");
  let sidebarBtn = document.querySelector(".bx-menu");
  console.log(sidebarBtn);
  sidebarBtn.addEventListener("click", ()=>{
    sidebar.classList.toggle("close");
  });
  </script>
</body>
</html>

~~$ads={1}~~

CSS CODE:

/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #11101d;
  z-index: 100;
  transition: all 0.5s ease;
}
.sidebar.close{
  width: 78px;
}
.sidebar .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i{
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-details .logo_name{
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links{
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
  background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
  display: block
}
.sidebar .nav-links li i{
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
  display: none;
}
.sidebar .nav-links li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name{
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: #1d1b31;
  display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
  display: block;
}
.sidebar .nav-links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
  opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 18px;
  opacity: 1;
  display: block;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .profile-details{
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1b31;
  padding: 12px 0;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details{
  background: none;
}
.sidebar.close .profile-details{
  width: 78px;
}
.sidebar .profile-details .profile-content{
  display: flex;
  align-items: center;
}
.sidebar .profile-details img{
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 14px 0 12px;
  background: #1d1b31;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
  padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}
.sidebar .profile-details .job{
  font-size: 12px;
}
.home-section{
  position: relative;
  background: #E4E9F7;
  height: 100vh;
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
  left: 78px;
  width: calc(100% - 78px);
}
.home-section .home-content{
  height: 60px;
  display: flex;
  align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
  color: #11101d;
  font-size: 35px;
}
.home-section .home-content .bx-menu{
  margin: 0 15px;
  cursor: pointer;
}
.home-section .home-content .text{
  font-size: 26px;
  font-weight: 600;
}
@media (max-width: 400px) {
  .sidebar.close .nav-links li .sub-menu{
    display: none;
  }
  .sidebar{
    width: 78px;
  }
  .sidebar.close{
    width: 0;
  }
  .home-section{
    left: 78px;
    width: calc(100% - 78px);
    z-index: 100;
  }
  .sidebar.close ~ .home-section{
    width: 100%;
    left: 0;
  }
}

50 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

PavanJune 15, 2021 at 8:23 PM
Hi CodingLab, sidebar scroll is not coming when side-bar menu items exceeds max height(overflow:auto is not working for nav-links)
ReplyDelete
Replies
Prabhu patelJune 21, 2021 at 2:53 AM
osm
ReplyDelete
Replies
Hansana DasanayakaJune 23, 2021 at 12:19 AM
Thank You So Much for This STUFF. :)
ReplyDelete
Replies
DonzaalaJune 23, 2021 at 8:15 AM
This is awesome. Thanks for sharing
ReplyDelete
Replies
UnknownJune 24, 2021 at 7:12 AM
I like this side navigation bar but i'm not sure how to move the drop down button on the side navigation bar? Tried retooling the css but no luck. How would I go about this?
ReplyDelete
Replies
bluespringsrilankaJuly 2, 2021 at 6:33 PM
So Amazing Bro.. You are Amazing Front end Developer..
Lovely.. Wowww
ReplyDelete
Replies
Dr. MazinJuly 15, 2021 at 1:26 AM
Hi
ReplyDelete
Replies
UnknownJuly 23, 2021 at 12:29 PM
Hello,
first thank you so much for this - its amazing!
But i have a problem on mobile devices the animation is a litte bit laggy... Can somebody help me please?
ReplyDelete
Replies
BghhnJuly 27, 2021 at 11:16 PM
The drop down sidebar is not working
ReplyDelete
Replies
KenSoniAugust 8, 2021 at 4:31 PM
I want to write this with React and TypeScript, let get back for me if you allow, please.
ReplyDelete
Replies
UnknownAugust 9, 2021 at 2:06 PM
Hi, I have a problem that tells me "parentElement does not exist in the EventTarget" and I don't know how to solve it, pls help me.
ReplyDelete
Replies
SergeyAugust 18, 2021 at 12:19 AM
Hey
Thanks for this video and this tutorial. It helped me a lot to understand and learn new things. I want to go further and decided to add the animation effect myself when the menu expands, but nothing works for me. Tell me how you can do it?
ReplyDelete
Replies
UnknownAugust 24, 2021 at 1:56 PM
Could you pass me the css, from the option that when you touch something, a sub menu appears, it is that I cannot find it
ReplyDelete
Replies
UnknownAugust 29, 2021 at 5:47 PM
Thank you so much codinglab
ReplyDelete
Replies
UnknownSeptember 10, 2021 at 4:00 AM
Amazing!!
ReplyDelete
Replies
UnknownSeptember 20, 2021 at 2:48 AM
Hi, thank you so much and it works perfectly!!!
Is it possible to use this design offline? e.g. use this to develop an application and run it without the internet connection, will all the icons and functions still be there?
ReplyDelete
Replies
UnknownSeptember 26, 2021 at 10:44 PM
You have my gratitude, sir!
ReplyDelete
Replies
Time is lifeOctober 2, 2021 at 7:02 AM
may i use any template to my project and then to my clients
ReplyDelete
Replies
UnknownOctober 28, 2021 at 4:51 AM
adding bootstrap css creating problem .. what to do sir
ReplyDelete
Replies
UnknownOctober 28, 2021 at 11:13 PM
Hi codinglab. Thanks alot for helping us with your wisdom. Im facing a little issue. My hovering is not working. Hover submenu not showing. Actually transfering the whole in react.
ReplyDelete
Replies
NiklausNovember 11, 2021 at 8:30 AM
Thank you very much, amazing work i love it.
ReplyDelete
Replies
NiklausNovember 11, 2021 at 8:31 AM
Thank you, amazing work, i love it
ReplyDelete
Replies
9m2h5November 21, 2021 at 11:51 PM
how do you change icon? i tried akar-icons:instagram-fill but it doesnt show up
ReplyDelete
Replies
matiasNovember 25, 2021 at 10:24 AM
really nice guys!
ReplyDelete
Replies
UnknownDecember 12, 2021 at 8:10 PM
I was able to add a nice touch to this menu. I added a tab that has an Arrow ICON the points to the right and rotates 180 as the menu expands from the left, ending with an arrow pointing to the left to indicate to collapse the menu. Then when pressed translates back to a right arrow pointing circle, indicating press to expand the menu.

I had to right some javscript to remove class names and add class names to the affected elements needed for translations.

you should start to transition to use css grid for your layouts and navigations. i will try to incorporate a subset of this menu in css grid. otherwise it will be too difficult for me to incorporate in a website with regards to content flow.

you do some nice stuff.
ReplyDelete
Replies
UnknownDecember 29, 2021 at 9:06 PM
hello sir, I appreciate it profusely, that's very cool, can you make a tutorial for the main content?. you are really a professional front end developer
ReplyDelete
Replies
Shivansh PandeyFebruary 8, 2022 at 3:23 AM
Great Work !!
ReplyDelete
Replies
UnknownFebruary 24, 2022 at 5:21 PM
Muito obrigado amigo.
Queria adicionar outro submenu dentro do submenu...

Estou com dificudade !
ReplyDelete
Replies
UnknownFebruary 24, 2022 at 5:21 PM

Thank you very much friend.
I wanted to add another submenu inside the submenu...

I'm having trouble
ReplyDelete
Replies
kian sadlerMarch 8, 2022 at 2:38 AM
how would a paragraph in the middle
ReplyDelete
Replies
kian sadlerMarch 8, 2022 at 2:39 AM
How would i add a paragraph in the middle of the page
ReplyDelete
Replies
Nandan GuptaMarch 10, 2022 at 12:12 AM
how to ad this in blogger
ReplyDelete
Replies
AMATA SANASINHMarch 20, 2022 at 6:45 AM
I hope to use this one for my small project

Thanks a lot

Best Wishing
ReplyDelete
Replies
UnknownMarch 31, 2022 at 1:27 AM
Thank you, amazing work, i love it. And could you guide me to use the same font icon offline?
ReplyDelete
Replies
نعمي عبدالمولىMay 28, 2022 at 7:05 PM
Hello and Thank you, how to make the function use the li and not only arrow to show the dub menu please
ReplyDelete
Replies
artistasxartistasJuly 18, 2022 at 5:05 PM
thank you for the tutorial, can i use some parts of it it for a client?
ReplyDelete
Replies
Max ChangDecember 13, 2022 at 2:08 AM
May i know the license for this dropdown side bar menu?
ReplyDelete
Replies