---
title: "Sidebar"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Sidebar with collapsible panels, icons, and nested menus. Responsive dashboard navigation for admin layouts and multi-section applications."
url: https://frutjam.com/id/components/sidebar
---

# Sidebar Component

Komponen sidebar mengatur navigasi utama dan konten tambahan dalam panel samping tetap atau dapat dilipat. Dibangun dengan HTML semantik, sidebar meningkatkan navigasi tanpa menghabiskan ruang konten utama. Sistem sidebar Frutjam mendukung berbagai tata letak, lebar, dan perilaku—ideal untuk dasbor admin, situs dokumentasi, dan aplikasi kompleks.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas   | Jenis | Keterangan                                                   |
| ------- | ----- | ------------------------------------------------------------ |
| sidebar | Basis | Memperbaiki panel samping untuk navigasi dan konten tambahan |

## Penggunaan Dasar

Gunakan kelas `sidebar` pada elemen `aside`. Tempatkan di samping konten utama Anda dalam wadah fleksibel.

## Navigasi Bilah Sisi

Bilah samping navigasi lengkap dengan bagian yang dikelompokkan dan gaya status aktif.

```html
<div class="flex min-h-105">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Dashboard</span></li>
      <li><a class="menu-item menu-item menu-active">Overview</a></li>
      <li><a class="menu-item">Analytics</a></li>
      <li class="menu-title mt-4"><span>Management</span></li>
      <li><a class="menu-item">Users</a></li>
      <li><a class="menu-item">Inventory</a></li>
      <li><a class="menu-item">Settings</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <h2 class="heading-2xl">Overview</h2>
    <p class="para-base mt-2">Page content goes here.</p>
  </main>
</div>
```

## Bilah Sisi yang Dapat Dilipat

Untuk sidebar seluler atau overlay, gabungkan kelas `sidebar` dengan komponen dialog `drawerdrawer-start`.

```html
<button type="button" class="btn btn-primary btn-sm" onclick="sidebarDrawer.show()">Open Sidebar</button>

<dialog class="drawer drawer-start" id="sidebarDrawer">
  <div class="drawer-content">
    <aside class="sidebar h-full w-64">
      <ul class="menu p-4">
        <li class="menu-title"><span>Dashboard</span></li>
        <li><a class="menu-item">Home</a></li>
        <li><a class="menu-item">Profile</a></li>
        <li><a class="menu-item">Settings</a></li>
        <li><a class="menu-item">Logout</a></li>
      </ul>
    </aside>
  </div>
  <button type="button" class="drawer-backdrop" onclick="sidebarDrawer.close()">Close Sidebar via Backdrop</button>
</dialog>
```