ResizableSidebar
A draggable, resizable sidebar that attaches to any side of its parent container. Hover over a sidebar to reveal the collapse toggle; drag the thick edge to resize.
Live demos — all four alignments
alignment="left"
Parent container
Sidebar
Resize or collapse me!
alignment="right"
Parent container
Sidebar
Resize or collapse me!
alignment="top"
Parent container
Sidebar
Resize or collapse me!
alignment="bottom"
Parent container
Sidebar
Resize or collapse me!
Usage
1 · Basic left sidebar
// The parent wrapper MUST be position:relative (or any non-static position).
// The sidebar will stretch along the full side automatically.
<div className="relative h-screen">
<ResizableSidebar alignment="left" />
{/* Your page content sits next to the sidebar */}
<main style={{ marginLeft: 256 }}>…</main>
</div>2 · Right sidebar with custom sizes
<div className="relative h-screen">
<ResizableSidebar
alignment="right"
defaultSize={320}
minSize={80}
maxSize={480}
>
<nav>…</nav>
</ResizableSidebar>
</div>3 · Bottom panel (render-prop children)
// Children can be a render-prop that receives { isMinimized }.
<div className="relative h-[600px] w-full">
<ResizableSidebar alignment="bottom" defaultSize={200} minSize={48}>
{({ isMinimized }) =>
isMinimized ? (
<span className="text-xs text-gray-400">▲ expand</span>
) : (
<div>
<h3>Console</h3>
<p>…output…</p>
</div>
)
}
</ResizableSidebar>
</div>4 · Top toolbar with toggle icon position
<div className="relative h-screen">
<ResizableSidebar
alignment="top"
defaultSize={160}
minimizeIconPosition="top"
className="border-b border-gray-700"
>
<header className="flex items-center gap-4">…</header>
</ResizableSidebar>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alignment | 'left' | 'right' | 'top' | 'bottom' | 'left' | Which side of the parent to attach to |
| defaultSize | number | 256 | Initial width (left/right) or height (top/bottom) in px |
| minSize | number | 64 | Minimum size in px |
| maxSize | number | Infinity | Maximum size in px (capped at parent dimension) |
| minimizeIconPosition | 'top' | 'center' | 'bottom' | 'center' | Position of the collapse toggle along the sidebar edge |
| className | string | '' | Extra Tailwind / CSS classes on the sidebar element |
| children | ReactNode | ({ isMinimized }) => ReactNode | — | Sidebar content; render-prop receives minimized state |