---
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/tr/components/sidebar
---

# Sidebar Component

Kenar çubuğu bileşenleri, birincil gezinmeyi ve yardımcı içeriği sabit veya katlanabilir bir yan panelde düzenler. Anlamsal HTML ile oluşturulan kenar çubukları, ana içerik alanını tüketmeden gezinmeyi geliştirir. Frutjam kenar çubuğu sistemi birden fazla düzeni, genişliği ve davranışı destekler; yönetici kontrol panelleri, dokümantasyon siteleri ve karmaşık uygulamalar için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf   | Tip   | Tanım                                           |
| ------- | ----- | ----------------------------------------------- |
| sidebar | Temel | Gezinme ve yardımcı içerik için sabit yan panel |

## Temel Kullanım

`kenar çubuğu` sınıfını bir `aside` öğesinde kullanın. Bunu esnek bir kaba ana içeriğinizin yanına yerleştirin.

## Kenar Çubuğu Gezintisi

Gruplandırılmış bölümlere ve aktif durum stiline sahip tam bir gezinme kenar çubuğu.

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

## Katlanabilir Kenar Çubuğu

Mobil veya yer paylaşımlı kenar çubukları için `kenar çubuğu` sınıfını `çekmece çekmece başlangıcı` iletişim bileşeniyle birleştirin.

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