Create Expandable Sidebar Menu using CSS only

Looking to add a clean, modern and interactive sidebar to your website without relying on JavaScript or external libraries? This tutorial walks you through building a fully functional, expandable sidebar menu using just HTML and CSS.

This sidebar is designed to:

• Expand on hover for better user experience
• Display only icons when collapsed to save space
• Show labels when expanded for easy navigation

Perfect for admin dashboards, portfolio sites and web apps. Let’s walk through the complete implementation step by step.

Expandable Sidebar Menu Structure

The sidebar menu is built using a basic div wrapper and an unordered list (ul). Each list item (li) contains a clickable link (<a>) with two span elements — one for the Material Icons and the other for the label (text like Home, Dashboard, etc.).

<div class="menu">
    <ul class="menu-content">
        <li><a href="#"><span class="material-symbols-outlined">home</span><span>Home</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">dashboard</span><span>DashBoard</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">explore</span><span>Explore</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">analytics</span><span>Analytics</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">settings</span><span>Settings</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">person</span><span>Account</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">report</span><span>Report</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">email</span><span>Contact</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">logout</span><span>Logout</span></a></li>
    </ul>
</div>

• div.menu acts as the sidebar container.
• Inside the ul.menu-content, each li holds a link containing two spans.
• material-symbols-outlined comes from Google Fonts and renders material design icons.
• The second span contains the menu label text.
• On hover, the menu expands to show the hidden labels.

This clean structure makes it easy to customize, rearrange or add more items without extra effort.

CSS Styling

Now that the layout is set, let’s apply the magic with pure CSS to make this sidebar interactive and responsive — all without a single line of JavaScript.

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
    min-height: 100vh;
    background: linear-gradient(#051f30, #000000);
}

.menu::-webkit-scrollbar {
    display: none;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 85px;
    height: 100%;
    transition: .3s;
    scrollbar-width: none;
    overflow: hidden scroll;
    background: #ffffff12;
    -ms-overflow-style: none;
    padding: 20px 20px 20px 0;
    backdrop-filter: blur(5px);
    box-shadow: 8px 0px 9px 0px #00000014;
}

.menu:hover {
    width: 260px;
}

.menu:hover li span:nth-child(2) {
    display: block;
}

.menu-content li {
    list-style: none;
    border-radius: 0px 50px 50px 0;
    transition: .3s;
    margin-bottom: 20px;
    padding-left: 20px;
}

.menu-content li:hover {
    background: #0c0c0c;
}

.menu-content li span:nth-child(2) {
    display: none;
}

a {
    text-decoration: none;
    color: rgb(213, 213, 213);
    display: flex;
    align-items: center;
    font-family: 'calibri';
}

.material-symbols-outlined {
    padding: 10px;
    font-size: 25px;
    margin-right: 10px;
    border-radius: 50%;
    background: #0c0c0c;
}

• menu is set to a narrow width by default (85px) and expands to 260px on hover.
• We hide scrollbars using both ::-webkit-scrollbar and scrollbar-width.
• backdrop-filter: blur(5px) gives a smooth glassy background.
• The second span (the text label) is hidden by default using display: none and becomes visible on hover.
• A modern gradient background enhances the contrast.
• Material Icons get rounded backgrounds and spacing via padding and margins.

This CSS-only sidebar menu is lightweight, modern and visually striking — perfect for any dashboard or SPA-style layout.

Final Thoughts

Creating a responsive sidebar menu without JavaScript is not only possible — it’s elegant. This expandable sidebar menu is proof that you can build interactive UI components with only HTML and CSS.

Key features of this design:

• CSS-only sidebar toggle on hover
• Material Symbols integration
• Clean, modern styling
• Perfect for dashboards, admin panels and navigation menus

If you’re looking to improve your UI design skills or need a lightweight expandable sidebar menu, this pure CSS vertical menu is a great addition to your front-end toolbox.