A sidebar menu with icons built using pure HTML and CSS that combines visual symbols with vertical navigation links. It enhances navigation recognition and usability by pairing text labels with intuitive icon indicators.
Usage
Use this component when interfaces require icon supported navigation clarity, such as dashboards, admin panels, web applications, or documentation systems where quick visual identification improves user flow.
Implementation
The layout uses icon and label alignment within a vertical stack, maintaining consistent spacing and hover states. CSS controls sizing, alignment, responsive stacking, and visual feedback for active or hovered items.
HTML
<nav class="ss-sidebar">
<a href="#">
<img src="icons/home.svg" alt="Home icon">
<span>Home</span>
</a>
<a href="#">
<img src="icons/components.svg" alt="Components icon">
<span>Components</span>
</a>
<a href="#">
<img src="icons/templates.svg" alt="Templates icon">
<span>Templates</span>
</a>
<a href="#">
<img src="icons/docs.svg" alt="Documentation icon">
<span>Documentation</span>
</a>
<a href="#">
<img src="icons/settings.svg" alt="Settings icon">
<span>Settings</span>
</a>
</nav>CSS
.ss-sidebar {
display: grid;
gap: 6px;
padding: 8px;
}
.ss-sidebar a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
color: var(--sidebar-text);
transition: background 0.2s ease, color 0.2s ease;
}
.ss-sidebar a:hover {
background: rgba(0, 0, 0, 0.06);
}
.ss-sidebar a.active {
background: rgba(0, 0, 0, 0.08);
}
.ss-sidebar img {
width: 18px;
height: 18px;
object-fit: contain;
filter: var(--icon-filter);
}
:root {
--sidebar-text: #0f172a;
--icon-filter: none;
}
@media (prefers-color-scheme: dark) {
:root {
--sidebar-text: #e5e7eb;
--icon-filter: invert(1);
}
.ss-sidebar a:hover {
background: rgba(255, 255, 255, 0.06);
}
.ss-sidebar a.active {
background: rgba(255, 255, 255, 0.08);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Combines icons with vertical navigation
- Improves visual recognition speed
- Fully responsive across breakpoints
- Suitable for dashboards and application layouts
- Easy to customize icon size and spacing
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.