flowbite-svelte-son
Version:
Flowbite components for Svelte
727 lines (634 loc) • 34.9 kB
Markdown
---
layout: componentLayout
title: Svelte Drawer (Off-canvas) - Flowbite
breadcrumb_title: Drawer
dir: Components
description: The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements
---
<MetaTag {breadcrumb_title} {title} {dir} {description}/>
<script>
import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib';
// Props table
import { props as items} from '../props/Drawer.json'
let propHeader = ['Name', 'Type', 'Default']
let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
</script>
<Breadcrumb class="pt-16 py-8">
<BreadcrumbItem href="/" home >Home</BreadcrumbItem>
<BreadcrumbItem>{dir}</BreadcrumbItem>
<BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
</Breadcrumb>
<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
<CompoDescription>{description}</CompoDescription>
<ExampleDiv>
<GitHubSource href="drawer/Drawer.svelte">Drawer</GitHubSource>
</ExampleDiv>
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.
<Htwo label="Set up" />
```html
<script>
import { Drawer, Button, CloseButton } from 'flowbite-svelte';
import { sineIn } from 'svelte/easing';
</script>
```
<Htwo label="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.
```svelte example
<script>
import { Drawer, Button, CloseButton } from 'flowbite-svelte';
import { sineIn } from 'svelte/easing';
let hidden1 = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden1 = false)}>Show drawer</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden={hidden1} id='sidebar1'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hidden1 = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</div>
</Drawer>
```
<Htwo label="Drawer navigation" />
Use this example to show a navigational sidebar inside the drawer component.
```svelte example
<script>
import { Drawer, Button, CloseButton, Sidebar, SidebarBrand, SidebarCta, SidebarDropdownItem, SidebarDropdownWrapper, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
import { sineIn } from 'svelte/easing';
let hidden2 = true;
let spanClass = 'flex-1 ml-3 whitespace-nowrap';
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden2 = false)}>Show navigation</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden={hidden2} id='sidebar2'>
<div class='flex items-center'>
<h5 id="drawer-navigation-label-3" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">Menu</h5>
<CloseButton on:click={() => (hidden2 = true)} class='mb-4 dark:text-white'/>
</div>
<Sidebar>
<SidebarWrapper divClass='overflow-y-auto py-4 px-3 rounded dark:bg-gray-800'>
<SidebarGroup>
<SidebarItem label="Dashboard">
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
</svelte:fragment>
</SidebarItem>
<SidebarDropdownWrapper label="E-commerce">
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /></svg>
</svelte:fragment>
<SidebarDropdownItem label="Products" />
<SidebarDropdownItem label="Billing" />
<SidebarDropdownItem label="Invoice" />
</SidebarDropdownWrapper>
<SidebarItem label="Kanban" {spanClass}>
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
</svelte:fragment>
<svelte:fragment slot="subtext">
<span
class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
>Pro</span>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Inbox" {spanClass}>
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
</svelte:fragment>
<svelte:fragment slot="subtext">
<span
class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
>3</span>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Users">
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Sign In">
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Sign Up">
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
</svelte:fragment>
</SidebarItem>
</SidebarGroup>
</SidebarWrapper>
</Sidebar>
</Drawer>
```
<Htwo label='Contact form' />
Use this example to show a contact form inside the drawer component.
```svelte example
<script>
import { Drawer, Button, CloseButton, Label, Input, Textarea, P, A, Checkbox } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden3 = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden3 = false)}>Show contact form</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden={hidden3} id='sidebar3'>
<div class='flex items-center'>
<h5 id="drawer-label" class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400"><svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Contact us</h5>
<CloseButton on:click={() => (hidden3 = true)} class='mb-4 dark:text-white'/>
</div>
<form action="#" class="mb-6">
<div class="mb-6">
<Label for='email' class='block mb-2'>Your email</Label>
<Input id='email' name='email' required placeholder="name@company.com" />
</div>
<div class="mb-6">
<Label for='subject' class='block mb-2'>Subject</Label>
<Input id='subject' name='subject' required placeholder="Let us know how we can help you" />
</div>
<div class="mb-6">
<Label for="message" class="mb-2">Your message</Label>
<Textarea id="message" placeholder="Your message..." rows="4" name="message"/>
</div>
<Button type="submit" class='w-full'>Send message</Button>
</form>
<P class="mb-2 text-sm text-gray-500 dark:text-gray-400">
<A href='/' class="hover:underline">info@company.com</A>
</P>
<P class="text-sm text-gray-500 dark:text-gray-400">
<A href='/' class="hover:underline">212-456-7890</A>
</P>
</Drawer>
```
<Htwo label='Form elements' />
Use this example if you want to add form elements inside the drawer component including datepickers.
```svelte example
<script>
import { Drawer, Button, CloseButton, Label, Input, Textarea } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden4 = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden4 = false)}>Show drawer form</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden={hidden4} id='sidebar4'>
<div class='flex items-center'>
<h5 id="drawer-label" class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400"><svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>New event</h5>
<CloseButton on:click={() => (hidden4 = true)} class='mb-4 dark:text-white'/>
</div>
<form action="#" class="mb-6">
<div class="mb-6">
<Label for='title' class='block mb-2'>Title</Label>
<Input id='title' name='title' required placeholder="Apple Keynote" />
</div>
<div class="mb-6">
<Label for="description" class="mb-2">Description</Label>
<Textarea id="message" placeholder="Write event description..." rows="4" name="message"/>
</div>
<div class="mb-6">
<Input id='date' name='date' required type='date' />
</div>
<div class='mb-4'>
<div class="relative">
<Input noBorder id="search" placeholder="Add guest email" class="p-3">
</Input>
<Button textSize="text-sm" class="absolute inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-blue-700 rounded-lg right-2 bottom-2 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="submit"><svg class="w-4 h-4 mr-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path></svg>Add</Button>
</div>
</div>
<div class="flex mb-4 -space-x-4">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-1.webp" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-2.webp" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-3.webp" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-4.webp" alt="">
</div>
<Button type="submit" class="w-full"><svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Create event</Button>
</form>
</Drawer>
```
<Htwo label="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”.
<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Left drawer</Heading>
```svelte example
<script>
import { Drawer, Button, CloseButton, Label, Input, Textarea } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden5 = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden5 = false)}>Show drawer</Button>
</div>
<Drawer placement='left' transitionType="fly" {transitionParams} bind:hidden={hidden5} id='sidebar5'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hidden5 = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</div>
</Drawer>
```
<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Right drawer</Heading>
Use this example to show the drawer component on the right side of the page.
Set the `transitionParams` variable to new variables.
```svelte example
<script>
import { Drawer, Button, CloseButton } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden6 = true;
let transitionParamsRight = {
x: 320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden6 = false)}>Show drawer</Button>
</div>
<Drawer placement='right' transitionType="fly" transitionParams={transitionParamsRight} bind:hidden={hidden6} id='sidebar6'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hidden6 = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</div>
</Drawer>
```
<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Top drawer</Heading>
Use this example to show the drawer on the top side of the page.
```svelte example
<script>
import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden7 = true;
let transitionParamsTop = {
y: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden7 = false)}>Show drawer</Button>
</div>
<Drawer placement='top' width='w-full' transitionType="fly" transitionParams={transitionParamsTop} bind:hidden={hidden7} id='sidebar7'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg
class="mr-2 w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" /></svg
>Top drawer
</h5>
<CloseButton on:click={() => (hidden7 = true)} class='mb-4 dark:text-white'/>
</div>
<p class="max-w-lg mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <A
href="/" >limited-time sale</A> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<Button color="light" href="/">Learn more</Button>
<Button href="/" class='ml-2' >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</Drawer>
```
<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Bottom drawer</Heading>
Use this example to show the drawer on the bottom side of the page.
```svelte example
<script>
import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden8 = true;
let transitionParamsBottom = {
y: 320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden8 = false)}>Show drawer</Button>
</div>
<Drawer placement='bottom' width='w-full' transitionType="fly" transitionParams={transitionParamsBottom} bind:hidden={hidden8} id='sidebar8'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hidden8 = true)} class='mb-4 dark:text-white'/>
</div>
<p class="max-w-lg mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<Button color="light" href="/">Learn more</Button>
<Button href="/" class='ml-2'>Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</Drawer>
```
<Htwo label="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.
<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Enabled (default)</Heading>
Use this example to enable the backdrop element by default.
```svelte example
<script>
import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hiddenBackdropTrue = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hiddenBackdropTrue = false)}>Show drawer</Button>
</div>
<Drawer backdrop={true} transitionType="fly" {transitionParams} bind:hidden={hiddenBackdropTrue} id='sidebar1'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hiddenBackdropTrue = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</div>
</Drawer>
```
<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Disabled</Heading>
Use the `backdrop={false}` prop to disable the backdrop element when the drawer is shown.
```svelte example
<script>
import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hiddenBackdropFalse = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hiddenBackdropFalse = false)}>Show drawer</Button>
</div>
<Drawer backdrop={false} transitionType="fly" {transitionParams} bind:hidden={hiddenBackdropFalse} id='sidebar1'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hiddenBackdropFalse = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</div>
</Drawer>
```
<Htwo label='Position'/>
Use `leftOffset|rightOffset|topOffset|bottomOffset` prop to change the position of the drawer.
```svelte example
<script>
import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hidden9 = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden9 = false)}>Show drawer</Button>
</div>
<Drawer
leftOffset="top-16 h-screen left-0"
transitionType="fly"
{transitionParams}
bind:hidden={hidden9}
id="sidebar9">
<div class="flex items-center">
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg
class="w-5 h-5 mr-2"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" /></svg
>Info
</h5>
<CloseButton on:click={() => (hidden9 = true)} class="mb-4 dark:text-white" />
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/"
>Get access <svg
class="w-4 h-4 ml-1"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" /></svg
></Button>
</div>
</Drawer>
```
<Htwo label='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.
```svelte example
<script>
import { Drawer, Button, CloseButton } from 'flowbite-svelte';
import { sineIn } from 'svelte/easing';
let hidden10 = true;
let activateClickOutside = false
let backdrop = false
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hidden10 = false)}>Show drawer</Button>
</div>
<Drawer {activateClickOutside} {backdrop} transitionType="fly" {transitionParams} bind:hidden={hidden10} id='sidebar10'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hidden10 = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
</Drawer>
```
<Htwo label="Disabling only outside click" />
```svelte example
<script>
import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
import { sineIn } from 'svelte/easing';
let hiddenBackdropFalse = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
</script>
<div class="text-center">
<Button on:click={() => (hiddenBackdropFalse = false)}>Show drawer</Button>
</div>
<Drawer activateClickOutside={false} transitionType="fly" {transitionParams} bind:hidden={hiddenBackdropFalse} id='sidebar1'>
<div class='flex items-center'>
<h5
id="drawer-label"
class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
</h5>
<CloseButton on:click={() => (hiddenBackdropFalse = true)} class='mb-4 dark:text-white'/>
</div>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our <a
href="/"
class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div class="grid grid-cols-2 gap-4">
<Button color="light" href="/">Learn more</Button>
<Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</div>
</Drawer>
```
<Htwo label="Props" />
The component has the following props, type, and default values. See <A href="/pages/types">types
page</A> for type information.
<TableProp header={propHeader} {divClass} {theadClass}>
<TableDefaultRow {items} rowState='hover' />
</TableProp>
<Htwo label="References" />
<P>
<A href="https://flowbite.com/docs/components/drawer/" target="_blank" rel="noreferrer" class="link"
>Flowbite drawer</A
>
</P>