Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Drawer

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.

Disabling only outside click