--- title: "서랍" type: component version: "2.2.1" doc_version: "2.5.2" status: stable date: 2026-06-19 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "캔버스 외부 탐색 및 사이드바를 위한 JS 프리 Tailwind CSS Drawer입니다. 오버레이 지원을 통한 다양한 위치 - JavaScript 없이 액세스 가능하고 모바일 친화적입니다." url: https://frutjam.com/ko/components/drawer --- # 서랍 구성 요소 Drawer components slide in from the sides of the viewport to reveal hidden navigation, filters, or additional content. Built on the native HTML dialog element with CSS animations, drawers provide a responsive way to manage layouts on mobile and desktop devices. The Frutjam drawer system supports customizable widths, smooth animations, and overlay backgrounds for professional sidebar navigation. CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack. | Class | 타입 | Description | | --------------- | -------- | ------------------------------------------------- | | drawer | Base | Slide-in panel built on the native dialog element | | drawer-content | Modifier | Inner content area of the drawer | | drawer-backdrop | Modifier | Overlay behind the drawer | | drawer-start | Modifier | Slides in from the left | | drawer-end | Modifier | Slides in from the right | | drawer-top | Modifier | Slides in from the top | | drawer-bottom | Modifier | Slides in from the bottom | ## Basic Usage ## JS & React Helper Use `createDrawer` from `frutjam/js` or `useDrawer` from `frutjam/react` when the trigger lives outside the drawer or you need programmatic control from anywhere in your code. ## Drawer Customization The `.drawer-backdrop` provides a clickable background that closes the drawer when clicked outside the drawer, by removing this element by default prevent drawer not close when click outside. ### Close on Backdrop Click ```html ``` ### Prevent Close on Click Outside ```html ``` ## Drawer Placements ### Left Drawer (Start) ```html ``` ### Right Drawer (End) ```html ``` ### Top Drawer ```html ``` ### Bottom Drawer ```html ```