메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

사이드바 구성요소

마지막 업데이트:

측면 탐색 패널을 위한 CSS 전용 Tailwind CSS 사이드바입니다. 탐색 항목 상태 및 섹션 제목이 포함된 접을 수 있습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

사이드바 구성 요소는 고정 또는 접이식 측면 패널에 기본 탐색 및 보조 콘텐츠를 구성합니다. 의미론적 HTML로 구축된 사이드바는 기본 콘텐츠 공간을 차지하지 않고도 탐색 기능을 향상시킵니다. Frutjam 사이드바 시스템은 다양한 레이아웃, 너비 및 동작을 지원하므로 관리 대시보드, 문서 사이트 및 복잡한 애플리케이션에 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
sidebar베이스탐색 및 보조 콘텐츠를 위한 고정 측면 패널

기본 사용법

aside 요소에 sidebar 클래스를 사용하세요. Flex 컨테이너의 기본 콘텐츠와 함께 배치하세요.

 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>

사이드바 탐색

그룹화된 섹션과 활성 상태 스타일이 포함된 전체 탐색 사이드바입니다.

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>

접이식 사이드바

모바일 또는 오버레이 사이드바의 경우 sidebar 클래스를 drawer Drawer-start 대화 상자 구성 요소와 결합합니다.

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 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 사이드바 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요