Skip to main content

​
Import

from reflex_ui import drawer

​
Description

A drawer (side panel) component that slides in from the edge of the screen. Based on the Vaul library, it provides a smooth sliding animation and supports multiple directions.

​
High-Level API

drawer(
    trigger=button("Open Drawer"),
    title="Drawer Title",
    description="Drawer description",
    content="Drawer content"
)

​
Props

​
trigger
Component | None
Component that triggers the drawer when clicked
​
title
str | Component | None
The drawer title
​
description
str | Component | None
Description text shown below the title
​
content
str | Component | None
Main content area of the drawer
​
default_open
bool
Initial open state when uncontrolled
​
open
Var[bool] | bool
Current open state for controlled usage
​
modal
bool
default:"True"
When false, allows interaction outside the drawer without closing it
​
direction
Literal['top', 'bottom', 'left', 'right']
default:"'bottom'"
Direction from which the drawer slides in
​
dismissible
bool
default:"True"
When false, prevents closing via dragging, clicking outside, or pressing Esc
​
handle_only
bool
default:"False"
When true, dragging only works on the handle element
​
container
str
Container element selector. Defaults to document.body
​
reposition_inputs
bool
default:"True"
Whether to reposition inputs when drawer opens
​
snap_points
Sequence[str | float]
Array of snap points as percentages (0-100) or px values
​
active_snap_point
bool
Current active snap point
​
fade_from_index
int
Snap point index from which to apply overlay fade
​
snap_to_sequential_point
bool
Whether to snap to sequential points

​
Event Handlers

​
on_open_change
EventHandler[bool]
Fires when drawer opens or closes
​
on_animation_end
EventHandler[bool]
Triggered after open/close animation ends. Receives final open state
​
set_active_snap_point
EventHandler[int]
Function to set the active snap point by index

​
Compositional API

​
drawer.root()

Root component containing all drawer parts.
​
default_open
bool
Initial open state
​
open
Var[bool] | bool
Controlled open state
​
modal
bool
Modal behavior
​
direction
Literal['top', 'bottom', 'left', 'right']
Slide direction
​
dismissible
bool
Whether drawer can be dismissed
​
handle_only
bool
Restrict dragging to handle only
​
container
str
Container element
​
reposition_inputs
bool
Input repositioning
​
snap_points
Sequence[str | float]
Snap point positions
​
active_snap_point
bool
Active snap point
​
fade_from_index
int
Fade start index
​
snap_to_sequential_point
bool
Sequential snapping

​
drawer.trigger()

Button that opens the drawer.
​
as_child
bool
default:"False"
Render trigger as child element
​
render_
Component
Custom component to render

​
drawer.portal()

Portals drawer into the body.

​
drawer.overlay()

Layer that covers the inert portion of the view.
​
as_child
bool
default:"False"
Render as child element

​
drawer.content()

Container for drawer contents.
​
as_child
bool
default:"False"
Render as child element

​
drawer.close()

Button that closes the drawer.
​
as_child
bool
default:"False"
Render as child element

​
drawer.title()

Accessible title announced when drawer opens.
​
as_child
bool
default:"False"
Render as child element

​
drawer.description()

Accessible description announced when drawer opens.
​
as_child
bool
default:"False"
Render as child element

​
drawer.handle()

Optional handle for dragging the drawer.

​
Class Names

Access default class names via drawer.class_names:
  • ROOT: Root container styling
  • TRIGGER: Trigger button styling
  • PORTAL: Portal styling
  • CONTENT: Content container styling
  • OVERLAY: Overlay background styling
  • CLOSE: Close button styling
  • TITLE: Title text styling
  • DESCRIPTION: Description text styling
  • HANDLE: Drag handle styling

​
Example

import reflex as rx
from reflex_ui import drawer, button

def my_component():
    return drawer.root(
        drawer.trigger(
            render_=button("Open Menu", variant="outline")
        ),
        drawer.portal(
            drawer.overlay(),
            drawer.content(
                drawer.title("Navigation"),
                drawer.description("Site navigation menu"),
                rx.box(
                    rx.text("Menu content here"),
                    padding="4"
                ),
                drawer.close(
                    button("Close", variant="ghost")
                )
            )
        ),
        direction="left"
    )

Build docs developers (and LLMs) love

Get started for freeTalk to us