Drawer
Drawer
A mobile-friendly panel that slides in from the edge of the screen.
Basic Example
A simple drawer that slides up from the bottom.
Directions
Drawer can slide from any edge of the screen.
Snap Points
Use SnapPoints to create a multi-stop drawer that can rest at partial heights. Drag the handle to snap between positions, or use programmatic buttons.
API Reference
Component parameters and their types.
Drawer
| Prop | Type | Default | Description |
|---|---|---|---|
| Direction | DrawerDirection | Bottom | Top, Right, Bottom, or Left. |
| Open | @bind-Open / bool? | — | Controlled open state. |
| DefaultOpen | bool | false | Initial open state. |
DrawerContent
| Prop | Type | Default | Description |
|---|---|---|---|
| SnapPoints | float[]? | — | Fraction-of-viewport heights (e.g. 0.35, 0.65, 1.0) to snap to. Bottom drawers only. |
| SnapIndex | int | 0 | Currently active snap point index. Supports two-way binding. |
| ShowHandle | bool | true | Show the drag handle at the top of the drawer. |