Drawer

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open Drawer")),
    rx.drawer.overlay(z_index="5"),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.close(rx.box(rx.button("Close"))),
                align_items="start",
                direction="column",
            ),
            top="auto",
            right="auto",
            height="100%",
            width="20em",
            padding="2em",
            background_color="#FFF"
            # background_color=rx.color("green", 3)
        )
    ),
    direction="left",
)

This example shows how to create a sidebar menu with a drawer. The drawer is opened by clicking a button. The drawer contains links to different sections of the page. When a link is clicked the drawer closes and the page scrolls to the section.

The rx.drawer.root component has an open prop that is set by the state variable is_open. Setting the modal prop to False allows the user to interact with the rest of the page while the drawer is open and allows the page to be scrolled when a user clicks one of the links.

Test1

Test2

class DrawerState(rx.State):
    is_open: bool = False

    def toggle_drawer(self):
        self.is_open = not self.is_open


def drawer_content():
    return rx.drawer.content(
        rx.flex(
            rx.drawer.close(
                rx.button(
                    "Close",
                    on_click=DrawerState.toggle_drawer,
                )
            ),
            rx.link(
                "Link 1",
                href="#test1",
                on_click=DrawerState.toggle_drawer,
            ),
            rx.link(
                "Link 2",
                href="#test2",
                on_click=DrawerState.toggle_drawer,
            ),
            align_items="start",
            direction="column",
        ),
        height="100%",
        width="20%",
        padding="2em",
        background_color=rx.color("grass", 7),
    )


def lateral_menu():
    return rx.drawer.root(
        rx.drawer.trigger(
            rx.button(
                "Open Drawer",
                on_click=DrawerState.toggle_drawer,
            )
        ),
        rx.drawer.overlay(),
        rx.drawer.portal(drawer_content()),
        open=DrawerState.is_open,
        direction="left",
        modal=False,
    )


def drawer_sidebar():
    return rx.vstack(
        lateral_menu(),
        rx.section(
            rx.heading("Test1", size="8"),
            id="test1",
            height="400px",
        ),
        rx.section(
            rx.heading("Test2", size="8"),
            id="test2",
            height="400px",
        ),
    )

API Reference

rx.drawer.root

The Root component of a Drawer, contains all parts of a drawer.

Prop	Type \| Values	Default
`open`	`bool`
`should_scale_background`	`bool`
`close_threshold`	`float`
`snap_points`	`List`
`fade_from_index`	`int`
`scroll_lock_timeout`	`int`
`modal`	`bool`
`direction`	`"top" \| "right" \| ...`
`preventScrollRestoration`	`bool`
`as_child`	`bool`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_open_change`	Fires when the drawer is opened.

rx.drawer.trigger

The button that opens the dialog.

Prop	Type \| Values	Default
`as_child`	`bool`	`True`
`as_child`	`bool`

Event Triggers

See the full list of default event triggers

rx.drawer.overlay

A layer that covers the inert portion of the view when the dialog is open.

Prop	Type \| Values	Default
`as_child`	`bool`

Event Triggers

See the full list of default event triggers

rx.drawer.portal

Portals your drawer into the body.

Prop	Type \| Values	Default
`as_child`	`bool`

Event Triggers

See the full list of default event triggers

rx.drawer.content

Content that should be rendered in the drawer.

Prop	Type \| Values	Default
`as_child`	`bool`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_open_auto_focus`	The on_open_auto_focus event handler is called when the component opens and the focus is returned to the first item.
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.

rx.drawer.close

A button that closes the drawer.

Prop	Type \| Values	Default
`as_child`	`bool`	`True`
`as_child`	`bool`

Event Triggers

See the full list of default event triggers

Learn

Components

Recipes

API Reference

Drawer

Sidebar Menu with a Drawer and State

Test1

Test2

API Reference

rx.drawer.root

Event Triggers

rx.drawer.trigger

Event Triggers

rx.drawer.overlay

Event Triggers

rx.drawer.portal

Event Triggers

rx.drawer.content

Event Triggers

rx.drawer.close

Event Triggers