## Drawer Use Drawer component to create collapsible sidebars. Category: Overlay ### Simple Example This is a basic example of dmc.Drawer. Set the `opened` property to open the drawer. The drawer can be controlled in following ways: * programmatically (using callbacks) * by clicking on the cross button (if not disabled using `withCloseButton` prop) * by clicking outside the drawer area (if not disabled using `closeOnClickOutside` prop) * by pressing the ESC key (if not disabled using `closeOnEscape` prop) ```python import dash_mantine_components as dmc from dash import html, Output, Input, callback component = html.Div( [ dmc.Button("Open Drawer", id="drawer-demo-button"), dmc.Drawer( title="Drawer Example", id="drawer-simple", padding="md", ), ] ) @callback( Output("drawer-simple", "opened"), Input("drawer-demo-button", "n_clicks"), prevent_initial_call=True, ) def drawer_demo(n_clicks): return True ``` ### Different Sizes Set the size of the drawer using the `size` prop. ```python import dash_mantine_components as dmc from dash import html, Output, Input, State, callback component = html.Div( [ dmc.Drawer(title="Size: md", id="drawer-size-md", padding="md", size="md"), dmc.Drawer( title="Size: 450px", id="drawer-size-450", padding="md", size=450, ), dmc.Drawer( title="Size: 55%", id="drawer-size-55", padding="md", size="55%", ), dmc.Drawer( title="Size: full", id="drawer-size-full", padding="md", size="100%", ), dmc.Group( [ dmc.Button("md", id="md-drawer-button"), dmc.Button("450px", id="450-drawer-button"), dmc.Button("55%", id="55-drawer-button"), dmc.Button("full", id="full-drawer-button"), ] ), ] ) def toggle_drawer(n_clicks, opened): return not opened for size in ["md", "450", "55", "full"]: callback( Output(f"drawer-size-{size}", "opened"), Input(f"{size}-drawer-button", "n_clicks"), State(f"drawer-size-{size}", "opened"), prevent_initial_call=True, )(toggle_drawer) ``` ### Placement By default, Drawer will start to appear from the left, but this position can be customized by setting the `position` prop. ```python import dash_mantine_components as dmc from dash import html, Output, Input, State, callback data = [ ["Left (Default)", "left"], ["Top", "top"], ["Right", "right"], ["Bottom", "bottom"], ] component = html.Div( [ dmc.Drawer( id="drawer-position", ), dmc.Group( align="center", gap="xl", children=[ dmc.RadioGroup( dmc.Group([dmc.Radio(label, value=value) for label, value in data]), id="drawer-position-radio", value="left", ), dmc.Button("Open Drawer", id="drawer-position-button"), ], ), ] ) @callback( Output("drawer-position", "opened"), Output("drawer-position", "position"), Input("drawer-position-button", "n_clicks"), State("drawer-position-radio", "value"), prevent_initial_call=True, ) def toggle_drawer(n_clicks, position): return True, position ``` ### Transition You can customize transition, timing function and duration for Drawer transition. ```python import dash_mantine_components as dmc from dash import html, Output, Input, callback component = html.Div( [ dmc.Button("Open Drawer", id="drawer-transition-button"), dmc.Drawer( title="Drawer Example", id="drawer-fancy", padding="md", transitionProps={ "transition": "rotate-left", "duration": 1000, "timingFunction": "ease", }, ), ] ) @callback( Output("drawer-fancy", "opened"), Input("drawer-transition-button", "n_clicks"), prevent_initial_call=True, ) def drawer_demo(n_clicks): return True ``` ### Drawer Stack Use `DrawerStack` component to render multiple drawers at the same time. `DrawerStack` keeps track of opened drawers, manages `z-index` values, focus trapping and `closeOnEscape` behavior. Differences from using multiple Drawer components: - `DrawerStack` children must be `ManagedDrawer` components - `DrawerStack` manages `z-index` values – drawers that are opened later will always have higher `z-index` value disregarding their order in the DOM - `DrawerStack` disables focus trap and `Escape` key handling for all drawers except the one that is currently opened - Drawers that are not currently visible are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none` - Only one overlay is rendered at a time ```python import dash_mantine_components as dmc from dash import Output, Input, callback, ctx, no_update component = dmc.Center([ dmc.DrawerStack( id="drawer-stack", children=[ dmc.ManagedDrawer( id="drawer-delete-page", title="Delete this page?", children=[ dmc.Text("Are you sure you want to delete this page? This action cannot be undone."), dmc.Group( mt="lg", justify="flex-end", children=[ dmc.Button("Cancel", id="drawer-cancel-1", variant="default"), dmc.Button("Delete", id="drawer-delete", color="red"), ], ), ], ), dmc.ManagedDrawer( id="drawer-confirm-action", title="Confirm action", children=[ dmc.Text("Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below."), dmc.Group( mt="lg", justify="flex-end", children=[ dmc.Button("Cancel", id="drawer-cancel-2", variant="default"), dmc.Button("Confirm", id="drawer-confirm", color="red"), ], ), ], ), dmc.ManagedDrawer( id="drawer-really-confirm-action", title="Really confirm action", children=[ dmc.Text("Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?"), dmc.Group( mt="lg", justify="flex-end", children=[ dmc.Button("Cancel", id="drawer-cancel-3", variant="default"), dmc.Button("Confirm", id="drawer-final-confirm", color="red"), ], ), ], ), ] ), dmc.Button("Open drawer", id="drawer-stack-open") ]) @callback( Output("drawer-stack", "open"), Output("drawer-stack", "closeAll"), Input("drawer-stack-open", "n_clicks"), Input("drawer-cancel-1", "n_clicks"), Input("drawer-cancel-2", "n_clicks"), Input("drawer-cancel-3", "n_clicks"), Input("drawer-delete", "n_clicks"), Input("drawer-confirm", "n_clicks"), Input("drawer-final-confirm", "n_clicks"), prevent_initial_call=True, ) def control_modals(*_): trigger = ctx.triggered_id if trigger == "drawer-stack-open": return "drawer-delete-page", False if trigger in ("drawer-cancel-1", "drawer-cancel-2", "drawer-cancel-3", "drawer-final-confirm"): return None, True if trigger == "drawer-delete": return "drawer-confirm-action", False if trigger == "drawer-confirm": return "drawer-really-confirm-action", False return no_update, no_update ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Drawer Selectors | Selector | Static selector | Description | | --------- | --------------------------- | ----------------------------------------------------------------------- | | `root` | `.mantine-Drawer-root` | Root element | | `inner` | `.mantine-Drawer-inner` | Element used to center modal, has fixed position, takes entire screen | | `content` | `.mantine-Drawer-content` | Drawer.Content root element | | `header` | `.mantine-Drawer-header` | Contains title and close button | | `overlay` | `.mantine-Drawer-overlay` | Overlay displayed under the Drawer.Content | | `title` | `.mantine-Drawer-title` | Drawer title (`h2` tag), displayed in the header | | `body` | `.mantine-Drawer-body` | Drawer body, displayed after header | | `close` | `.mantine-Drawer-close` | Close button | #### Drawer CSS variables | Selector | Variable | Description | |----------|-------------------|------------------------------------------| | root | --drawer-offset | Controls margin of Drawer.Content | | | --drawer-size | Controls width of Drawer.Content | | | --drawer-flex | Controls flex property of Drawer.Content | | | --drawer-align | Controls align-items property of Drawer.Content | | | --drawer-justify | Controls justify-content property of Drawer.Content | | | --drawer-height | Controls height property of Drawer.Content | ### Keyword Arguments #### Drawer - children (a list of or a singular dash component, string or number; optional): Drawer content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - closeButtonProps (dict; optional): Props passed down to the close button. - closeOnClickOutside (boolean; optional): Determines whether the modal/drawer should be closed when user clicks on the overlay, `True` by default. - closeOnEscape (boolean; optional): Determines whether `onClose` should be called when user presses the escape key, `True` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - keepMounted (boolean; optional): If set modal/drawer will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead, `False` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - lockScroll (boolean; optional): Determines whether scroll should be locked when `opened={True}`, `True` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offset (string | number; optional): Drawer container offset from the viewport end, `0` by default. - opened (boolean; default False): Determines whether modal/drawer is opened. - overlayProps (dict; optional): Props passed down to the `Overlay` component, can be used to configure opacity, `background-color`, styles and other properties. `overlayProps` is a dict with keys: - padding (number; optional): Key of `theme.spacing` or any valid CSS value to set content, header and footer padding, `'md'` by default. - portalProps (dict; optional): Props passed down to the Portal component when `withinPortal` is set. - position (a value equal to: 'top', 'left', 'bottom', 'right'; optional): Side of the screen on which drawer will be opened, `'left'` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `0` by default. - removeScrollProps (dict; optional): Props passed down to react-remove-scroll, can be used to customize scroll lock behavior. - returnFocus (boolean; optional): Determines whether focus should be returned to the last active element when `onClose` is called, `True` by default. - shadow (optional): Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by default. - size (number; optional): Controls width of the content area, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - title (a list of or a singular dash component, string or number; optional): Drawer title. - transitionProps (dict; optional): Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'pop' }` by default. `transitionProps` is a dict with keys: - trapFocus (boolean; optional): Determines whether focus should be trapped, `True` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withCloseButton (boolean; optional): Determines whether the close button should be rendered, `True` by default. - withOverlay (boolean; optional): Determines whether the overlay should be rendered, `True` by default. - withinPortal (boolean; optional): Determines whether the component should be rendered inside `Portal`, `True` by default. - zIndex (string | number; optional): `z-index` CSS property of the root element, `200` by default. #### DrawerStack - children (list of dicts; optional): ManagedDrawer content. `children` is a list of dicts with keys: - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - close (string | list of strings; optional): Closes one or more drawers by ID. Accepts a single ID (string or dict) or a list of IDs. - closeAll (boolean; optional): Closes all drawers in the DrawerStack. - data-* (string; optional): Wild card data attributes. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - open (string | list of strings; optional): Opens one or more drawers by ID. Accepts a single ID (string or dict) or a list of IDs. - state (dict; optional): Current opened state of each drawer. Read only. `state` is a dict with keys: - tabIndex (number; optional): tab-index. - toggle (string | list of strings; optional): Toggles one or more drawers by ID. Accepts a single ID (string or dict) or a list of IDs. #### ManagedDrawer > Note: ManagedDrawer is for use in the DrawerStack component. id is required. open/closed state is controlled by DrawerStack. - children (a list of or a singular dash component, string or number; optional): Drawer content. - id (string; required): Unique ID to identify this component. Required for use with DrawerStack. - aria-* (string; optional): Wild card aria attributes. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - closeButtonProps (dict; optional): Props passed down to the close button. - closeOnClickOutside (boolean; optional): Determines whether the modal/drawer should be closed when user clicks on the overlay, `True` by default. - closeOnEscape (boolean; optional): Determines whether `onClose` should be called when user presses the escape key, `True` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - keepMounted (boolean; optional): If set modal/drawer will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead, `False` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - lockScroll (boolean; optional): Determines whether scroll should be locked when `opened={True}`, `True` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offset (string | number; optional): Drawer container offset from the viewport end, `0` by default. - overlayProps (dict; optional): Props passed down to the `Overlay` component, can be used to configure opacity, `background-color`, styles and other properties. `overlayProps` is a dict with keys: - padding (number; optional): Key of `theme.spacing` or any valid CSS value to set content, header and footer padding, `'md'` by default. - portalProps (dict; optional): Props passed down to the Portal component when `withinPortal` is set. - position (a value equal to: 'top', 'left', 'bottom', 'right'; optional): Side of the screen on which drawer will be opened, `'left'` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `0` by default. - removeScrollProps (dict; optional): Props passed down to react-remove-scroll, can be used to customize scroll lock behavior. - returnFocus (boolean; optional): Determines whether focus should be returned to the last active element when `onClose` is called, `True` by default. - shadow (optional): Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by default. - size (number; optional): Controls width of the content area, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - title (a list of or a singular dash component, string or number; optional): Drawer title. - transitionProps (dict; optional): Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'pop' }` by default. `transitionProps` is a dict with keys: - trapFocus (boolean; optional): Determines whether focus should be trapped, `True` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withCloseButton (boolean; optional): Determines whether the close button should be rendered, `True` by default. - withOverlay (boolean; optional): Determines whether the overlay should be rendered, `True` by default. - withinPortal (boolean; optional): Determines whether the component should be rendered inside `Portal`, `True` by default. - zIndex (string | number; optional): `z-index` CSS property of the root element, `200` by default.