Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Kenar Çubuğu Bileşeni

Son güncelleme:

Yan gezinme panelleri için yalnızca CSS'ye özgü Tailwind CSS kenar çubuğu. Gezinme öğesi durumları ve bölüm başlıkları ile daraltılabilir. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

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
sidebarTemelGezinme 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="flex min-h-90">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Menu</span></li>
      <li><a class="menu-item">Sidebar Item 1</a></li>
      <li><a class="menu-item">Sidebar Item 2</a></li>
      <li><a class="menu-item">Sidebar Item 3</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <p class="para-base">Main content area</p>
  </main>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div className="flex min-h-90">
  <aside className="sidebar w-64">
    <ul className="menu p-4">
      <li className="menu-title"><span>Menu</span></li>
      <li><a className="menu-item">Sidebar Item 1</a></li>
      <li><a className="menu-item">Sidebar Item 2</a></li>
      <li><a className="menu-item">Sidebar Item 3</a></li>
    </ul>
  </aside>
  <main className="flex-1 p-6">
    <p className="para-base">Main content area</p>
  </main>
</div>

Kenar Çubuğu Gezintisi

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

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Kenar çubuğu sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin