Drawer is a flexible component for off-canvas panels, sidebars, and overlays. It supports manual and programmatic control, named instances, and can be positioned at the start or end of the viewport.
This is a basic Drawer example. Click the button to open the sidebar, and use the sidebar button to close it. DrawerContent and DrawerSide are direct children of Drawer. Remove the positioning classes from this example to use it in your app:
The Drawer components include the following:
The Drawer component is the wrapper. It syncs its open state and provides context for DrawerContent and DrawerSide. Use the open prop for manual control, and end to position the drawer at the end (right).
| Drawer Props | Type | Description |
|---|---|---|
open | boolean | |
name | string | Unique name/id for the Drawer instance. Used to sync state between Drawer, DrawerContent, and DrawerSide. Default: |
end | boolean | Positions the drawer at the end (right) side of the screen. |
| Drawer Events | Arguments | Description |
|---|---|---|
update:open |
| Drawer Slots | Description |
|---|---|
default | The default slot. Must contain DrawerContent and DrawerSide as direct children. |
| Drawer Provides | Type | Description |
|---|---|---|
isDrawerOpen | Whether the drawer is open or closed. | |
closeDrawer | Closes the drawer. | |
openDrawer | Opens the drawer. |
Contains the main content of the Drawer. Use inside a Drawer wrapper.
| DrawerContent Props | Type | Description |
|---|---|---|
name | string | Unique name/id for the Drawer instance. Default: |
| DrawerContent Slots | Description |
|---|---|
default | Slot for your main content. Receives drawer state as slot props. |
Contains the side content and overlay. Use inside a Drawer wrapper. Clicking the overlay will close the drawer.
| DrawerSide Props | Type | Description |
|---|---|---|
name | string | Unique name/id for the Drawer instance. Default: |
| DrawerSide Slots | Description |
|---|---|
default | Slot for your sidebar content. Receives drawer state as slot props. |
This example shows the Drawer positioned at the end (right) side of the viewport using the right prop.
This example demonstrates the Drawer in mobile mode, where it is always open on desktop and overlays on mobile.