Create an Expandable Sidebar Menu using HTML CSS and JS
Navigating through a website should be seamless and intuitive. A well-designed sidebar not only aids in navigation but also enhances the overall user experience by providing quick access to key sections and features. In this tutorial, we will walk through the creation of an elegant, expandable sidebar that adapts to user interactions, making it both functional and aesthetically pleasing.
This sidebar is constructed using HTML for structure, CSS for styling, and a touch of JavaScript for dynamic functionality. The design incorporates modern UI elements such as tooltips, icons and smooth transitions. Additionally, it includes a promotional section and social media links to engage users further.
Also Read: User-Friendly and Responsive Sign Up Form using HTML & CSS
By the end of this tutorial, you'll have a comprehensive understanding of how to create a sidebar that can be easily integrated into any web project. This sidebar will start off compact, showing only icons, but can expand to reveal more detailed navigation options and additional content, all while maintaining a clean and professional look.
HTML Structure
The HTML structure is divided into several key sections, all contained within the aside element. This structure ensures a clean and organized layout.
<aside>
<div class="sidebar">
<div class="sidebar-header">
<a href="#" class="logo">
<img src="https://i.ibb.co/rdycPgx/logo.jpg" alt="Logo">
<span class="text">Smart UI Studio</span>
</a>
</div>
<div class="separator"></div>
<ul>
<li>
<a href="#" class="item-content">
<span class="bx bx-home"></span><span class="tooltip">Home</span>
</a>
</li>
<li>
<a href="#" class="item-content">
<span class="bx bx-category-alt"></span><span class="tooltip">Categories</span>
</a>
</li>
<li>
<a href="#" class="item-content">
<span class="bx bx-bolt-circle"></span><span class="tooltip">Analytics</span>
</a>
</li>
<li>
<a href="#" class="item-content">
<span class="bx bx-compass"></span><span class="tooltip">Explore</span>
</a>
</li>
<li>
<a href="#" class="item-content">
<span class="bx bx-news"></span><span class="tooltip">Latest</span>
</a>
</li>
<li>
<a href="#" class="item-content">
<span class="bx bx-notepad"></span><span class="tooltip">Updates</span>
</a>
</li>
</ul>
<div class="sidebar-footer">
<div class="upgrade-wrapper">
<h3>Get 50% off | Limited Time</h3>
<span class="msg">Your Free Trail Expiring Soon, Upgrade to a premium plan to avail a discount of
50%</span>
<button class="upgrade-btn">Upgrade Plan</button>
</div>
<div class="connect-with-us">
<a href="#" class="bx bxl-youtube"></a>
<a href="#" class="bx bxl-instagram"></a>
<a href="#" class="bx bxl-discord"></a>
<a href="#" class="bx bxl-codepen"></a>
<a href="#" class="bx bxl-facebook"></a>
</div>
<div class="separator"></div>
<div class="expand-btn"><span class="ex-col-icon"></span><span class="text">Collapse</span></div>
</div>
</div>
</aside>- Sidebar Header: A clickable logo image accompanied by text, serving as a brand identifier at the top of the sidebar.
- Navigation Links: A list of navigation items, each represented by an icon and a tooltip that appears when the sidebar is collapsed. This list ensures users can navigate to different parts of the website effortlessly.
- Sidebar Footer: A promotional banner designed to encourage users to upgrade their subscription plan, highlighting any current offers or discounts.
- Social Media Links: A set of social media icons allowing users to connect with the brand on various platforms, enhancing user engagement.
- Expand/Collapse Button: A button that toggles the sidebar between its expanded and collapsed states, providing a customizable user experience.
CSS Styling
The CSS styles bring our sidebar to life, ensuring it looks modern and functions smoothly:
@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css);
:root {
--sidebar-width: 300px;
}
body {
min-height: 100vh;
font-family: 'Baloo Bhai 2';
background-color: #f0f1ff;
}
a {
text-decoration: none;
color: black;
}
li {
list-style: none;
}
aside {
position: fixed;
top: 0;
left: 0;
}
.sidebar {
width: 60px;
display: grid;
padding: 10px;
min-height: 100vh;
background-color: white;
transition: width .2s ease;
grid-template-rows: auto auto 1fr auto;
}
.sidebar-active .sidebar {
width: var(--sidebar-width);
overflow: hidden;
}
.logo {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
.sidebar-active .logo {
gap: 10px;
}
.sidebar-header img {
width: 40px;
height: 40px;
}
.text {
width: 0;
white-space: nowrap;
overflow: hidden;
}
.sidebar-active .text {
width: auto;
}
.separator {
margin: 10px 0;
width: 100%;
height: .1px;
background-color: rgb(0 0 0 / 12%);
}
.item-content {
display: flex;
gap: 20px;
padding: 10px;
align-items: center;
border-radius: 8px;
position: relative;
}
.item-content:hover,
.expand-btn:hover {
background-color: #f2f3fe;
}
.item-content .bx {
font-size: 20px;
line-height: 1.35;
}
body:not(.sidebar-active) .tooltip {
position: absolute;
right: -20px;
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%);
}
body:not(.sidebar-active) .tooltip::before {
content: "\ee04";
font-family: 'boxicons';
position: absolute;
left: 0;
top: 50%;
font-size: 20px;
color: rgb(22, 22, 22);
transform: translate(-50%, -50%);
}
body:not(.sidebar-active) .item-content:hover .tooltip {
visibility: visible;
opacity: 1;
}
.upgrade-wrapper {
display: none;
gap: 10px;
margin: 20px 0;
padding: 15px 10px;
text-align: center;
border-radius: 10px;
border: 1px solid #b8ccff;
width: calc(var(--sidebar-width) - 20px);
background: linear-gradient(130deg, #76d7f66b, #3aff8275);
}
.sidebar-active .upgrade-wrapper {
display: grid;
}
.msg {
font-size: 12px;
line-height: 1.2;
color: #464646;
}
.upgrade-btn {
padding: 5px;
border: none;
line-height: 1.8;
font-weight: 600;
color: #000000;
margin-top: 15px;
cursor: pointer;
font-size: 15px;
border-radius: 10px;
letter-spacing: .5px;
font-family: "Baloo Bhai 2";
background-color: #ffffff;
box-shadow: 0px 0px 10px 0px #00000018;
}
.upgrade-btn:hover {
background-color: #111111;
color: rgb(246, 246, 246);
}
.connect-with-us {
display: none;
justify-content: space-around;
}
.sidebar-active .connect-with-us {
display: flex;
}
.connect-with-us a {
padding: 5px;
font-size: 20px;
}
.expand-btn {
display: flex;
gap: 10px;
padding: 5px;
cursor: pointer;
line-height: 1.35;
border-radius: 8px;
align-items: center;
}
.ex-col-icon::before {
content: "\e9b6";
font-family: "boxicons";
font-size: 20px;
}
.sidebar-active .ex-col-icon::before {
content: "\e9b7";
}- Initial State: In its initial state, the sidebar is narrow, displaying only icons to conserve space.
- Expanded State: When expanded, the sidebar reveals text labels and additional content, thanks to smooth transitions that enhance the user experience.
- Hover Effects: Adding hover effects to the navigation items to improve interactivity. When users hover over an item, it highlights to indicate that it's clickable, enhancing the overall user experience.
- Tooltip: For collapsed mode, tooltips provide contextual information about each icon. These appear when the user hovers over an icon, helping users understand the navigation options without expanding the sidebar.
JavaScript Interaction
To add interactivity, a small snippet of JavaScript toggles the sidebar's expanded state.
document.querySelector('.expand-btn').addEventListener('click', () => document.body.classList.toggle('sidebar-active'))- This functionality ensures that users can easily switch between a compact view, which saves space, and a detailed view, which provides more information and options.
- This script adds or removes the sidebar-active class on the body element when the expand/collapse button is clicked. This class controls the sidebar's width and the visibility of additional content.
By combining HTML, CSS, and JavaScript, we've created a dynamic and responsive sidebar that enhances user navigation and engagement. This expandable sidebar is perfect for modern web applications, providing both a compact and an expanded view based on user preference. Its sleek design and smooth transitions make it a valuable addition to any website.
Also Read: Typing Text Effect using HTML CSS and JavaScript | Without any library
Whether you're building a new web project or enhancing an existing one, this sidebar design can be easily adapted to fit your needs. Explore the code, experiment with styles, and integrate this feature to improve your site's usability and user experience.
