How to Create a jQuery Sidebar Menu with Submenu (Step-by-Step Guide)

---

Originally published on Makemychance.com

Hello, my name is Arsalan Malik, and I’m a Senior Software Developer from India. If you’re building a dashboard, admin panel, or just want a cool sidebar navigation for your website — this tutorial is for you.

We’re going to create a Sidebar Menu with Submenu using jQuery — simple, clean, and responsive. Let’s jump right into it.

---

🎯 What Are We Building?

A sidebar that contains a list of menu items. Some items will have dropdown submenus that expand/collapse when clicked.

✅ Features:

• Collapsible submenu
• Smooth animation
• Lightweight jQuery logic
• Clean HTML + CSS structure

---

🧱 HTML Structure

First, let’s write the basic structure of the sidebar.

<div class="sidebar">
  <ul class="menu">
    <li><a href="#">Dashboard</a></li>
    <li class="has-submenu">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Web Development</a></li>
        <li><a href="#">App Development</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li class="has-submenu">
      <a href="#">Contact</a>
      <ul class="submenu">
        <li><a href="#">Email</a></li>
        <li><a href="#">LinkedIn</a></li>
      </ul>
    </li>
  </ul>
</div>

---

🎨 CSS Styling

Let’s add some basic styles to make it look neat.

.sidebar {
  width: 250px;
  background: #2c3e50;
  height: 100vh;
  color: white;
  padding: 20px;
}

.sidebar .menu {
  list-style: none;
  padding: 0;
}

.sidebar .menu li {
  margin-bottom: 10px;
}

.sidebar .menu a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px;
  border-radius: 5px;
}

.sidebar .menu a:hover {
  background: #34495e;
}

.submenu {
  display: none;
  margin-left: 20px;
}

.submenu li a {
  background: #3b4d61;
  padding-left: 20px;
}

---

⚙️ jQuery Logic

Now here’s the fun part. Let’s make the submenu interactive using jQuery.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    $('.has-submenu > a').click(function (e) {
      e.preventDefault();
      var submenu = $(this).next('.submenu');

      // Close other open submenus
      $('.submenu').not(submenu).slideUp();

      // Toggle the clicked submenu
      submenu.slideToggle();
    });
  });
</script>

This small piece of code is doing all the work:

• It prevents the default anchor behavior.
• Slides up all other submenus to avoid multiple open dropdowns.
• Slides down (or up) the selected submenu.

---

📱 Responsive Tips

For a better UX on mobile, you can hide the sidebar by default and toggle it with a button. Here’s a quick idea:

<button id="toggle-sidebar">☰</button>

<script>
  $('#toggle-sidebar').click(function () {
    $('.sidebar').toggle();
  });
</script>

Add some media queries in CSS to enhance the mobile view if needed.

---

💡 Real-World Use Case

I’ve used this kind of sidebar in many admin dashboards and custom CMS panels. It’s flexible, easy to manage, and fast to implement. You don’t need a whole library like Bootstrap just for a sidebar — jQuery handles it like a charm.

---

✅ Final Words

This sidebar menu with submenu is perfect for simple projects, custom admin panels, or when you want more control without relying on heavy frameworks.

You can always improve it with icons, animations, or by integrating it into frameworks like React or Vue (if needed).

Let me know if you want a version with icons, animations, or dark/light theme switch. I’d be happy to help.

Until next time,
Arsalan Malik
Senior Software Developer | India

---