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
`default_open`	`bool`
`open`	`bool`
`modal`	`bool`
`direction`	`"top" \| "right" \| ...`
`dismissible`	`bool`
`handle_only`	`bool`
`snap_points`	`List`
`fade_from_index`	`int`
`scroll_lock_timeout`	`int`
`preventScrollRestoration`	`bool`
`should_scale_background`	`bool`
`close_threshold`	`float`
`as_child`	`bool`

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`

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`

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