This collapsible sidebar menu layout is designed to support expandable navigation, perfect for complex applications.
HTML
<aside class="ss-sidebar">
<button class="toggle">Menu</button>
<nav>
<a href="#">Overview</a>
<a href="#">Reports</a>
</nav>
</aside>CSS
.ss-sidebar{
max-width:220px;
padding:12px;
border-radius:14px;
background:var(--sb-bg);
border:1px solid var(--sb-border);
display:grid;
gap:10px;
}
.ss-sidebar .toggle{
padding:8px 10px;
font-size:13px;
border-radius:8px;
border:none;
cursor:pointer;
background:var(--btn-bg);
color:var(--btn-text);
}
.ss-sidebar nav{
display:grid;
gap:6px;
overflow:hidden;
max-height:0;
transition:max-height .25s ease;
}
.ss-sidebar:focus-within nav{
max-height:120px;
}
.ss-sidebar nav a{
padding:8px 10px;
border-radius:8px;
text-decoration:none;
font-size:13px;
color:var(--sb-text);
background:var(--sb-item-bg);
transition:background .2s ease;
}
.ss-sidebar nav a:hover{
background:var(--sb-item-hover);
}
:root{
--sb-bg:#ffffff;
--sb-border:#e5e7eb;
--sb-text:#0f172a;
--sb-item-bg:#f8fafc;
--sb-item-hover:#eef2ff;
--btn-bg:#2563eb;
--btn-text:#ffffff;
}
@media (prefers-color-scheme: dark){
:root{
--sb-bg:#020617;
--sb-border:#1f2937;
--sb-text:#e5e7eb;
--sb-item-bg:#020617;
--sb-item-hover:#1f2937;
--btn-bg:#3b82f6;
--btn-text:#ffffff;
}
}Notes
- Ready for JS toggle
- Clean structure
- Scales well
- Admin-friendly
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.