Drawer
Drawer is a panel that slides in from the edge of the screen, triggered by a button.
Installation
npx jsx-daisyui add drawerDefault
drawer-default
Navbar
drawer-navbar
Right side
drawer-right
Props
Drawer
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controls whether the drawer is open or closed. |
onOpen | () => void | - | Called when the drawer requests to open. |
onClose | () => void | - | Called when the drawer requests to close (overlay click or close action). |
onToggle | () => void | - | Toggles the drawer between open and closed states. |
end | boolean | false | When true, the drawer slides in from the right side of the screen. |
Drawer.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Main page content rendered beside the drawer. |
Drawer.Side
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content rendered inside the drawer panel (navigation, forms, etc.). |
Drawer.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Element that opens the drawer when clicked. |
onClick | React.MouseEventHandler<HTMLButtonElement> | - | Optional click handler called in addition to opening the drawer. |
Drawer.Close
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Element that closes the drawer when clicked. |
onClick | React.MouseEventHandler<HTMLButtonElement> | - | Optional click handler called alongside the close action. |
Drawer.Header
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Header content (typically title and description). |
Drawer.Title
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Drawer title rendered as a heading element. |
Drawer.Description
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Supporting text below the title. |
Drawer.Footer
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Footer content pinned to the bottom of the drawer (usually actions). |
useDrawer
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Current open state of the drawer. |
openDrawer | () => void | - | Opens the drawer. |
close | () => void | - | Closes the drawer. |
toggle | () => void | - | Toggles between open and closed state. |