A generic resizable side panel container with collapse/expand functionality. Supports custom header, body, and footer content with smart drag-to-collapse behavior.
DraggableSideNav
import { DraggableSideNav } from '@lobehub/ui';A generic resizable side panel container with collapse/expand functionality. Supports custom header, body, and footer content with smart drag-to-collapse behavior.
import { DraggableSideNav } from '@lobehub/ui';| Property | Description | Type | Default |
|---|---|---|---|
| children | Body content (main content area) | ReactNode | ((expand: boolean) => ReactNode) | - |
| header | Header content | ReactNode | ((expand: boolean) => ReactNode) | - |
| footer | Footer content | ReactNode | ((expand: boolean) => ReactNode) | - |
| expand | Whether the panel is expanded (controlled) | boolean | - |
| defaultExpand | Whether the panel is expanded by default | boolean | true |
| expandable | Whether the panel can be expanded/collapsed | boolean | true |
| width | Expanded width (controlled). This represents the width when expanded, not the current displayed width | number | - |
| defaultWidth | Default width when expanded | number | 280 |
| placement | Placement of the side nav | 'left' | 'right' | 'left' |
| resizable | Whether to enable resizing | boolean | true |
| minWidth | Minimum width (also the collapsed width) | number | 64 |
| maxWidth | Maximum width | number | - |
| showHandle | Whether to show handle for toggling | boolean | true |
| showHandleWhenCollapsed | Whether to show handle when collapsed | boolean | false |
| animation | Animation configuration. Set to false to disable all animations | false | { blur?: boolean, fade?: boolean, header?: boolean, body?: boolean, footer?: boolean } | - |
| onExpandChange | Callback when expand state changes | (expand: boolean) => void | - |
| onWidthChange | Callback when width changes | (delta: NumberSize, width: number) => void | - |
| onWidthDragging | Callback when actively resizing width | (delta: NumberSize, width: number) => void | - |
| classNames | Classnames for internal components | { container?: string; content?: string; handle?: string; body?: string; header?: string; footer?: string } | - |
| styles | Custom styles for internal components | { container?: CSSProperties; content?: CSSProperties; handle?: CSSProperties; body?: CSSProperties; header?: CSSProperties; footer?: CSSProperties } | - |
minWidth serves as both the minimum draggable width and the collapsed width (default 64px)animation={false} to disable all animations and remove animation wrappers, reducing overhead for better performanceA workspace-style side panel with draggable resize