Category · Navigation Menus Difficulty Level · Intermediate Published on · January 17, 2024

Vertical Sidebar Menu

A sleek vertical sidebar navigation menu with smooth animations and collapsible functionality, perfect for admin dashboards and modern web applications.

#sidebar #vertical #navigation #collapsible #dashboard

Responsive Design

Yes

Dark Mode Support

lines

391

Browser Compatibility

Live Preview

Interact with the component without leaving the page.

400px

A modern, collapsible sidebar navigation perfect for admin dashboards and web applications. Features smooth animations, active states, and responsive design.

Features

Collapsible Design: Toggle between expanded and collapsed states
Smooth Animations: CSS transitions for all interactions
Active States: Visual feedback for current page/section
User Profile Section: Integrated user information display
Responsive: Adapts to mobile screens
Icon Support: Easy to customize with your preferred icons

Key Components

Logo/brand area with icon and text
Toggle button for collapse/expand functionality
Smooth transition animations

Icon-based navigation items
Hover effects and active states
Gradient backgrounds for active items
Smooth slide animations

User avatar and information
Collapsible user details
Professional styling

Customization Options

Colors: Modify background gradients and accent colors
Icons: Replace emoji icons with Font Awesome or custom icons
Width: Adjust sidebar width and collapsed width
Animation Speed: Customize transition durations
Typography: Change fonts and text sizes

Usage Tips

Replace emoji icons with your preferred icon library
Add tooltips for collapsed state navigation
Implement proper routing for navigation links
Consider adding sub-menus for complex navigation structures
Add loading states for dynamic content

Browser Support

Works in all modern browsers. Uses CSS Grid, Flexbox, and CSS custom properties for optimal performance and maintainability.

HTML

lines

CSS

236

lines

JavaScript

lines

                <div class="sidebar-demo">
  <div class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <div class="logo">
        <span class="logo-icon">🚀</span>
        <span class="logo-text">Dashboard</span>
      </div>
      <button class="toggle-btn" id="toggleBtn">
        <span class="toggle-icon">‹</span>
      </button>
    </div>
    
    <nav class="sidebar-nav">
      <ul class="nav-list">
        <li class="nav-item active">
          <a href="#" class="nav-link" onclick="return false;">
            <span class="nav-icon">🏠</span>
            <span class="nav-text">Dashboard</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" onclick="return false;">
            <span class="nav-icon">👥</span>
            <span class="nav-text">Users</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" onclick="return false;">
            <span class="nav-icon">📊</span>
            <span class="nav-text">Analytics</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" onclick="return false;">
            <span class="nav-icon">⚙️</span>
            <span class="nav-text">Settings</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" onclick="return false;">
            <span class="nav-icon">📝</span>
            <span class="nav-text">Reports</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" onclick="return false;">
            <span class="nav-icon">💬</span>
            <span class="nav-text">Messages</span>
          </a>
        </li>
      </ul>
    </nav>
    
    <div class="sidebar-footer">
      <div class="user-profile">
        <div class="user-avatar">👤</div>
        <div class="user-info">
          <span class="user-name">John Doe</span>
          <span class="user-role">Admin</span>
        </div>
      </div>
    </div>
  </div>
  
  <div class="main-content">
    <h2>Sidebar Navigation Demo</h2>
    <p>Click the toggle button (‹) to collapse/expand the sidebar.</p>
    <p>Try clicking on different menu items to see the active state changes.</p>
  </div>
</div>

              

                .sidebar-demo {
  display: flex;
  height: 380px;
  background: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.sidebar {
  width: 280px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
  width: 80px;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  font-size: 24px;
  min-width: 24px;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .logo-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.toggle-icon {
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.sidebar.collapsed .toggle-icon {
  transform: rotate(180deg);
}

.sidebar-nav {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 4px 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 0 25px 25px 0;
  margin-right: 20px;
  position: relative;
  overflow: hidden;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(5px);
}

.nav-item.active .nav-link {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.nav-icon {
  font-size: 20px;
  min-width: 20px;
  text-align: center;
}

.nav-text {
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .nav-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  margin-right: 0;
  border-radius: 12px;
  margin: 4px 12px;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  min-width: 40px;
}

.user-info {
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
}

.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.sidebar.collapsed .user-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.main-content {
  flex: 1;
  padding: 40px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.main-content h2 {
  color: #1e293b;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.main-content p {
  color: #64748b;
  margin: 8px 0;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    position: absolute;
    left: -280px;
    z-index: 1000;
    height: 100%;
  }
  
  .sidebar.mobile-open {
    left: 0;
  }
  
  .main-content {
    padding: 20px;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  const sidebar = document.getElementById('sidebar');
  const toggleBtn = document.getElementById('toggleBtn');
  const navLinks = document.querySelectorAll('.nav-link');
  
  // Toggle sidebar
  if (toggleBtn && sidebar) {
    toggleBtn.addEventListener('click', function() {
      sidebar.classList.toggle('collapsed');
      
      // Show feedback
      const isCollapsed = sidebar.classList.contains('collapsed');
      showFeedback(isCollapsed ? 'Sidebar collapsed' : 'Sidebar expanded');
    });
  }
  
  // Handle nav link clicks
  navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Remove active class from all items
      document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
      });
      
      // Add active class to clicked item
      this.closest('.nav-item').classList.add('active');
      
      const linkText = this.querySelector('.nav-text').textContent;
      showFeedback(`Navigated to: \${linkText}`);
    });
  });
  
  // Mobile responsive
  function handleResize() {
    if (window.innerWidth <= 768) {
      sidebar.classList.remove('collapsed');
    }
  }
  
  window.addEventListener('resize', handleResize);
  handleResize();
  
  // Feedback function
  function showFeedback(message) {
    const existing = document.querySelector('.demo-feedback');
    if (existing) existing.remove();
    
    const feedback = document.createElement('div');
    feedback.className = 'demo-feedback';
    feedback.textContent = message;
    feedback.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      z-index: 10001;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      transform: translateX(100%);
      transition: transform 0.3s ease;
    `;
    
    document.body.appendChild(feedback);
    
    requestAnimationFrame(() => {
      feedback.style.transform = 'translateX(0)';
    });
    
    setTimeout(() => {
      feedback.style.transform = 'translateX(100%)';
      setTimeout(() => feedback.remove(), 300);
    }, 2500);
  }
  
  // Initial feedback
  setTimeout(() => {
    showFeedback('Try the toggle button!');
  }, 1000);
});

              

Vertical Sidebar Menu

Live Preview

Vertical Sidebar Menu

Features

Key Components

Sidebar Header

Navigation Menu

User Profile Footer

Customization Options

Usage Tips

Browser Support

Related Code Snippets

Animated Back to Top Button

Animated Navigation Menu

Animated Progress Circle

Explore template packs