Collapsible Sidebar Menu: Create sidebar menu using HTML CSS JS

A sidebar is a key component in modern web design, offering a functional and user-friendly way to navigate content-heavy applications. Whether you’re building a dashboard, a content management system or a personal project, a well-designed sidebar can enhance the user experience by organizing navigation efficiently and adding visual appeal.

This article will guide you through the concept of creating a collapsible sidebar using HTML, CSS and JavaScript. Instead of overwhelming you with technical code, we’ll focus on the practical applications, design principles and features of such a component.

Also Read: Image folding Effect using HTML and CSS

Key Features of a Collapsible Sidebar

Before you build a collapsible sidebar, it’s essential to understand its primary components and functionality:

• Collapsible Design: The main characteristic of such a sidebar is its ability to expand and collapse. In the expanded state, the user sees the full menu, including text labels, icons and additional elements. In the collapsed state, it shrinks to save space, showing only icons or tooltips for guidance.
• Tooltips: Tooltips are an excellent addition to a collapsed sidebar. When a user hovers over an icon, a small label appears, providing context without taking up extra space. This feature improves usability, especially for new users.
• Transitions and Animations: Smooth animations enhance the visual appeal and usability of the sidebar. A well-executed animation, such as a slide-in or fade-out effect, ensures that users enjoy a seamless interaction.
• Fixed Positioning: A fixed sidebar remains visible regardless of how much the user scrolls. This approach is particularly useful for dashboards and applications where constant navigation is necessary.
• Customizable Layout: A sidebar should adapt to different screen sizes and be customizable for various use cases. For example, you can add submenus, widgets or even integrate third-party tools.

HTML Structure

Before starting, you need a clear structure in mind. A collapsible sidebar typically includes:

• Logo Section: Displays a logo or brand name.
• Navigation Items: These are the clickable menu options (e.g., Home, Profile, Settings).
• Toggle Button: Lets the user expand or collapse the sidebar.
• Content Area: The main section that adjusts its position based on the sidebar’s width.

Draw a rough layout or visualize how you want the sidebar to appear in expanded and collapsed states.

<aside>
  <button class="menu-btn fa fa-chevron-left"></button>
  <a href="/" class="logo-wrapper">
    <span class="fa-brands fa-uikit"></span>
    <span class="brand-name">Smart UI Studio</span>
  </a>
  <div class="separator"></div>
  <ul class="menu-items">
    <li><a href="#"><span class="icon fa fa-house"></span><span class="item-name">Home</span></a><span
        class="tooltip">Home</span>
    </li>
    <li><a href="#"><span class="icon fa fa-layer-group"></span><span class="item-name">Dashboard</span></a>
      <span class="tooltip">Dashboard</span>
    </li>
    <li><a href="#"><span class="icon fa fa-chart-line"></span><span class="item-name">Analytics</span></a>
      <span class="tooltip">Analytics</span>
    </li>
    <li><a href="#"><span class="icon fa fa-chart-simple"></span><span class="item-name">Leaderboard</span></a>
      <span class="tooltip">Leaderboard</span>
    </li>
    <li><a href="#"><span class="icon fa fa-user"></span><span class="item-name">Account</span></a>
      <span class="tooltip">Account</span>
    </li>
    <li><a href="#"><span class="icon fa fa-gear"></span><span class="item-name">Settings</span></a>
      <span class="tooltip">Settings</span>
    </li>
    <li><a href="#"><span class="icon fa fa-comment-dots"></span><span class="item-name">Contact</span></a>
      <span class="tooltip">Contact</span>
    </li>
  </ul>
</aside>
<main></main>

• Logo Section: This section houses the branding of your application. It often contains a logo icon and a brand name. In the collapsed state, the brand name may disappear, leaving only the logo visible.
• Navigation Links: These links direct users to various sections of your application. Each link typically has an icon and a label to make it recognizable.
• Separator: A visual element like a thin line or space helps organize the menu items into logical groups.
• Collapsible Button: This button enables users to toggle between the expanded and collapsed states of the sidebar. It often uses an arrow icon to indicate the current state.
• Tooltips (Optional): Tooltips provide additional information when the sidebar is collapsed. They appear when the user hovers over a menu item, making navigation intuitive even in the compact view.

Styling with CSS

Next, we need to style the collapsible sidebar using CSS to make it visually appealing and user-friendly. Our goal is to create a clean, responsive design that is easy to navigate to interact with.

@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css);

body {
  font-family: "Baloo Bhai 2";
  background: #151f29;
  min-height: 100vh;
}

:root {
  --menu-width: 300px;
  --collapsed-width: 60px;
}

aside {
  padding: 10px;
  position: fixed;
  min-height: 100vh;
  background: linear-gradient(0deg, black, #1f314b);
  width: 300px;
  color: white;
  transition: .3s;
  box-shadow: 0px 0px 15px 0px #00000073;
  z-index: 1;
}

.collapsed aside {
  width: var(--collapsed-width);
}

.menu-btn {
  color: white;
  position: absolute;
  top: 20px;
  right: 0;
  padding: 8px;
  border: none;
  font-size: 15px;
  aspect-ratio: 1;
  border-radius: 0 50% 50% 0;
  cursor: pointer;
  transform: translateX(100%);
  box-shadow: 2px 0px 5px 0px #1a1a1a;
  background: #1b2b42;
}

.logo-wrapper {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

a {
  text-decoration: none;
  color: white;
}

.fa-uikit:before {
  font-size: 25px;
}

.brand-name {
  font-size: 20px;
  transition: .3s;
}

.collapsed .brand-name {
  width: 0;
  visibility: hidden;
  transition-delay: .3s;
}

.separator {
  width: 100%;
  height: 1px;
  background-color: rgb(171 171 171 / 21%);
}

.menu-items {
  margin-top: 15px;
}

ul {
  list-style: none;
}

.menu-items a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.menu-items a:hover {
  color: #daddff;
  background: #00000017;
  border-radius: 10px;
}

.menu-items li {
  position: relative;
}

.icon {
  font-size: 20px;
}

.item-name {
  transition: .3s;
}

.collapsed .item-name {
  width: 0;
  visibility: hidden;
  transition-delay: .3s;
}

.tooltip {
  position: absolute;
  right: -25px;
  top: 50%;
  color: white;
  padding: 5px 15px;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
  background-color: rgb(22, 22, 22);
  transform: translate(100%, -50%);
}

.collapsed .menu-items a:hover+.tooltip {
  visibility: visible;
  opacity: 1;
}

.tooltip::before {
  content: "\f0d9";
  font-family: 'Font Awesome 6 Free';
  position: absolute;
  font-weight: 900;
  left: 0;
  top: 50%;
  font-size: 30px;
  color: #161616;
  transform: translate(-50%, -50%);
}

main {
  position: relative;
  left: calc(var(--menu-width) + 20px);
  width: calc(100% - (var(--menu-width) + 20px));
  transition: .3s;
  padding: 10px;
  color: white;
}

.collapsed main {
  left: calc(var(--collapsed-width) + 20px);
}

Begin with static styling for the sidebar to define its appearance.

• Width: Define different widths for expanded and collapsed states.
• Positioning: Sidebars are usually fixed to the left or right edge of the screen.
• Background and Color: Use a solid or gradient background for a modern look.
• Spacing: Add padding and margin for neat alignment.

Without transitions, the sidebar might feel jerky or abrupt when toggling. To make it smooth:

• Use CSS transitions to animate the width change.
• Add delays or easing effects to make the collapse/expand action visually appealing.

A common challenge is ensuring the main content area adjusts dynamically based on the sidebar’s state.

• When the sidebar expands, the content area should shift to the right (or left, depending on the sidebar’s position).
• When it collapses, the content should expand to take up the freed space.

Interactivity with JavaScript

JavaScript brings the sidebar to life by allowing it to toggle between expanded and collapsed states. The idea is simple:

Add a click event listener to the toggle button. When the button is clicked:

• Change the sidebar’s width.
• Add or remove CSS classes dynamically to trigger the desired styles (e.g., hiding text labels).

const menuBtn = document.querySelector(".menu-btn");
menuBtn.addEventListener("click", (e) => {
  document.body.classList.toggle("collapsed");
  e.currentTarget.classList.toggle("fa-chevron-right");
  e.currentTarget.classList.toggle("fa-chevron-left");
})

Building a collapsible sidebar is a rewarding  for beginners. It not only teaches you foundational web development concepts but also equips you with the skills to create functional and visually appealing designs. By breaking the process into manageable steps and practicing regularly, you’ll soon master the art of creating interactive web components.

Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive 

Now, take what you’ve learned and start building your first collapsible sidebar. With patience and practice, you’ll be amazed at what you can create.

Download