Sidebar Menu with Active State

This sidebar menu highlights the active navigation item, improving usability and user orientation.

HTML

<aside class="ss-sidebar">
  <a href="#" class="active">Dashboard</a>
  <a href="#">Users</a>
  <a href="#">Settings</a>
</aside>

<aside class="ss-sidebar">
  <a href="#" class="active">Dashboard</a>
  <a href="#">Users</a>
  <a href="#">Settings</a>
</aside>

CSS

.ss-sidebar{
  width:230px;
  padding:20px;
  background:#020617;
}

.ss-sidebar a{
  display:block;
  padding:10px 14px;
  color:#cbd5f5;
  text-decoration:none;
  border-radius:8px;
}

.ss-sidebar a.active{
  background:#2563eb;
  color:#ffffff;
}

.ss-sidebar{
  width:230px;
  padding:20px;
  background:#020617;
}

.ss-sidebar a{
  display:block;
  padding:10px 14px;
  color:#cbd5f5;
  text-decoration:none;
  border-radius:8px;
}

.ss-sidebar a.active{
  background:#2563eb;
  color:#ffffff;
}

Notes

• Active state support
• Better navigation clarity
• Modern UI
• Easy JS integration

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.