Sidebar Menu with Active State

A sidebar menu with active state built using pure HTML and CSS that highlights the currently selected navigation item within a vertical layout. It improves navigation clarity and user orientation without relying on JavaScript.

Usage

Use this component when interfaces require clear current page indication, such as dashboards, admin panels, documentation systems, or multi section web applications.

Implementation

The active state is managed using CSS class based styling and state selectors, applying distinct background, border, or typography emphasis to the selected item. Responsive rules ensure proper stacking and alignment on smaller screens.

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

• Built with pure HTML and CSS
• No JavaScript required
• Highlights the current navigation item
• Enhances user orientation clarity
• Fully responsive across breakpoints
• Suitable for dashboards and documentation layouts
• Easy to customize active state styling

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.