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:

<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:

@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:

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

Feel free to customize this code for your own projects!