Create Sidebar with Dropdown Menu in HTML CSS & JavaScript
A sidebar with dropdown menus is a useful feature that helps organize navigation links without cluttering the main page. It’s a great beginner project to improve your web development skills and learn how HTML, CSS, and JavaScript can work together to create an interactive component.
In this post, I’ll guide you through how to create a simple, interactive sidebar with dropdown menus usingHTML, CSS, andJavaScript. The sidebar will allow users to toggle visibility and expand or collapse dropdown menus. When the menus are collapsed, they will show tooltips on hover, making the interface clean and user-friendly.
By the end of this tutorial, you’ll have a fully functional and responsive sidebar with dropdown menus, ready to use in your own web projects. If you’re looking for a simpler sidebar without dropdowns, check out my earlier post on building a basicSidebar Menu in HTML CSS & JavaScript.
Video Tutorial of Sidebar with Dropdown Menu in HTML CSS & JavaScript
If you prefer learning through video, check out the YouTube tutorial linked above. It provides a detailed walkthrough of every line of code, with clear explanations and helpful comments. For those who prefer written instructions, continue reading as we break down the steps to create the sidebar menu.
Steps to Create Sidebar with Dropdown Menu HTML CSS & JavaScript
Follow these simple steps to build a responsive and interactive sidebar with dropdown functionality in HTML, CSS, and #"https://drive.google.com/file/d/146fuVdWPdmswJchYDNfA8zbnNIaj-2lc" rel="nofollow noopener">logo and place it in your project directory. Alternatively, you can use your own logo.
In theindex.html file, set up the basic structure for the sidebar menu. Use semantic elements like<aside>,<header>,<ul>,<li>, and<a> for a clean and accessible layout. Include external Google Fonts CDN links to display icons or add additional style elements.
<!DOCTYPE html><!-- Coding By CodingNepal - youtube.com/@codingnepal --><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sidebar with Dropdown Menu | CodingNepal</title> <link rel="stylesheet" href="style.css" /> <!-- Linking Google Fonts for Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" /> </head> <body> <!-- Mobile Sidebar Menu Button --> <button> <span>menu</span> </button> <aside> <!-- Sidebar Header --> <header> <a href="#"> <img src="logo.png" alt="CodingNepal" /> </a> <button> <span>chevron_left</span> </button> </header> <nav> <!-- Primary Top Nav --> <ul> <li> <a href="#"> <span>dashboard</span> <span>Dashboard</span> </a> <ul> <li><a>Dashboard</a></li> </ul> </li> <!-- Dropdown --> <li> <a href="#"> <span>calendar_today</span> <span>Services</span> <span>keyboard_arrow_down</span> </a> <!-- Dropdown Menu --> <ul> <li><a>Services</a></li> <li><a href="#">IT Consulting</a></li> <li><a href="#">Cloud Solutions</a></li> <li><a href="#">Mobile Apps</a></li> </ul> </li> <li> <a href="#"> <span>notifications</span> <span>Notifications</span> </a> <ul> <li><a>Notifications</a></li> </ul> </li> <li> <a href="#"> <span>local_library</span> <span>Resources</span> </a> <ul> <li><a>Resources</a></li> </ul> </li> <!-- Dropdown --> <li> <a href="#"> <span>star</span> <span>Bookmarks</span> <span>keyboard_arrow_down</span> </a> <!-- Dropdown Menu --> <ul> <li><a>Bookmarks</a></li> <li><a href="#">Saved Tutorials</a></li> <li><a href="#">Favorite Blogs</a></li> <li><a href="#">Resource Guides</a></li> </ul> </li> <li> <a href="#"> <span>extension</span> <span>Extensions</span> </a> <ul> <li><a>Extensions</a></li> </ul> </li> <li> <a href="#"> <span>settings</span> <span>Settings</span> </a> <ul> <li><a>Settings</a></li> </ul> </li> </ul> <!-- Secondary Bottom Nav --> <ul> <li> <a href="#"> <span>help</span> <span>Support</span> </a> <ul> <li><a>Support</a></li> </ul> </li> <li> <a href="#"> <span>logout</span> <span>Sign Out</span> </a> <ul> <li><a>Sign Out</a></li> </ul> </li> </ul> </nav> </aside> <!-- Script --> <script src="script.js"></script> </body></html>
In thestyle.css file, design your sidebar to achieve a modern and responsive look. Style the dropdown feature, experiment with colors and use fonts and background effects to enhance the overall appearance.
/* Importing Google Fonts - Poppins */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif;}body { min-height: 100vh; background: linear-gradient(#F1F3FF, #CBD4FF);}.sidebar { position: fixed; top: 0; left: 0; z-index: 10; width: 270px; height: 100vh; background: #151A2D; transition: all 0.4s ease;}.sidebar.collapsed { width: 85px;}.sidebar .sidebar-header { display: flex; position: relative; padding: 25px 20px; align-items: center; justify-content: space-between;}.sidebar-header .header-logo img { width: 46px; height: 46px; display: block; object-fit: contain; border-radius: 50%;}.sidebar-header .sidebar-toggler,.sidebar-menu-button { position: absolute; right: 20px; height: 35px; width: 35px; color: #151A2D; border: none; cursor: pointer; display: flex; background: #EEF2FF; align-items: center; justify-content: center; border-radius: 8px; transition: 0.4s ease;}.sidebar.collapsed .sidebar-header .sidebar-toggler { transform: translate(-4px, 65px);}.sidebar-header .sidebar-toggler span,.sidebar-menu-button span { font-size: 1.75rem; transition: 0.4s ease;}.sidebar.collapsed .sidebar-header .sidebar-toggler span { transform: rotate(180deg);}.sidebar-header .sidebar-toggler:hover { background: #d9e1fd;}.sidebar-nav .nav-list { list-style: none; display: flex; gap: 4px; padding: 0 15px; flex-direction: column; transform: translateY(15px); transition: 0.4s ease;}.sidebar .sidebar-nav .primary-nav { overflow-y: auto; scrollbar-width: thin; padding-bottom: 20px; height: calc(100vh - 227px); scrollbar-color: transparent transparent;}.sidebar .sidebar-nav .primary-nav:hover { scrollbar-color: #EEF2FF transparent;}.sidebar.collapsed .sidebar-nav .primary-nav { overflow: unset; transform: translateY(65px);}.sidebar-nav .nav-item .nav-link { color: #fff; display: flex; gap: 12px; white-space: nowrap; border-radius: 8px; padding: 11px 15px; align-items: center; text-decoration: none; border: 1px solid #151A2D; transition: 0.4s ease;}.sidebar-nav .nav-item:is(:hover, .open)>.nav-link:not(.dropdown-title) { color: #151A2D; background: #EEF2FF;}.sidebar .nav-link .nav-label { transition: opacity 0.3s ease;}.sidebar.collapsed .nav-link :where(.nav-label, .dropdown-icon) { opacity: 0; pointer-events: none;}.sidebar.collapsed .nav-link .dropdown-icon { transition: opacity 0.3s 0s ease;}.sidebar-nav .secondary-nav { position: absolute; bottom: 35px; width: 100%; background: #151A2D;}.sidebar-nav .nav-item { position: relative;}/* Dropdown Stylings */.sidebar-nav .dropdown-container .dropdown-icon { margin: 0 -4px 0 auto; transition: transform 0.4s ease, opacity 0.3s 0.2s ease;}.sidebar-nav .dropdown-container.open .dropdown-icon { transform: rotate(180deg);}.sidebar-nav .dropdown-menu { height: 0; overflow-y: hidden; list-style: none; padding-left: 15px; transition: height 0.4s ease;}.sidebar.collapsed .dropdown-menu { position: absolute; top: -10px; left: 100%; opacity: 0; height: auto !important; padding-right: 10px; overflow-y: unset; pointer-events: none; border-radius: 0 10px 10px 0; background: #151A2D; transition: 0s;}.sidebar.collapsed .dropdown-menu:has(.dropdown-link) { padding: 7px 10px 7px 24px;}.sidebar.sidebar.collapsed .nav-item:hover>.dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(12px); transition: all 0.4s ease;}.sidebar.sidebar.collapsed .nav-item:hover>.dropdown-menu:has(.dropdown-link) { transform: translateY(10px);}.dropdown-menu .nav-item .nav-link { color: #F1F4FF; padding: 9px 15px;}.sidebar.collapsed .dropdown-menu .nav-link { padding: 7px 15px;}.dropdown-menu .nav-item .nav-link.dropdown-title { display: none; color: #fff; padding: 9px 15px;}.dropdown-menu:has(.dropdown-link) .nav-item .dropdown-title { font-weight: 500; padding: 7px 15px;}.sidebar.collapsed .dropdown-menu .nav-item .dropdown-title { display: block;}.sidebar-menu-button { display: none;}/* Responsive media query code for small screens */@media (max-width: 768px) { .sidebar-menu-button { position: fixed; left: 20px; top: 20px; height: 40px; width: 42px; display: flex; color: #F1F4FF; background: #151A2D; } .sidebar.collapsed { width: 270px; left: -270px; } .sidebar.collapsed .sidebar-header .sidebar-toggler { transform: none; } .sidebar.collapsed .sidebar-nav .primary-nav { transform: translateY(15px); }}In thescript.js file, write JavaScript to bring interactivity to the sidebar. Implement functionality to toggle the sidebar’s visibility and enable dropdown menus to expand or collapse smoothly.
// Toggle the visibility of a dropdown menuconst toggleDropdown = (dropdown, menu, isOpen) => { dropdown.classList.toggle("open", isOpen); menu.style.height = isOpen ? `${menu.scrollHeight}px` : 0;};// Close all open dropdownsconst closeAllDropdowns = () => { document.querySelectorAll(".dropdown-container.open").forEach((openDropdown) => { toggleDropdown(openDropdown, openDropdown.querySelector(".dropdown-menu"), false); });};// Attach click event to all dropdown togglesdocument.querySelectorAll(".dropdown-toggle").forEach((dropdownToggle) => { dropdownToggle.addEventListener("click", (e) => { e.preventDefault(); const dropdown = dropdownToggle.closest(".dropdown-container"); const menu = dropdown.querySelector(".dropdown-menu"); const isOpen = dropdown.classList.contains("open"); closeAllDropdowns(); // Close all open dropdowns toggleDropdown(dropdown, menu, !isOpen); // Toggle current dropdown visibility });});// Attach click event to sidebar toggle buttonsdocument.querySelectorAll(".sidebar-toggler, .sidebar-menu-button").forEach((button) => { button.addEventListener("click", () => { closeAllDropdowns(); // Close all open dropdowns document.querySelector(".sidebar").classList.toggle("collapsed"); // Toggle collapsed class on sidebar });});// Collapse sidebar by default on small screensif (window.innerWidth <= 1024) document.querySelector(".sidebar").classList.add("collapsed");That’s it! If you’ve added the code correctly, you’re ready to see and interact with your sidebar menu. Open theindex.html file in your preferred browser to see how the sidebar works. Make sure the sidebar collapses and expands, dropdown menus function properly, and the design is responsive.
Conclusion and final word
Creating a sidebar with dropdown menus is a useful skill for web developers. This project will not only help you understand HTML, CSS, and JavaScript better but also give you a reusable component for future web applications. Whether you’re working on a personal project or a client website, thissidebar design will make your site look polished and professional.
If you encounter any problems while creating your sidebar menu, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.
Happy coding!
