Drawer

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

API Reference

rx.drawer.root

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

Prop	Type \| Values	Default
`as_child`	`bool`	`-`
`default_open`	`bool`	`-`
`open`	`bool`	`-`
`modal`	`bool`	`True`
`direction`	`"top" \| "right" \| ...`	`"bottom"`
`dismissible`	`bool`	`-`
`handle_only`	`bool`	`-`
`snap_points`	`Union[Sequence, NoneType]`	`-`
`fade_from_index`	`int`	`the last snap point`
`scroll_lock_timeout`	`int`	`500ms`
`prevent_scroll_restoration`	`bool`	`True`
`should_scale_background`	`bool`	`-`
`close_threshold`	`float`	`-`

Event Triggers

See the full list of default event triggers

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.

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

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`	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.

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

Event Triggers

See the full list of default event triggers

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