In this tutorial, we’ll explore how to create a responsive sidebar using HTML, CSS, and JavaScript. This sleek sidebar navigation design allows users to easily collapse or expand the sidebar, enhancing usability on both desktop and mobile devices. By implementing various techniques, you’ll learn to build a responsive sidebar that not only looks great but also functions smoothly, making it an essential component for any modern web application. Whether you’re a beginner or an experienced developer, this guide will help you master the art of crafting a sidebar with HTML, CSS, and JavaScript.
What is a Responsive Sidebar?
A responsive sidebar is a collapsible navigation panel that adjusts based on the screen size, providing a user-friendly interface on both desktop and mobile devices. In this example, we’re creating a sidebar that can be expanded or collapsed, with a toggle button for easy navigation.
Sidebar with HTML CSS and JavaScript
The HTML code is the backbone of our sidebar. It consists of an <aside> element that holds our sidebar, which is further divided into a logo section, menu links, and a logout button. The use of div elements and Font Awesome icons enhances the visual experience, and tooltips are added for ease of navigation when the sidebar is collapsed.
Explanation:
<aside>: This tag holds the entire sidebar.
<div class=”logo”>: This section displays the logo.
<nav class=”menu”>: This contains navigation links like “Home,” “Stats,” and more.
Tooltips: Tooltips appear when you hover over the icons, providing descriptions for users.
Styling with CSS
The CSS styles are what bring the sidebar to life. We define colors, fonts, transitions, and even the animation of the sidebar when it toggles between collapsed and expanded states. Let’s break it down:
Key Features:
- position: sticky: Keeps the sidebar fixed while scrolling.
:root Variables: Declares color variables for easy customization. - Transitions: Smooth animations when expanding or collapsing the sidebar.
- Hover Effects: The sidebar items change color when hovered over, enhancing the user experience.
- Tooltip Design: We use ::before and ::after pseudo-elements to create tooltips that only show when the sidebar is collapsed, giving the user useful hints about each icon.
JavaScript for sidebar navigation
Finally, the JavaScript code enables the toggle functionality of the sidebar. When you click the toggle button, the sidebar expands or collapses, and the icons change accordingly. Here’s how the JS works:
Explanation:
- Toggle Menu: The toggleButton.addEventListener listens for clicks on the toggle button. When clicked, it toggles the class active on the sidebar.
- Icon Switch: We use style.display to switch between the open and close icons dynamically.
Responsive Sidebar
This sidebar is fully responsive, thanks to its flexible width and simple toggle mechanism. As the screen size changes, users can easily collapse or expand the sidebar to save screen space while maintaining easy access to menu items.
Source code
If you like this design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create three files. One of them is HTML, CSS and the other is JS after creating these files, paste the code provided below.
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <!-- Code by: www.codeinfoweb.com --> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Responsive Sidebar | By Code Info</title> <link rel="stylesheet" href="style.css" /> <!-- Box icons cdn link --> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" /> </head> <body> <aside class="sidebar" id="sidebar"> <!-- logo --> <div class="logo"> <i class="bx bx-cube-alt"></i> </div> <!-- menu links --> <nav class="menu"> <h1 class="menu-header">Menu</h1> <div class="menu-item nav-active" data-tooltip="Home"> <i class="bx bx-home-smile"></i> <span>Home</span> </div> <div class="menu-item" data-tooltip="Stats"> <i class="bx bx-bar-chart-alt-2"></i> <span>Stats</span> </div> <div class="menu-item" data-tooltip="Chat"> <i class="bx bx-message-square-dots"></i> <span>Chat</span> </div> <div class="menu-item" data-tooltip="Bookmarks"> <i class="bx bx-bookmarks"></i> <span>Bookmarks</span> </div> <div class="menu-item" data-tooltip="Notification"> <i class="bx bx-bell"></i> <span>Notification</span> </div> <div class="menu-item" data-tooltip="Setting"> <i class="bx bx-cog"></i> <span>Setting</span> </div> <h1 class="menu-header shortcuts">Shortcuts</h1> <div class="menu-item" data-tooltip="Add"> <i class="bx bx-add-to-queue"></i> <span>Add</span> </div> <div class="menu-item" data-tooltip="Remove"> <i class="bx bx-message-square-minus"></i> <span>Remove</span> </div> </nav> <!-- logout --> <div class="logout" data-tooltip="Logout"> <i class="bx bx-log-out"></i> <span>Logout</span> </div> <!-- toggle menu --> <div class="toggle-menu" id="toggle-button"> <i class="bx bxs-right-arrow"></i> <i class="bx bxs-left-arrow"></i> </div> </aside> <script src="main.js"></script> </body> </html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap"); * { margin: 0; padding: 0; font-family: "Agdasima", sans-serif; } /* Color Variables */ :root { --sidebar-bg: #2f323a; --sidebar-width: 100px; --sidebar-width-active: 150px; --text-color: #fff; --menu-item-color: rgb(188, 186, 186); --menu-item-hover-bg: rgb(117, 109, 109); --menu-item-hover-color: #fff; --menu-header-color: rgb(137, 135, 135); --tooltip-bg: rgba(0, 0, 0, 0.8); --border-color: rgb(218, 147, 147); } .sidebar { position: sticky; top: 0; left: 0; height: 100vh; width: var(--sidebar-width); color: var(--text-color); padding: 0 20px; background-color: var(--sidebar-bg); display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: all 0.5s ease; } .logo, .menu-item, .logout { display: flex; align-items: center; justify-content: center; transition: justify-content 0.5s ease; } .logo { margin-top: 30px; } .logo i, .menu-item i, .logout i { font-size: 2rem; transition: 0.5s ease; } .logo span, .menu-item span, .logout span { margin-left: 10px; display: none; transition: 0.5s ease; } .menu { flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; justify-content: center; } .menu-header { color: var(--menu-header-color); text-transform: uppercase; text-align: center; font-size: 16px; transition: 0.5s ease; } .menu-item { cursor: pointer; padding: 10px 20px; border-radius: 3px; color: var(--menu-item-color); transition: all 0.5 ease; } .menu-item:hover, .nav-active, .logout:hover { background: var(--menu-item-hover-bg); color: var(--menu-item-hover-color); transition: 0.5s ease; } .menu-item i, .logout i { font-size: 20px; } .logout { padding: 10px 20px; margin-bottom: 10px; border-radius: 3px; cursor: pointer; color: var(--menu-item-color); } /* when sidebar menu is active */ .sidebar.active { width: var(--sidebar-width-active); } .sidebar.active .logo, .sidebar.active .menu-item, .sidebar.active .logout { justify-content: flex-start; } /* when sidebar is active show the nav items */ .sidebar.active .logo span, .sidebar.active .menu-item span, .sidebar.active .logout span { display: block; } .sidebar.active .menu-header { font-size: 20px; text-align: left; } /* toggle menu */ .toggle-menu { position: absolute; top: 10px; right: -20px; background-color: var(--sidebar-bg); border: 1px solid var(--menu-item-hover-bg); color: var(--text-color); padding: 10px 15px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* menu item tooltip */ [data-tooltip] { position: relative; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; left: 120%; top: 50%; transform: translateY(-50%); background-color: var(--tooltip-bg); padding: 5px 10px; border-radius: 5px; font-size: 20px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } [data-tooltip]:after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border-width: 5px; border-style: solid; border-color: transparent var(--tooltip-bg) transparent transparent; opacity: 0; transition: opacity 0.5s ease; } .sidebar:not(.active) [data-tooltip]:hover::before, .sidebar:not(.active) [data-tooltip]:hover::after { opacity: 1; } .logout[data-tooltip]::before { left: 120%; } .logout[data-tooltip]::after { left: 100%; }
JS Code
const toggleButton = document.getElementById("toggle-button"); const sidebar = document.getElementById("sidebar"); const openIcon = toggleButton.querySelector(".bxs-right-arrow"); const closeIcon = toggleButton.querySelector(".bxs-left-arrow"); closeIcon.style.display = "none"; toggleButton.addEventListener("click", () => { sidebar.classList.toggle("active"); if (sidebar.classList.contains("active")) { openIcon.style.display = "none"; closeIcon.style.display = "block"; } else { openIcon.style.display = "block"; closeIcon.style.display = "none"; } });
Conclusion
Congratulations! You’ve just created a responsive sidebar using HTML, CSS, and JavaScript. The combination of these elements makes the sidebar functional, stylish, and user-friendly. This design is not only visually appealing but also enhances usability by offering a clean navigation solution for any website.