Welcome to this tutorial on Design a Modern Dashboard Sidebar UI. This is an automatically generated post based on popular examples to help you learn and implement this concept.

HTML Structure

Here is the basic HTML structure for this project:

HTML CODE
<div class="dashboard-layout">
  <aside class="modern-sidebar">
    <div class="sidebar-brand">
      <div class="logo-shape"></div>
      <span class="logo-name">NexusUI</span>
    </div>
    
    <div class="sidebar-section">
      <span class="section-title">MAIN</span>
      <a href="#" class="nav-link active">
        <i class="fas fa-home"></i> Overview
      </a>
      <a href="#" class="nav-link">
        <i class="fas fa-chart-pie"></i> Statistics
      </a>
    </div>

    <div class="sidebar-section">
      <span class="section-title">MANAGE</span>
      <a href="#" class="nav-link">
        <i class="fas fa-users"></i> Customers
      </a>
      <a href="#" class="nav-link">
        <i class="fas fa-box"></i> Products
      </a>
    </div>

    <div class="user-profile">
      <img src="https://i.pravatar.cc/150?img=32" alt="User" class="avatar">
      <div class="user-info">
        <h4>Jane Doe</h4>
        <p>Admin</p>
      </div>
    </div>
  </aside>
  <main class="dashboard-content">
    <h2>Modern Dashboard</h2>
  </main>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

CSS Styling

Style your component using the following CSS:

CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #f8fafc;
}

.dashboard-layout {
  display: flex;
  height: 100vh;
}

.modern-sidebar {
  width: 270px;
  background: #ffffff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.03);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.logo-shape {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 10px;
  transform: rotate(45deg);
}

.logo-name {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
}

.sidebar-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 12px;
  display: block;
  letter-spacing: 1px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: all 0.3s;
}

.nav-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.nav-link.active {
  background: #10b981;
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.nav-link i {
  font-size: 18px;
}

.user-profile {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 16px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info h4 {
  margin: 0 0 2px 0;
  font-size: 14px;
  color: #0f172a;
}

.user-info p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.dashboard-content {
  flex: 1;
  padding: 40px;
}

JavaScript Logic (if applicable)

For dynamic behavior, you can use the following JavaScript snippet:

JAVASCRIPT CODE
document.addEventListener('DOMContentLoaded', () =&gt; {
  const links = document.querySelectorAll('.nav-link');
  links.forEach(link =&gt; {
    link.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      links.forEach(l =&gt; l.classList.remove('active'));
      e.currentTarget.classList.add('active');
    });
  });
});

Feel free to customize this code for your own projects!