Drawer

The Drawer component is a Material-UI component that slides in from the side of the screen, providing a flexible way to display menus, navigation, or additional content.

import dash
from dash import Input, Output
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider(
  children=[
    dmc.Box(
        sx={"padding": "16px"},
        children=[
            dmc.Button("Open Drawer", id="open-button"),
            dmc.Drawer(
                id="drawer",
                open=False,
                anchor="left",
                children=[
                    dmc.Box(
                        sx={"padding": "16px", "width": "340px", "display": "flex", "flexDirection": "column", "alignItems": "center"},
                        children=[
                        dmc.Box("This is the Drawer content", sx={"padding": "16px"}),
                        dmc.Button("Close Drawer", id="close-button"),
                        ]
                    )
                ],
                sx={"backgroundColor": "#f5f5f5"},
            ),
        ]
    )
  ]
)

@app.callback(
    Output("drawer", "open"),
    [Input("open-button", "n_clicks"), Input("close-button", "n_clicks")],
    prevent_initial_call=True,
)
def toggle_drawer(open_clicks, close_clicks):
    ctx = dash.callback_context
    if not ctx.triggered:
        return False
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    return button_id == "open-button"

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Drawer component.

Prop	Type	Default	Description
open	boolean	false	Controls whether the drawer is open.
anchor	"left" / "right" / "top" / "bottom"	"left"	The side from which the drawer appears.
children	ReactNode / DashComponent		The content displayed inside the drawer.
sx	object		Custom styles using the Material-UI `sx` prop.
variant	"permanent" / "persistent" / "temporary"	"temporary"	The variant to use for the drawer.
elevation	number	16	The z-depth of the drawer, corresponding to Material Design elevation.
hideBackdrop	boolean	false	If true, the backdrop (overlay) is not rendered when the drawer is open.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Drawer Documentation

Props Table​

Props Table