5 Sidebar Menu Responsive Siap Pakai (HTML, CSS, JS)

Farhan Hidayat — Wed, 29 Apr 2026 16:32:34 +0000

Sidebar menu responsive jadi salah satu elemen penting dalam desain website modern, terutama untuk dashboard dan halaman dengan banyak navigasi. Selain itu, penggunaan sidebar yang tepat bisa bikin tampilan lebih rapi dan mudah diakses di berbagai device. Nah, di artikel ini kamu akan menemukan sidebar menu HTML CSS JS yang siap pakai, praktis, dan bisa langsung kamu gunakan tanpa ribet.

Pertama-tama, banyak website masih punya masalah pada bagian navigasi. Misalnya, menu yang tidak nyaman diakses di HP atau tampilan yang berantakan saat dibuka di layar kecil. Akibatnya, user jadi kesulitan dan cepat meninggalkan website.

Di sisi lain, sidebar responsive hadir sebagai solusi yang lebih fleksibel. Dengan desain yang bisa menyesuaikan ukuran layar, navigasi jadi lebih rapi dan mudah digunakan. Selain itu, sidebar juga membantu meningkatkan user experience karena semua menu tersusun dengan jelas.

Sekarang kita masuk ke bagian yang paling ditunggu. Berikut ini beberapa contoh sidebar yang bisa langsung kamu gunakan.

HTML




  
  
  Minimo Dashboard
  
  



  

    
      
        
        Minimo
      

      
         Dashboard
         Analytics
         Products
         Orders
         Customers
         Settings
         Logout
      
    

    
      
        

        
          
        
      

      
        Dashboard
        Welcome back, Admin!

        
          
            
              
              Total Users
            
            1,250
            +12%
          

          
            
              
              Orders
            
            320
            +8%
          

          
            
              
              Revenue
            
            $12,850
            +15%
          

          
            
              
              Products
            
            58
            +5%
          
        

        
          
            
              Sales Overview
              
            
            
          

          
            Recent Orders

            
              
              
                #ORD-001
                John Doe
              
            

            
              
              
                #ORD-002
                Jane Smith
              
            

            
              
              
                #ORD-003
                Michael Lee
              
            

            
              
              
                #ORD-004
                Sarah Wilson
              
            

            
              
              
                #ORD-005
                David Brown

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: linear-gradient(135deg, #eef5ff, #f8fbff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #17233c;
  padding: 40px 0;
}

.dashboard {
  width: 92%;
  max-width: 1180px;
  min-height: 760px;
  height: auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(64, 93, 135, 0.25);
  display: flex;
  overflow: visible;
  position: relative;
}

.sidebar {
  width: 260px;
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid #edf1f7;
  padding: 34px 24px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 36px;
}

.brand i {
  font-size: 30px;
  color: #1677ff;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

nav a {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-radius: 12px;
  color: #697386;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

nav a i {
  font-size: 23px;
}

nav a.active,
nav a:hover {
  background: #edf4ff;
  color: #1677ff;
}

.main {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

header {
  height: 88px;
  border-bottom: 1px solid #edf1f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
}

.menu-btn {
  border: none;
  background: transparent;
  font-size: 34px;
  color: #6b7a90;
  cursor: pointer;
}

.profile {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef2f8;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8c98aa;
  font-size: 28px;
}

.content {
  padding: 34px 40px 70px;
}

.content h1 {
  font-size: 34px;
  margin-bottom: 8px;
}

.content > p {
  font-size: 17px;
  color: #6d7585;
  margin-bottom: 32px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  min-height: 150px;
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 16px;
  padding: 24px 18px;
  box-shadow: 0 12px 28px rgba(80, 105, 145, 0.1);
  position: relative;
}

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

.card .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.card span {
  color: #677184;
  font-weight: 500;
}

.card h2 {
  font-size: 28px;
  margin-top: 28px;
}

.card b {
  position: absolute;
  right: 20px;
  bottom: 35px;
  color: #23bf63;
  font-size: 14px;
}

.blue {
  background: #eaf3ff;
  color: #1677ff;
}

.green {
  background: #e9faef;
  color: #22b85f;
}

.purple {
  background: #f0ebff;
  color: #715cff;
}

.orange {
  background: #fff1e8;
  color: #ff7b22;
}

.yellow {
  background: #fff6dd;
  color: #f6a800;
}

.pink {
  background: #ffe8f1;
  color: #ff4e8a;
}

.bottom {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}

.chart-box,
.orders-box {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #edf1f7;
  box-shadow: 0 12px 28px rgba(80, 105, 145, 0.1);
}

.chart-box {
  min-height: 360px;
  padding: 28px;
}

.box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.box-head h3,
.orders-box h3 {
  font-size: 18px;
}

.box-head button {
  border: 1px solid #e1e7f0;
  background: #fff;
  color: #677184;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 14px;
  cursor: pointer;
}

.orders-box {
  padding: 28px;
}

.order {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 23px;
}

.order-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.order h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.order p {
  font-size: 13px;
  color: #70798a;
}

canvas {
  width: 100% !important;
  height: 250px !important;
}

.overlay {
  display: none;
}

/* Tablet */
@media (max-width: 1024px) {
  body {
    padding: 30px 20px;
  }

  .dashboard {
    width: 100%;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bottom {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body {
    padding: 20px 14px;
  }

  .dashboard {
    width: 100%;
    min-height: 720px;
    height: auto;
    border-radius: 28px;
    overflow: visible;
  }

  .sidebar {
    position: fixed;
    left: -270px;
    top: 20px;
    bottom: 20px;
    width: 250px;
    z-index: 100;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(30, 50, 90, 0.25);
    transition: 0.35s ease;
    overflow-y: auto;
  }

  .sidebar.show {
    left: 14px;
  }

  .overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 45, 0.18);
    z-index: 90;
  }

  header {
    height: 76px;
    padding: 0 22px;
  }

  .profile {
    display: none;
  }

  .content {
    padding: 26px 22px 80px;
  }

  .content h1 {
    font-size: 30px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 145px;
  }

  .bottom {
    grid-template-columns: 1fr;
  }

  .chart-box {
    min-height: 340px;
    padding: 22px;
  }

  .orders-box {
    padding: 22px;
  }

  canvas {
    height: 230px !important;
  }
}

/* Small Mobile */
@media (max-width: 420px) {
  .content {
    padding: 24px 18px 80px;
  }

  .box-head {
    gap: 12px;
  }

  .box-head button {
    padding: 9px 12px;
    font-size: 12px;
  }

  .card h2 {
    font-size: 26px;
  }
}

const ctx = document.getElementById('salesChart');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      data: [1800, 3000, 4100, 3500, 4600, 5900, 5400],
      borderColor: '#1677ff',
      backgroundColor: 'rgba(22, 119, 255, 0.12)',
      fill: true,
      tension: 0.35,
      borderWidth: 3,
      pointRadius: 4,
      pointBackgroundColor: '#ffffff',
      pointBorderColor: '#1677ff',
      pointBorderWidth: 2
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 8000,
        ticks: {
          callback: function(value) {
            return value === 0 ? '0' : value / 1000 + 'K';
          },
          color: '#6d7585'
        },
        grid: {
          color: '#edf1f7'
        },
        border: {
          display: false
        }
      },
      x: {
        ticks: {
          color: '#6d7585'
        },
        grid: {
          display: false
        },
        border: {
          display: false
        }
      }
    }
  }
});

const sidebar = document.getElementById('sidebar');
const menuBtn = document.getElementById('menuBtn');
const overlay = document.getElementById('overlay');

menuBtn.addEventListener('click', () => {
  sidebar.classList.add('show');
  overlay.classList.add('show');
});

overlay.addEventListener('click', () => {
  sidebar.classList.remove('show');
  overlay.classList.remove('show');
});

Sidebar ini cocok banget untuk pemula. Selain ringan, tampilannya juga bersih dan fokus pada fungsi utama. Jadi, kamu bisa langsung pakai tanpa banyak penyesuaian.

HTML




  
  
  Sidebar Toggle
  
  



  
    SIDEBAR TOGGLE
    HIDE & SHOW

    
      
      
    

    
      

        
          
            
            Minimo
          

          
            Dashboard
            Analytics
            Products
            Orders
            Customers
            Settings
            Logout
          
        

        
          
            

            
              
            
          

          
            Dashboard
            Welcome back, Admin!

            
              
                
                  
                  Total Users
                
                1,250
                +12%
              

              
                
                  
                  Orders
                
                320
                +8%
              

              
                
                  
                  Revenue
                
                $12,850
                +15%
              
            

            
              
                Sales Overview
                
              

              
                Recent Orders

                
                  
                  
                    #ORD-001
                    John Doe
                  
                

                
                  
                  
                    #ORD-002
                    Jane Smith
                  
                

                
                  
                  
                    #ORD-003
                    Michael Lee
                  
                

                
                  
                  
                    #ORD-004
                    Sarah Wilson
                  
                

                
                  
                  
                    #ORD-005
                    David Brown
                  
                
              
            
          
        

      

      
    

    
      
        
      
      
        Click to Toggle Sidebar
        Hide or Show Easily

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: linear-gradient(135deg, #f7fbff, #eef6ff);
  color: #17233c;
}

.hero {
  width: 100%;
  min-height: 100vh;
  padding: 35px 35px 70px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(44px, 6vw, 78px);
  font-weight: 800;
  letter-spacing: 2px;
  color: #101b2e;
  text-shadow: 0 8px 18px rgba(20, 35, 60, 0.12);
}

.hero h2 {
  font-size: clamp(28px, 3.5vw, 46px);
  margin-top: 5px;
  font-weight: 800;
}

.hero h2 span {
  color: #ff5b54;
}

.hero h2 b {
  color: #25b86a;
}

.buttons {
  width: 78%;
  max-width: 1000px;
  margin: 30px auto 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.buttons button {
  border: none;
  color: #fff;
  padding: 14px 34px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(50, 100, 220, 0.28);
}

.show-btn {
  background: linear-gradient(135deg, #2f8bff, #235dff);
}

.hide-btn {
  background: linear-gradient(135deg, #7e55ff, #6338df);
}

.demo-wrapper {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
}

.dashboard {
  width: 100%;
  min-height: 640px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 22px;
  box-shadow: 0 28px 65px rgba(35, 67, 120, 0.24);
  display: flex;
  overflow: hidden;
  text-align: left;
}

.sidebar {
  width: 240px;
  background: linear-gradient(180deg, #0e1b2e, #081524);
  padding: 30px 22px;
  flex-shrink: 0;
  transition: width 0.35s ease, padding 0.35s ease;
}

.sidebar.hide {
  width: 74px;
  padding: 22px 13px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 34px;
  white-space: nowrap;
}

.brand i {
  color: #297cff;
  font-size: 30px;
}

.sidebar.hide .brand span,
.sidebar.hide nav a span {
  display: none;
}

.sidebar.hide .brand,
.sidebar.hide nav a {
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

nav a {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-radius: 9px;
  color: #d7dde8;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

nav a i {
  font-size: 23px;
}

nav a.active,
nav a:hover {
  background: linear-gradient(135deg, #338cff, #245cff);
  color: #fff;
}

.main {
  flex: 1;
  min-width: 0;
  background: #fff;
}

header {
  height: 68px;
  border-bottom: 1px solid #edf1f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
}

.menu-btn {
  border: none;
  background: transparent;
  color: #7a8aa0;
  font-size: 28px;
  cursor: pointer;
}

.profile {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef2f8;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8c98aa;
  font-size: 24px;
}

.content {
  padding: 26px;
}

.content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.content > p {
  color: #6d7585;
  font-size: 15px;
  margin-bottom: 25px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 25px;
}

.card {
  min-height: 115px;
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  padding: 20px 16px;
  box-shadow: 0 12px 28px rgba(80, 105, 145, 0.1);
  position: relative;
}

.top-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

.card span {
  color: #677184;
  font-size: 13px;
  font-weight: 500;
}

.card h4 {
  font-size: 24px;
  margin-top: 22px;
}

.card b {
  position: absolute;
  right: 18px;
  bottom: 25px;
  color: #23bf63;
  font-size: 13px;
}

.blue {
  background: #eaf3ff;
  color: #1677ff;
}

.green {
  background: #e9faef;
  color: #22b85f;
}

.purple {
  background: #f0ebff;
  color: #715cff;
}

.yellow {
  background: #fff6dd;
  color: #f6a800;
}

.pink {
  background: #ffe8f1;
  color: #ff4e8a;
}

.bottom {
  display: grid;
  grid-template-columns: 1.7fr 0.8fr;
  gap: 18px;
}

.chart-box,
.orders-box {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #edf1f7;
  box-shadow: 0 12px 28px rgba(80, 105, 145, 0.1);
  padding: 22px;
}

.chart-box {
  min-height: 300px;
}

.chart-box h4,
.orders-box h4 {
  font-size: 16px;
  margin-bottom: 18px;
}

canvas {
  width: 100% !important;
  height: 230px !important;
}

.order {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.order-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order h5 {
  font-size: 12px;
}

.order p {
  font-size: 11px;
  color: #70798a;
}


.floating-info {
  margin: -15px auto 0;
  width: 360px;
  min-height: 96px;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 18px 45px rgba(50, 80, 130, 0.2);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 28px 12px 12px;
  text-align: left;
  position: relative;
  z-index: 3;
}

.floating-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e8bff, #235dff);
  color: #fff;
  font-size: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(35, 93, 255, 0.28);
}

.floating-info h4 {
  font-size: 18px;
  margin-bottom: 5px;
}

.floating-info p {
  font-size: 16px;
  color: #626d7e;
}

/* Tablet */
@media (max-width: 1024px) {
  .buttons {
    width: 100%;
  }

  .dashboard {
    min-height: auto;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bottom {
    grid-template-columns: 1fr;
  }

  .circle-toggle {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    padding: 30px 16px 60px;
  }

  .buttons {
    flex-direction: column;
    align-items: center;
  }

  .buttons button {
    width: 230px;
  }

  .dashboard {
    border-radius: 20px;
  }

  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    width: 240px;
    z-index: 99;
    border-radius: 0 22px 22px 0;
  }

  .sidebar.hide {
    width: 240px;
    padding: 30px 22px;
    left: -260px;
  }

  .sidebar.show-mobile {
    left: 0;
  }

  .sidebar.show-mobile span {
    display: inline;
  }

  .sidebar.show-mobile .brand,
  .sidebar.show-mobile nav a {
    justify-content: flex-start;
  }

  .main {
    width: 100%;
  }

  .content {
    padding: 22px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .bottom {
    grid-template-columns: 1fr;
  }

  .orders-box {
    display: block;
  }

  .floating-info {
    width: 100%;
    max-width: 360px;
    margin-top: 25px;
  }
}

const sidebar = document.getElementById("sidebar");

function isMobile() {
  return window.innerWidth <= 768;
}

function showSidebar() {
  if (isMobile()) {
    sidebar.classList.add("show-mobile");
    sidebar.classList.remove("hide");
  } else {
    sidebar.classList.remove("hide");
  }
}

function hideSidebar() {
  if (isMobile()) {
    sidebar.classList.remove("show-mobile");
    sidebar.classList.add("hide");
  } else {
    sidebar.classList.add("hide");
  }
}

function toggleSidebar() {
  if (isMobile()) {
    sidebar.classList.toggle("show-mobile");
    sidebar.classList.remove("hide");
  } else {
    sidebar.classList.toggle("hide");
  }
}

window.addEventListener("resize", () => {
  if (!isMobile()) {
    sidebar.classList.remove("show-mobile");
  } else {
    sidebar.classList.add("hide");
  }
});

const ctx = document.getElementById("salesChart");

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      data: [1800, 3000, 4100, 3500, 4600, 5900, 5300],
      borderColor: "#1677ff",
      backgroundColor: "rgba(22, 119, 255, 0.12)",
      fill: true,
      tension: 0.35,
      borderWidth: 3,
      pointRadius: 4,
      pointBackgroundColor: "#ffffff",
      pointBorderColor: "#1677ff",
      pointBorderWidth: 2
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false }
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 8000,
        ticks: {
          callback: value => value === 0 ? "0" : value / 1000 + "K",
          color: "#6d7585"
        },
        grid: { color: "#edf1f7" },
        border: { display: false }
      },
      x: {
        ticks: { color: "#6d7585" },
        grid: { display: false },
        border: { display: false }
      }
    }
  }
});

Selanjutnya, ada sidebar dengan fitur buka-tutup. Dengan begitu, kamu bisa menghemat ruang, terutama di tampilan mobile. Biasanya, fitur ini dibuat dengan JavaScript sederhana.

HTML




  
  
  Minimo Dashboard
  
  




  
    
      
      Minimo
    

    
      Dashboard
      Analytics
      Products
      Orders
      Customers
      Reports
      Settings
    

    
      
      Logout
    

    
      👑 Upgrade to Pro
      Unlock all features
      
    
  

  
    
      

      
        
          
          
        

        
          
          3
        

        
      
    

    
      Dashboard
      Welcome back, Admin! 👋

      
        
          
            
            
              Total Users
              2,543
            
          
          
            ↑ 12.5%
            
          
        

        
          
            
            
              Orders
              1,320
            
          
          
            ↑ 8.2%
            
          
        

        
          
            
            
              Revenue
              $24,780
            
          
          
            ↑ 15.3%
            
          
        

        
          
            
            
              Products
              865
            
          
          
            ↑ 6.7%
            
          
        
      

      
        
          
            Sales Overview
            
          
          
        

        
          
            Recent Orders
            
          

          
            
            
              #ORD-001
              John Doe
            
            
              $250.00
              Completed
            
          

          
            
            
              #ORD-002
              Jane Smith
            
            
              $150.00
              Pending
            
          

          
            
            
              #ORD-003
              Michael Lee
            
            
              $320.00
              Completed
            
          

          
            
            
              #ORD-004
              Sarah Wilson
            
            
              $180.00
              Processing
            
          
        
      

      
        
          Top Products
          
        

        
          
            
            
              Wireless Headphones
              $59.99
              
            
            320 sold
          

          
            
            
              Smart Watch
              $89.99
              
            
            280 sold
          

          
            
            
              Backpack
              $49.99
              
            
            210 sold
          

          
            
            
              Camera
              $699.99
              
            
            185 sold

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: linear-gradient(135deg, #eef3ff, #f9fbff);
  color: #111a2e;
  padding: 40px;
}

.dashboard {
  max-width: 1380px;
  min-height: 850px;
  margin: auto;
  background: #fff;
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(77, 90, 180, 0.22);
}

.sidebar {
  width: 255px;
  background: linear-gradient(180deg, #08142a, #0a1c37);
  color: #fff;
  padding: 34px 26px;
  flex-shrink: 0;
}

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

.logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #3d7dff, #6b5cff);
  clip-path: polygon(50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
}

.logo h2 {
  font-size: 22px;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

nav a,
.logout {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  color: #d6deee;
  border-radius: 10px;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

nav a i,
.logout i {
  font-size: 24px;
}

nav a.active,
nav a:hover {
  background: linear-gradient(135deg, #405cff, #5949ff);
  color: #fff;
}

.logout {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  padding-top: 35px;
}

.upgrade {
  margin-top: 80px;
  background: linear-gradient(135deg, #5247ff, #635cff);
  border-radius: 12px;
  padding: 22px 18px;
}

.upgrade h3 {
  font-size: 17px;
  margin-bottom: 18px;
}

.upgrade p {
  color: #e4e8ff;
  margin-bottom: 22px;
}

.upgrade button {
  width: 100%;
  border: none;
  background: rgba(255,255,255,0.25);
  color: #fff;
  padding: 14px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}

.main {
  flex: 1;
  min-width: 0;
  background: #fafcff;
}

header {
  height: 88px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid #e9edf5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 34px;
}

.menu-btn {
  border: none;
  background: transparent;
  color: #758298;
  font-size: 34px;
  cursor: pointer;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.search {
  width: 215px;
  height: 46px;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #fbfcff;
}

.search input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
}

.search i {
  font-size: 22px;
  color: #7a86a0;
}

.bell {
  position: relative;
  font-size: 28px;
  color: #6d7891;
}

.bell span {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #4f5cff;
  color: #fff;
  font-size: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #4f5cff;
}

.content {
  padding: 34px 44px 40px;
}

.content h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.content > p {
  color: #68748b;
  font-size: 17px;
  margin-bottom: 30px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-bottom: 26px;
}

.stat-card,
.chart-card,
.orders-card,
.products-card {
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(87, 105, 150, 0.09);
}

.stat-card {
  min-height: 180px;
  padding: 24px 20px;
}

.stat-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

.icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 30px;
}

.purple {
  background: #f0eaff;
  color: #6a48ff;
}

.green {
  background: #e8f9ef;
  color: #21ad5b;
}

.blue {
  background: #eaf1ff;
  color: #3677ff;
}

.orange {
  background: #fff0e3;
  color: #ff7a1a;
}

.stat-card span {
  color: #6e7890;
  font-size: 15px;
  font-weight: 600;
}

.stat-card h2 {
  font-size: 30px;
  margin-top: 10px;
}

.mini {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 22px;
}

.mini b {
  color: #23b865;
  font-size: 13px;
}

.mini canvas {
  width: 130px !important;
  height: 45px !important;
}

.middle {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  margin-bottom: 18px;
}

.chart-card {
  min-height: 355px;
  padding: 24px;
}

.orders-card {
  padding: 24px;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.card-head h3 {
  font-size: 18px;
}

.card-head button {
  border: 1px solid #e5e9f1;
  background: #fff;
  color: #4f7cff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}

#salesChart {
  width: 100% !important;
  height: 260px !important;
}

.order {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.order img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.order h4,
.price h5 {
  font-size: 14px;
}

.order p {
  font-size: 12px;
  color: #758097;
  margin-top: 5px;
}

.price {
  text-align: right;
}

.price span {
  font-size: 12px;
  font-weight: 600;
}

.completed {
  color: #26b35d;
}

.pending {
  color: #f0a000;
}

.processing {
  color: #2878ff;
}

.products-card {
  padding: 20px 24px;
}

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.product {
  border: 1px solid #edf1f7;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
}

.product img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.product h4 {
  font-size: 13px;
  margin-bottom: 8px;
}

.product p {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.product small {
  align-self: end;
  color: #69758d;
  font-size: 11px;
}

.bar {
  width: 90px;
  height: 5px;
  background: #e9edf5;
  border-radius: 20px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: #5261ff;
  border-radius: 20px;
}

@media (max-width: 1100px) {
  body {
    padding: 20px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .middle {
    grid-template-columns: 1fr;
  }

  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body {
    padding: 14px;
  }

  .dashboard {
    display: block;
    min-height: auto;
  }

  .sidebar {
    width: 100%;
    border-radius: 0;
  }

  header {
    padding: 0 20px;
  }

  .header-right {
    gap: 12px;
  }

  .search {
    display: none;
  }

  .content {
    padding: 28px 20px 40px;
  }

  .stats,
  .products {
    grid-template-columns: 1fr;
  }

  .product {
    grid-template-columns: 60px 1fr;
  }

  .product small {
    grid-column: 2;
  }
}

function createMiniChart(id, color, data) {
  const ctx = document.getElementById(id);

  new Chart(ctx, {
    type: "line",
    data: {
      labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
      datasets: [{
        data: data,
        borderColor: color,
        borderWidth: 3,
        tension: 0.45,
        pointRadius: 0,
        fill: false
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: { enabled: false }
      },
      scales: {
        x: { display: false },
        y: { display: false }
      }
    }
  });
}

createMiniChart("miniUsers", "#6a48ff", [4, 5, 4, 5, 5, 7, 6, 8]);
createMiniChart("miniOrders", "#21ad5b", [3, 4, 6, 4, 5, 7, 5, 8]);
createMiniChart("miniRevenue", "#3677ff", [4, 5, 7, 6, 8, 5, 6, 7]);
createMiniChart("miniProducts", "#ff7a1a", [3, 5, 4, 7, 6, 8, 7, 9]);

const salesCtx = document.getElementById("salesChart");

new Chart(salesCtx, {
  type: "line",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      data: [5000, 11500, 9000, 12500, 16500, 14000, 24000],
      borderColor: "#4d5cff",
      backgroundColor: "rgba(77, 92, 255, 0.12)",
      fill: true,
      tension: 0.25,
      borderWidth: 3,
      pointRadius: 4,
      pointBackgroundColor: "#fff",
      pointBorderColor: "#4d5cff",
      pointBorderWidth: 3
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false }
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 25000,
        ticks: {
          callback: value => value === 0 ? "$0" : "$" + value / 1000 + "k",
          color: "#69758d"
        },
        grid: {
          color: "#edf1f7"
        },
        border: {
          display: false
        }
      },
      x: {
        ticks: {
          color: "#69758d"
        },
        grid: {
          display: false
        },
        border: {
          display: false
        }
      }
    }
  }
});

Kalau kamu bikin admin panel, tipe ini wajib dicoba. Biasanya sudah dilengkapi icon dan struktur menu yang rapi. Hasilnya, tampilan website terlihat lebih profesional.

HTML




  
  
  Sidebar Animasi Smooth
  
  



  
    
      SIDEBAR ANIMASI SMOOTH
      Responsive • HTML • CSS • JavaScript
    

    
      
        
          
          Minimo
        

        
          Dashboard
          Analytics
          Products
          Orders
          Customers
          Settings
          Logout
        
      

      
        
          

          
            
          
        

        
          Dashboard
          Welcome back, Admin!

          
            
              
                
                Total Users
              
              1,250
              +12%
            

            
              
                
                Orders
              
              320
              +8%
            

            
              
                
                Revenue
              
              $12,850
              +15%
            

            
              
                
                Products
              
              58
              +7%
            
          

          
            
              
                Sales Overview
                
              
              
            

            
              Recent Orders

              
                
                
                  #ORD-001
                  John Doe
                
              

              
                
                
                  #ORD-002
                  Jane Smith
                
              

              
                
                
                  #ORD-003
                  Michael Lee
                
              

              
                
                
                  #ORD-004
                  Sarah Wilson
                
              

              
                
                
                  #ORD-005
                  David Brown
                
              
            
          
        
      
    

    
      
        
          
        
        Tertutup
      

      ➜

      
        
          
          
          
        
        Animasi Smooth
      

      ➜

      
        
          
          
          
          
        
        Terbuka

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: linear-gradient(135deg, #edf3ff, #f9fbff);
  color: #f4f7ff;
}

.hero {
  min-height: 100vh;
  padding: 28px 32px 45px;
}

.title {
  text-align: center;
  margin-bottom: 34px;
}

.title h1 {
  color: #101827;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: 1px;
}

.title h1 span {
  color: #fff;
  background: linear-gradient(135deg, #1682ff, #9b5cff);
  padding: 8px 16px;
  border-radius: 10px;
  display: inline-block;
}

.title p {
  margin-top: 14px;
  color: #737d91;
  font-size: 18px;
  font-weight: 500;
}

.dashboard {
  width: 100%;
  max-width: 1180px;
  min-height: 700px;
  margin: 0 auto;
  display: flex;
  background: linear-gradient(135deg, #0d141f, #111a27);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 28px 75px rgba(17, 32, 70, 0.35);
  position: relative;
}

.sidebar {
  width: 255px;
  background: linear-gradient(180deg, #171d27, #101722);
  padding: 34px 18px;
  flex-shrink: 0;
  border-radius: 16px;
  transition: width 0.45s cubic-bezier(.4, 0, .2, 1), padding 0.45s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  z-index: 5;
}

.dashboard.collapsed .sidebar {
  width: 78px;
  padding: 34px 13px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 34px;
  white-space: nowrap;
}

.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #117bff, #3168ff);
  color: #fff;
  font-size: 24px;
  flex-shrink: 0;
}

.brand h2 {
  font-size: 20px;
  font-weight: 700;
  opacity: 1;
  transition: 0.3s ease;
}

.dashboard.collapsed .brand h2,
.dashboard.collapsed nav a span {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

nav a {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 14px;
  color: #d7dee9;
  text-decoration: none;
  border-radius: 10px;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s ease;
}

nav a i {
  min-width: 24px;
  font-size: 24px;
}

nav a.active,
nav a:hover {
  background: linear-gradient(135deg, #257cff, #1062ff);
  color: #fff;
}

.dashboard.collapsed nav a {
  justify-content: center;
  padding: 0;
}

.main {
  flex: 1;
  min-width: 0;
  background: linear-gradient(135deg, #101722, #0b1320);
  position: relative;
  overflow: hidden;
}

header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.toggle-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(46, 139, 255, 0.45);
  background: rgba(22, 119, 255, 0.08);
  color: #39a0ff;
  font-size: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(22, 119, 255, 0.35);
  transition: 0.35s ease;
}

.toggle-btn:hover {
  transform: scale(1.08) rotate(90deg);
}

.profile {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #252e3b;
  color: #e8edf6;
  display: grid;
  place-items: center;
  font-size: 27px;
}

.content {
  padding: 28px 38px 45px;
}

.content h2 {
  font-size: 34px;
  margin-bottom: 8px;
}

.content > p {
  color: #c2cad7;
  margin-bottom: 30px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.card,
.chart-box,
.orders-box {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
}

.card {
  min-height: 130px;
  padding: 20px 17px;
  position: relative;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.icon,
.order-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.card span {
  color: #d9dfeb;
  font-weight: 600;
  font-size: 14px;
}

.card h3 {
  font-size: 28px;
  margin-top: 24px;
}

.card b {
  position: absolute;
  right: 17px;
  bottom: 26px;
  color: #24db78;
  font-size: 13px;
}

.blue {
  background: rgba(24, 119, 255, 0.22);
  color: #1c7cff;
}

.green {
  background: rgba(35, 184, 99, 0.2);
  color: #21d36b;
}

.purple {
  background: rgba(113, 92, 255, 0.25);
  color: #8a75ff;
}

.orange {
  background: rgba(255, 122, 26, 0.22);
  color: #ff8b2c;
}

.pink {
  background: rgba(255, 78, 138, 0.22);
  color: #ff4e8a;
}

.bottom {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}

.chart-box {
  min-height: 340px;
  padding: 24px;
}

.box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.box-head h3,
.orders-box h3 {
  font-size: 18px;
}

.box-head button {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 9px 14px;
  border-radius: 8px;
}

#salesChart {
  width: 100% !important;
  height: 250px !important;
}

.orders-box {
  padding: 24px;
}

.order {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 17px;
}

.order h4 {
  font-size: 13px;
}

.order p {
  color: #b9c2d0;
  font-size: 12px;
  margin-top: 4px;
}

.process {
  width: min(1020px, 86%);
  min-height: 145px;
  margin: 34px auto 0;
  background: rgba(85, 101, 128, 0.28);
  border-radius: 34px;
  box-shadow: 0 18px 55px rgba(70, 90, 130, 0.24);
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 0.5fr 1fr;
  align-items: center;
  padding: 18px 38px;
  color: #fff;
}

.mini-state {
  text-align: center;
}

.mini-state p {
  margin-top: 10px;
  font-weight: 700;
}

.mini-sidebar {
  margin: auto;
  background: linear-gradient(180deg, #171d27, #101722);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(10, 20, 40, 0.22);
}

.mini-sidebar.closed {
  width: 70px;
  height: 100px;
  display: grid;
  place-items: start center;
  padding-top: 14px;
}

.mini-sidebar.closed i {
  background: #252e3b;
  padding: 7px;
  border-radius: 50%;
}

.mini-sidebar.opened {
  width: 110px;
  height: 120px;
  padding: 16px 12px;
}

.mini-sidebar.opened span {
  display: block;
  height: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: #1d6fff;
}

.mini-sidebar.opened span:not(:first-child) {
  background: #414b5c;
}

.mini-stack {
  width: 120px;
  height: 95px;
  margin: auto;
  position: relative;
}

.mini-stack div {
  width: 70px;
  height: 90px;
  background: linear-gradient(180deg, #171d27, #101722);
  border-radius: 8px;
  position: absolute;
  top: 0;
}

.mini-stack div:nth-child(1) {
  left: 10px;
}

.mini-stack div:nth-child(2) {
  left: 30px;
  opacity: .9;
}

.mini-stack div:nth-child(3) {
  left: 50px;
  opacity: .8;
}

.arrow {
  color: #41b4ff;
  font-size: 42px;
  font-weight: 800;
  text-align: center;
}

/* Tablet */
@media (max-width: 1024px) {
  .dashboard {
    min-height: auto;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bottom {
    grid-template-columns: 1fr;
  }

  .process {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .arrow {
    transform: rotate(90deg);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    padding: 24px 14px 40px;
  }

  .dashboard {
    border-radius: 28px;
  }

  .sidebar {
    position: fixed;
    left: -270px;
    top: 80px;
    bottom: 40px;
    width: 250px;
    border-radius: 0 22px 22px 0;
    transition: left 0.45s cubic-bezier(.4, 0, .2, 1);
  }

  .dashboard.mobile-open .sidebar {
    left: 0;
  }

  .dashboard.collapsed .sidebar {
    width: 250px;
    padding: 34px 18px;
  }

  .dashboard.collapsed .brand h2,
  .dashboard.collapsed nav a span {
    opacity: 1;
    transform: translateX(0);
  }

  .dashboard.collapsed nav a {
    justify-content: flex-start;
    padding: 0 14px;
  }

  .main {
    width: 100%;
  }

  header {
    padding: 0 18px;
  }

  .content {
    padding: 24px 18px 35px;
  }

  .content h2 {
    font-size: 30px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .bottom {
    grid-template-columns: 1fr;
  }

  .process {
    width: 100%;
    padding: 24px;
  }
}

const dashboard = document.querySelector(".dashboard");
const toggleBtn = document.getElementById("toggleBtn");

function isMobile() {
  return window.innerWidth <= 768;
}

toggleBtn.addEventListener("click", () => {
  if (isMobile()) {
    dashboard.classList.toggle("mobile-open");
  } else {
    dashboard.classList.toggle("collapsed");
  }
});

window.addEventListener("resize", () => {
  if (!isMobile()) {
    dashboard.classList.remove("mobile-open");
  } else {
    dashboard.classList.remove("collapsed");
  }
});

const ctx = document.getElementById("salesChart");

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      data: [1800, 3000, 4100, 3500, 4600, 5900, 5300],
      borderColor: "#147cff",
      backgroundColor: "rgba(20, 124, 255, 0.22)",
      fill: true,
      tension: 0.35,
      borderWidth: 3,
      pointRadius: 4,
      pointBackgroundColor: "#0d1420",
      pointBorderColor: "#147cff",
      pointBorderWidth: 2
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false }
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 8000,
        ticks: {
          callback: value => value === 0 ? "0" : value / 1000 + "K",
          color: "#c5cedb"
        },
        grid: {
          color: "rgba(255,255,255,0.08)"
        },
        border: {
          display: false
        }
      },
      x: {
        ticks: {
          color: "#c5cedb"
        },
        grid: {
          display: false
        },
        border: {
          display: false
        }
      }
    }
  }
});

Selain fungsional, tampilan juga penting. Oleh karena itu, sidebar dengan animasi smooth bisa jadi pilihan menarik. Transisi yang halus membuat interaksi terasa lebih hidup.

HTML




  
  
  Sidebar Mobile Friendly
  
  



  
    
      
      Sidebar Mobile Friendly (Off-Canvas)
    

    
      
        9:41
        
          
          
          
        
      

      

      
        
      

      
        Dashboard
        Welcome back, Admin!

        
          
            
              
              Total Users
            
            1,250
            +12%
          

          
            
              
              Orders
            
            320
            +8%
          

          
            
              
              Revenue
            
            $12,850
            +15%
          

          
            
              
              Products
            
            58
            +2%
          
        

        
          
            Sales Overview
            
          
          
        
      

      
        

        
          M
          Minimo
        

        
          Dashboard
          Analytics
          Products
          Orders
          Customers
          Settings
          Logout

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: linear-gradient(135deg, #eef4ff, #fbfdff);
  color: #111827;
}

.hero {
  min-height: 100vh;
  padding: 28px 16px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  background: #fff;
  padding: 18px 40px;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(70, 90, 130, 0.13);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.title i {
  font-size: 36px;
  color: #2878ff;
}

.title h1 {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  color: #111827;
}

.phone {
  width: 430px;
  height: 860px;
  background: #fff;
  border: 10px solid #0b0f18;
  border-radius: 52px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 24px 65px rgba(22, 35, 65, 0.32);
}

.phone::before {
  content: "";
  position: sticky;
  display: block;
  width: 130px;
  height: 32px;
  background: #05070c;
  border-radius: 0 0 18px 18px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 20;
}

.status {
  position: absolute;
  top: 26px;
  left: 42px;
  right: 32px;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.status div {
  display: flex;
  gap: 5px;
  font-size: 18px;
}

.menu-btn {
  position: absolute;
  top: 78px;
  left: 28px;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(90, 105, 135, 0.16);
  z-index: 15;
}

.profile {
  position: absolute;
  top: 86px;
  right: 34px;
  width: 48px;
  height: 48px;
  z-index: 15;
}

.profile img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.content {
  padding: 120px 28px 40px;
}

.content h2 {
  font-size: 26px;
  margin-bottom: 8px;
}

.content > p {
  color: #6c7588;
  margin-bottom: 26px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}

.card,
.chart-card {
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(80, 105, 145, 0.1);
}

.card {
  min-height: 145px;
  padding: 20px 16px;
  position: relative;
}

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

.icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.card span {
  color: #69758a;
  font-weight: 600;
  font-size: 14px;
}

.card h3 {
  font-size: 28px;
  margin-top: 30px;
}

.card b {
  position: absolute;
  right: 17px;
  bottom: 28px;
  color: #23bf63;
  font-size: 13px;
}

.blue {
  background: #eaf3ff;
  color: #1677ff;
}

.green {
  background: #e9faef;
  color: #22b85f;
}

.purple {
  background: #f0ebff;
  color: #715cff;
}

.orange {
  background: #fff1e8;
  color: #ff7b22;
}

.chart-card {
  padding: 22px;
  min-height: 300px;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.chart-head h3 {
  font-size: 18px;
}

.chart-head button {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #69758a;
  padding: 10px 12px;
  border-radius: 8px;
}

#salesChart {
  width: 100% !important;
  height: 230px !important;
}

.sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 310px;
  min-height: 100%;
  background: linear-gradient(180deg, #101b2a, #0b1523);
  color: #fff;
  padding: 100px 28px 30px;
  z-index: 40;
  transform: translateX(-105%);
  transition: transform 0.38s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 20px 0 45px rgba(20, 30, 55, 0.28);
}

.sidebar.show {
  transform: translateX(0);
}

.close-btn {
  position: absolute;
  top: 76px;
  right: 26px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 34px;
  cursor: pointer;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.brand-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2a8cff, #365cff);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 26px;
}

.brand h2 {
  font-size: 28px;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

nav a {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  border-radius: 12px;
  color: #e6edf8;
  text-decoration: none;
  font-size: 20px;
  cursor: pointer;
}

nav a i {
  font-size: 30px;
}

nav a.active,
nav a:hover {
  background: rgba(55, 119, 255, 0.24);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(10, 18, 32, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 520px) {
  .title {
    padding: 14px 18px;
  }

  .phone {
    width: 100%;
    max-width: 430px;
    height: 820px;
    border-width: 8px;
    border-radius: 44px;
  }

  .sidebar {
    width: 78%;
  }

  .cards {
    gap: 14px;
  }

  .card {
    padding: 18px 14px;
  }

  .card h3 {
    font-size: 24px;
  }
}

const openBtn = document.getElementById("openBtn");
const closeBtn = document.getElementById("closeBtn");
const sidebar = document.getElementById("sidebar");
const overlay = document.getElementById("overlay");

function openSidebar() {
  sidebar.classList.add("show");
  overlay.classList.add("show");
}

function closeSidebar() {
  sidebar.classList.remove("show");
  overlay.classList.remove("show");
}

openBtn.addEventListener("click", openSidebar);
closeBtn.addEventListener("click", closeSidebar);
overlay.addEventListener("click", closeSidebar);

const ctx = document.getElementById("salesChart");

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      data: [1200, 2600, 3900, 3500, 4600, 5900, 5200],
      borderColor: "#1677ff",
      backgroundColor: "rgba(22, 119, 255, 0.14)",
      fill: true,
      tension: 0.35,
      borderWidth: 3,
      pointRadius: 4,
      pointBackgroundColor: "#fff",
      pointBorderColor: "#1677ff",
      pointBorderWidth: 2
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false }
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 8000,
        ticks: {
          callback: value => value === 0 ? "0" : value / 1000 + "K",
          color: "#6d7585"
        },
        grid: {
          color: "#edf1f7"
        },
        border: {
          display: false
        }
      },
      x: {
        ticks: {
          color: "#6d7585"
        },
        grid: {
          display: false
        },
        border: {
          display: false
        }
      }
    }
  }
});

Terakhir, ada sidebar khusus mobile yang muncul dari samping. Desain ini sering digunakan karena lebih nyaman diakses dengan satu tangan. Selain itu, tampilannya juga terlihat modern.

Supaya lebih praktis, kamu bisa langsung menggunakan sidebar yang sudah ada. Pertama, cukup copy kode HTML, CSS, dan JavaScript. Setelah itu, tempelkan ke project kamu.

Selanjutnya, kamu bisa melakukan sedikit penyesuaian. Misalnya, mengganti warna agar sesuai dengan branding atau menambahkan icon supaya lebih menarik. Dengan cara ini, kamu bisa mendapatkan tampilan profesional tanpa harus mulai dari nol.

Kesalahan yang Sering Terjadi

Walaupun terlihat simpel, masih banyak yang melakukan kesalahan saat membuat sidebar. Misalnya, tidak menggunakan media query sehingga tampilannya tidak responsive. Selain itu, penggunaan animasi yang berlebihan juga bisa membuat website jadi berat.

Di samping itu, struktur HTML yang tidak rapi sering kali menyulitkan saat pengembangan. Bahkan, banyak juga yang lupa melakukan testing di berbagai ukuran layar. Padahal, langkah ini sangat penting.

Tips Biar Hasil Lebih Maksimal

Agar hasilnya lebih optimal, kamu bisa mulai dari desain yang sederhana tapi tetap clean. Selain itu, pastikan kecepatan loading tetap terjaga dengan menghindari elemen yang tidak perlu.

Kemudian, fokus pada kemudahan penggunaan. Sidebar harus mudah diakses dan tidak membingungkan. Selanjutnya, gunakan kombinasi CSS dan JavaScript secukupnya agar tetap ringan.

Terakhir, jangan lupa untuk selalu menguji tampilan di berbagai device. Dengan begitu, kamu bisa memastikan sidebar berjalan dengan baik di semua kondisi.

Kesimpulan

Secara keseluruhan, sidebar menu responsive bukan hanya soal tampilan, tapi juga kenyamanan pengguna. Dengan menggunakan sidebar menu HTML CSS JS yang siap pakai, kamu bisa menghemat waktu sekaligus meningkatkan kualitas UI website.

Jadi, daripada mulai dari nol, lebih baik manfaatkan template yang sudah ada lalu sesuaikan dengan kebutuhanmu. Dengan cara ini, proses development jadi lebih cepat dan hasilnya tetap maksimal.

FAQ

Sidebar menu responsive adalah navigasi samping yang bisa menyesuaikan tampilan di berbagai ukuran layar, baik desktop maupun mobile.

Tidak selalu. Namun, jika ingin fitur interaktif seperti toggle, JavaScript biasanya diperlukan.

Sidebar cocok untuk dashboard, admin panel, dan website yang memiliki banyak menu navigasi.

Kalau kamu merasa website masih kurang optimal dari segi tampilan dan konten, sekarang saatnya upgrade dengan artikel SEO-friendly dan tema WordPress yang profesional.

Cek Layanan Kami

Artikel 5 Sidebar Menu Responsive Siap Pakai (HTML, CSS, JS) pertama kali tampil pada Farhanhidayat.com.

sidebar menu responsive Arsip - Farhanhidayat.com

5 Sidebar Menu Responsive Siap Pakai (HTML, CSS, JS)

Kenapa Sidebar Menu Responsive Itu Penting?

5 Sidebar Menu HTML CSS JS Siap Pakai

1. Sidebar Simple & Minimalis

Full Code – Sidebar Simple & Minimalis (UI Modern)

Dashboard

1,250

320

$12,850

58

Sales Overview

Recent Orders

#ORD-001

#ORD-002

#ORD-003

#ORD-004

#ORD-005

2. Sidebar Toggle (Hide & Show)

Full Code – Sidebar Toggle (Hide & Show)

SIDEBAR TOGGLE

HIDE & SHOW

Dashboard

1,250

320

$12,850

Sales Overview

Recent Orders

#ORD-001

#ORD-002

#ORD-003

#ORD-004

#ORD-005

Click to Toggle Sidebar

3. Sidebar Dashboard Modern

Full Code – Sidebar Dashboard Modern

Dashboard

2,543

1,320

$24,780

865

Sales Overview

Recent Orders

#ORD-001

$250.00

#ORD-002

$150.00

#ORD-003

$320.00

#ORD-004

$180.00

Top Products

Wireless Headphones

Smart Watch

Backpack

Camera

4. Sidebar dengan Animasi Smooth

FULL CODING – Sidebar Animasi Smooth

SIDEBAR ANIMASI SMOOTH

Dashboard

1,250

320

$12,850

58

Sales Overview

Recent Orders

#ORD-001

#ORD-002

#ORD-003

#ORD-004

#ORD-005

5. Sidebar Mobile Friendly (Off-Canvas)

Full Code – Sidebar Off-Canvas (Mobile Friendly)

Sidebar Mobile Friendly (Off-Canvas)

Dashboard

1,250

320

$12,850

58

Sales Overview