overlays
Tailwind CSS Drawer (Offcanvas)
The Drawer component serves as a concealed off-canvas sidebar, ideal for navigation and displaying additional information with various styles and placements.
Class Name | Type | Description |
|---|---|---|
| overlay | Component | Targets overlay component. |
| drawer | Component | Base class for drawer container. |
| drawer-header | Modifier | Adds basic style drawer header. |
| drawer-title | Modifier | Adds basic style for drawer title. |
| drawer-close | Modifier | Adds basic style for drawer close button. |
| drawer-body | Modifier | Adds basic style for drawer body. |
| drawer-footer | Modifier | Adds basic style for drawer footer. |
| overlay-open:{tw-utility-class} | Modifier | Modifies tailwind classes when the overlay is open. |
| overlay-backdrop-open:{tw-utility-class} | Modifier | Defines classes will be applied to backdrop when the overlay is open. |
| overlay-layout-open{tw-utility-class}: | Modifier | Defines classes will be applied to any elements inside the body tag when the overlay is open. |
| open | Modifier | Added by JS to display drawer. |
| opened | Modifier | It shows state of drawer opened. |
| drawer-start | Responsive | Toggles drawer from start position. |
| drawer-end | Responsive | Toggles drawer from end position. |
| drawer-top | Responsive | Toggles drawer from top position. |
| drawer-bottom | Responsive | Toggles drawer from bottom position. |
Use the overlay class as the JavaScript target for addressing the overlay component, and utilize the drawer class for the drawer container. Use the drawer-start responsive class to toggle its position from the start. Apply the Tailwind CSS hidden class to keep the drawer container hidden until it is opened.
Add modifier class overlay-open: with transform class translate-x-0 to drawer container so that it shows drawer when opened.
Assign the value of the data-overlay attribute in any button to the id of the targeted overlay component, triggering the drawer to appear upon being clicked.
The drawer structure consists of the component class drawer, which serves as the container for the drawer content.
This drawer is further styled using modifier classes such as drawer-header, drawer-title, drawer-body, drawer-close and drawer-footer, which collectively define the entire structure of the drawer.
Utilize the provided example for default drawer component.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-example" data-overlay="#overlay-example">Open drawer</button>
<div id="overlay-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-example">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>Utilize the responsive classes drawer-{position} to position the drawer in various positions, where {position} can be replaced with start, top, end, middle-start or bottom.
Refer to the provided examples for positioning the drawer at the default start position, as well as the end, top, or bottom positions.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<!-- Drawer start -->
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-start-example" data-overlay="#overlay-start-example">Toggle start</button>
<div id="overlay-start-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-start-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-start-example">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Drawer end -->
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-end-example" data-overlay="#overlay-end-example">Toggle end</button>
<div id="overlay-end-example" class="overlay overlay-open:translate-x-0 drawer drawer-end hidden" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-end-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-end-example">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Drawer top -->
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-top-example" data-overlay="#overlay-top-example">Toggle top</button>
<div id="overlay-top-example" class="overlay drawer overlay-open:translate-y-0 drawer-top hidden" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-top-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-top-example">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Drawer bottom -->
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-bottom-example" data-overlay="#overlay-bottom-example">Toggle bottom</button>
<div id="overlay-bottom-example" class="overlay drawer overlay-open:translate-y-0 drawer-bottom hidden" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-bottom-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-bottom-example">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>Use TailwindCSS classes for responsive design, such as sm:, md:, lg:, xl:, and 2xl:, along with the responsive class drawer-{position} to switch the drawer position at specific breakpoints.
Utilize the provided example for a responsive drawer that moves to start position after lg: breakpoint.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-responsive-example" data-overlay="#overlay-responsive-example">Open drawer</button>
<div id="overlay-responsive-example" class="overlay overlay-open:translate-x-0 drawer drawer-end lg:drawer-start hidden" role="dialog" tabindex="-1" >
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-responsive-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-responsive-example">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>Utilize the provided example to implement drawer with form.
Drawer Title
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-form-example" data-overlay="#overlay-form-example">Toggle form</button>
<div id="overlay-form-example" class="overlay overlay-open:translate-x-0 drawer drawer-end hidden justify-start" role="dialog" tabindex="-1" >
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-form-example">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<form>
<div class="drawer-body justify-start">
<label class="form-control mb-4">
<div class="label">
<span class="label-text">Full Name</span>
</div>
<input type="text" placeholder="John Doe" class="input" />
</label>
<label class="form-control mb-4">
<div class="label">
<span class="label-text">Email</span>
</div>
<input type="email" placeholder="john.doe@example.com" class="input" />
</label>
<label class="form-control mb-4">
<div class="label">
<span class="label-text">Contact</span>
</div>
<input type="text" placeholder="+91 (106) 234-34-85" class="input" />
</label>
<label class="form-control mb-4">
<div class="label">
<span class="label-text">Company</span>
</div>
<input type="text" placeholder="ABC Technologies Ltd" class="input" />
</label>
<label class="form-control mb-4">
<div class="label">
<span class="label-text">Country</span>
</div>
<select class="select">
<option disabled selected>Select Country</option>
<option>USA</option>
<option>India</option>
<option>Canada</option>
<option>Japan</option>
<option>Russia</option>
</select>
</label>
<label class="form-control mb-4">
<div class="label">
<span class="label-text">User Role</span>
</div>
<select class="select">
<option disabled selected>Select Role</option>
<option>Subscriber</option>
<option>Maintainer</option>
<option>Editor</option>
<option>Author</option>
<option>Admin</option>
</select>
</label>
<label class="form-control mb-0.5">
<div class="label">
<span class="label-text">Select Plan</span>
</div>
<select class="select">
<option disabled selected>Select Plan</option>
<option>Basic</option>
<option>Enterprise</option>
<option>Company</option>
<option>Team</option>
</select>
</label>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-form-example">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>Utilize the provided example to implement drawer with navigation. We have used collapse for collapsible item.
Refer collapse plugin for more details.
Menu
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-navigation-example" data-overlay="#overlay-navigation-example" >
Drawer with navigation
</button>
<div id="overlay-navigation-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden max-w-72" tabindex="-1" style="inset-inline-end: calc(100vw - 18rem);" >
<div class="drawer-header">
<h3 class="drawer-title">Menu</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-navigation-example" >
<span class="icon-[tabler--x] size-4"></span>
</button>
</div>
<div class="drawer-body justify-start pb-6">
<ul class="space-y-0.5">
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--home] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Dashboard</a>
</li>
<li class="collapse-toggle btn btn-text collapse-open:bg-base-content/10 text-base-content/80 collapse-open:text-base-content group w-full justify-start p-2" id="menu-item-1" data-collapse="#menu-sub-item-1" >
<span class="icon-[tabler--layout-navbar] group-hover:text-base-content"></span>
<span class="group-hover:text-base-content">Layouts</span>
<span class="icon-[tabler--chevron-right] collapse-open:rotate-90 group-hover:text-base-content ms-auto size-4 rtl:rotate-180" ></span>
</li>
<div id="menu-sub-item-1" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="menu-item-1" >
<ul>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Content Navbar</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Horizontal</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Without Menu</a>
</li>
</ul>
</div>
<li class="collapse-toggle btn btn-text collapse-open:bg-base-content/10 text-base-content/80 collapse-open:text-base-content group w-full justify-start p-2" id="menu-item-2" aria-expanded="false" aria-controls="menu-sub-item-2" data-collapse="#menu-sub-item-2" >
<span class="icon-[tabler--box-multiple] group-hover:text-base-content"></span>
<span class="group-hover:text-base-content">Front Pages</span>
<span class="icon-[tabler--chevron-right] collapse-open:rotate-90 group-hover:text-base-content ms-auto size-4 rtl:rotate-180" ></span>
</li>
<div id="menu-sub-item-2" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="menu-item-2" >
<ul>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Landing Page</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Pricing Page</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Checkout Page</a>
</li>
</ul>
</div>
<div class="divider text-base-content/50 py-6 after:border-0">Apps & Pages</div>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--message-chatbot] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Chat</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--mail] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Email</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--calendar] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Calendar</a>
</li>
<li class="collapse-toggle btn btn-text collapse-open:bg-base-content/10 text-base-content/80 collapse-open:text-base-content group w-full justify-start p-2" id="menu-item-3" aria-expanded="false" aria-controls="menu-sub-item-3" data-collapse="#menu-sub-item-3" >
<span class="icon-[tabler--shopping-cart] group-hover:text-base-content"></span>
<span class="group-hover:text-base-content">Ecommerce</span>
<span class="icon-[tabler--chevron-right] collapse-open:rotate-90 group-hover:text-base-content ms-auto size-4 rtl:rotate-180" ></span>
</li>
<div id="menu-sub-item-3" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="menu-item-3" >
<ul>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Products</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Categories</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Shipping & Delivery</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--point] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Location</a>
</li>
</ul>
</div>
<div class="divider text-base-content/50 py-6 after:border-0">Account</div>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--login-2] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Log In</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--file-pencil] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Sign Up</a>
</li>
<div class="divider text-base-content/50 py-6 after:border-0">Miscellaneous</div>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--users-group] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Support</a>
</li>
<li class="btn btn-text text-base-content/80 group w-full justify-start p-2">
<span class="icon-[tabler--files] group-hover:text-base-content"></span>
<a href="javascript:void(0);" class="group-hover:text-base-content">Documentation</a>
</li>
</ul>
</div>
</div>Utilize the [--body-scroll:{boolean}] option to control the scrolling behavior of the layout beneath the overlay component. When set to true, it enables scrolling of the body, whereas when set to false, it disables body scrolling. By default, its value is false.
Set the [--overlay-backdrop:{string}] option, where {string} can be static, null or false. When set to false it creates drawer without backdrop. By default, its value is null.
Review the provided example for a drawer with body scroll enabled and without a backdrop.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-body-scrolling" data-overlay="#overlay-body-scrolling">
Body scrolling (no backdrop)
</button>
<div id="overlay-body-scrolling" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden [--body-scroll:true] [--overlay-backdrop:false]" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-body-scrolling">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-body-scrolling">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>Review the provided example for a drawer with body scroll enabled and with a backdrop.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-body-scrolling-with-backdrop" data-overlay="#overlay-body-scrolling-with-backdrop">
Body scrolling (with backdrop)
</button>
<div id="overlay-body-scrolling-with-backdrop" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden [--body-scroll:true]" role="dialog" tabindex="-1" >
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-body-scrolling-with-backdrop">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-body-scrolling-with-backdrop">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>Review the provided example for a drawer with body scroll disabled and with a backdrop.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-backdrop-without-body-scrolling" data-overlay="#overlay-backdrop-without-body-scrolling">
Backdrop (without bodyscroll)
</button>
<div id="overlay-backdrop-without-body-scrolling" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1" >
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-backdrop-without-body-scrolling">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-backdrop-without-body-scrolling">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>For customizing the backdrop, there are two methods available:
The first method involves using the backdrop modifier class overlay-backdrop-open:{custom-color}, where you can specify any color for the backdrop.
The second method entails assigning an object value to the data-overlay-options attribute in the trigger button. Within this object, set the backdropClasses key to transition duration fixed inset-0 bg-success/70 overlay-backdrop to replace the existing backdrop classes with these customized ones.
Examine the provided examples demonstrating both methods for setting the custom backdrop in drawer.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Drawer Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-custom-backdrop" data-overlay="#overlay-custom-backdrop">Open drawer</button>
<div id="overlay-custom-backdrop" class="overlay overlay-open:translate-x-0 drawer drawer-start overlay-backdrop-open:bg-warning/40 hidden" role="dialog" tabindex="-1" >
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-custom-backdrop">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-custom-backdrop">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-custom-backdrop-2" data-overlay="#overlay-custom-backdrop-2" data-overlay-options='{ "backdropClasses": "transition duration fixed inset-0 bg-accent/40 overlay-backdrop" }'> Open drawer</button>
<div id="overlay-custom-backdrop-2" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
<div class="drawer-header">
<h3 class="drawer-title">Drawer Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-custom-backdrop-2">
<span class="icon-[tabler--x] size-5"></span>
</button>
</div>
<div class="drawer-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
<div class="drawer-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-custom-backdrop-2">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Please refer to the Modal component documentation for JavaScript behavior in overlays, which is also applicable to drawers since both modals and drawers utilize the overlay plugin.
