Drawer
The Drawer component, built on top of Vaul, provides sliding panels that offer additional content spaces without navigating away from the main screen. It's perfect for enhancing responsiveness across components due to its mobile-friendly appearance. This component is ideal for displaying supplementary content like settings, forms, or navigation menus, improving user experience by keeping the main content in focus while providing quick access to additional features.
Additional Examples
With Dialog
You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.
Configurable Props
<Drawer>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
closeThreshold | string | Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more. | |
scrollLockTimeout | number | Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms. | |
snapPoints | array | 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. Example [0.2, 0.5, 0.8]. You can also use px values, which doesn't take screen height into account. | |
modal | boolean | true | When false it allows to interact with elements outside of the drawer without closing it. Defaults to true. |
handleOnly | boolean | false | When true only allows the drawer to be dragged by the |
direction | string | bottom | Direction of the drawer. Can be top or bottom, left, right. Defaults to bottom. |
preventScrollRestoration | boolean | true | When true it prevents scroll restoration when the drawer is closed after a navigation happens inside of it. Defaults to true. |
disablePreventScroll | boolean | bottom | Direction of the drawer. Can be top or bottom, left, right. Defaults to bottom. |