> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.drawer.root
  - rx.drawer.trigger
  - rx.drawer.overlay
  - rx.drawer.portal
  - rx.drawer.content
  - rx.drawer.close

only_low_level:
  - True

DrawerRoot: |
  lambda **props: 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.button("Close")),
              ),
              height="100%",
              width="20em",
              background_color="#FFF"
          ),
      ),
      **props,
  )
---

```python exec
import reflex as rx
```

# Drawer

```python demo
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",
)
```

## Sidebar Menu with a Drawer and State

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.

```python demo exec
class DrawerState(rx.State):
    is_open: bool = False

    @rx.event
    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.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child. |
| `default_open` | bool | - | The open state of the drawer when it is initially rendered. Use when you do not need to control its open state. |
| `open` | bool | - | Whether the drawer is open or not. |
| `modal` | bool | ``True`` | When `False`, it allows interaction with elements outside of the drawer without closing it. |
| `direction` | Literal["top", "right", "bottom", "left"] | ``"bottom"`` | Direction of the drawer. This adjusts the animations and the drag direction. |
| `dismissible` | bool | - | When `False`, dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in combination with the open prop, otherwise you won't be able to open/close the drawer. |
| `handle_only` | bool | - | When `True`, dragging will only be possible by the handle. |
| `snap_points` | Sequence[str, float], NoneType | - | Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account. |
| `fade_from_index` | int | `the last snap point` | Index of a snapPoint from which the overlay fade should be applied. |
| `scroll_lock_timeout` | int | `500ms` | Duration for which the drawer is not draggable after scrolling content inside of the drawer. |
| `prevent_scroll_restoration` | bool | ``True`` | When `True`, it prevents scroll restoration. |
| `should_scale_background` | bool | - | Enable background scaling, it requires container element with `vaul-drawer-wrapper` attribute to scale its background. |
| `close_threshold` | float | - | Number between 0 and 1 that determines when the drawer should be closed. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_open_change` | Fires when the drawer is opened or closed. |
| `on_animation_end` | Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered. |

### rx.drawer.trigger

The button that opens the dialog.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | `true, if the first child acts as the trigger` |  |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.drawer.overlay

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

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.drawer.portal

Portals your drawer into the body.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.drawer.content

Content that should be rendered in the drawer.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_open_auto_focus` | Fired when the drawer content is opened. |
| `on_close_auto_focus` | Fired when the drawer content is closed. |
| `on_escape_key_down` | Fired when the escape key is pressed. |
| `on_pointer_down_outside` | Fired when the pointer is down outside the drawer content. |
| `on_interact_outside` | Fired when interacting outside the drawer content. |

### rx.drawer.close

A button that closes the drawer.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | `true, if the first child acts as the trigger` |  |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/