---
title: "사이드바"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-30
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "축소 가능한 패널, 아이콘 및 중첩 메뉴가 포함된 Tailwind CSS 사이드바입니다. 관리 레이아웃 및 다중 섹션 애플리케이션을 위한 반응형 대시보드 탐색."
url: https://frutjam.com/ko/components/sidebar
---

# 사이드바 구성요소

Sidebar components organize primary navigation and auxiliary content in a fixed or collapsible side panel. Built with semantic HTML, sidebars improve navigation without consuming main content space. The Frutjam sidebar system supports multiple layouts, widths, and behaviors—ideal for admin dashboards, documentation sites, and complex applications.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class   | 타입   | Description                                           |
| ------- | ---- | ----------------------------------------------------- |
| sidebar | Base | Fixed side panel for navigation and auxiliary content |

## Basic Usage

Use the `sidebar` class on an `aside` element. Place it alongside your main content in a flex container.

## Sidebar Navigation

A full navigation sidebar with grouped sections and active state styling.

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

## Collapsible Sidebar

For mobile or overlay sidebars, combine the `sidebar` class with the `drawer drawer-start` dialog component.

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