Use the Drawer component (or “off-canvas”) to show a fixed element relative to the document page from any side for navigation, contact forms, informational purposes or other user actions.
Default drawer
To initiate the drawer component you need to set the `let hidden=true`, `width` props to the drawer component itself.
For accessibility you should also set the `id` prop to the element. This will add the drawer `aria-labelledby=id` and `aria-controls=id` to the drawer component.
Drawer navigation
Use this example to show a navigational sidebar inside the drawer component.
Contact form
Use this example to show a contact form inside the drawer component.
Form elements
Use this example if you want to add form elements inside the drawer component including datepickers.
Placement
Use the placement prop to position the drawer component either on the top, right, bottom, or left side of the document page. This can be done using the `placement='left|right|top|bottom'` where the default value is “left”.
Left drawer
Right drawer
Use this example to show the drawer component on the right side of the page.
Set the `transitionParams` variable to new variables.
Top drawer
Use this example to show the drawer on the top side of the page.
Bottom drawer
Use this example to show the drawer on the bottom side of the page.
Backdrop
The backdrop element can be used to dim out the background elements when the drawer is visible and also automatically hide the component when clicking outside of it.
Use the `backdrop="false|true"` prop where you can disable or enable the backdrop element.
Enabled (default)
Use this example to enable the backdrop element by default.
Disabled
Use the `backdrop=false` prop to disable the backdrop element when the drawer is shown.
Position
Use `leftOffset|rightOffset|topOffset|bottomOffset` prop to change the position of the drawer.
Disabling outside click and backdrop
As the default, the drawer closes when you click the outside of the drawer. However sometimes you don't want that. Set `activateClickOutside` to false to disable it.