Preview Purchase
Base Components

Tailwind CSS Drawer

Tailwind CSS Drawer allows to add interactive elements, like forms or logins, to a dialog that appears on top of your page content, focusing user attention.

Default Drawer

Click the below toggle button to reveal the default drawer example.
Preview HTML

Drawer Title

Drawer content.

Directions

Utilize the .drawer-start , .drawer-end , .drawer-top , and .drawer-bottom classes to set the opening direction of the Tailwind CSS Drawer.
Preview HTML

Drawer Title

Drawer content.

Drawer Title

Drawer content.

Drawer Title

Drawer content.

Drawer Title

Drawer content.

Responsive

Transform an element into a Drawer in mobile mode by using the data-drawer-enable="true|lg:false" parameter. Resize the screen to test the element in mobile mode.
Preview HTML

Scrollable

Apply the .scrollable-y class to the drawer body element to enable vertical scrolling within it using Tailwind CSS Scrollable component.
Preview HTML

Drawer Title

Modal components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Modal components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Modal components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Modal components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Modal components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Modal components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage.

Static Backdrop

Use the attribute data-drawer-backdrop-static="true" to display a drawer with a static backdropn that prevents drawer closure on click on it.
Preview HTML

Drawer Title

Drawer content.

No Backdrop

Use the attribute data-drawer-backdrop="false" to display a drawer without the backdrop layer.
Preview HTML

Drawer Title

Drawer content.

Toggle Drawers

Switch between multiple drawers for different actions.
Preview HTML

Drawer Title

Drawer Title

Page Scroll

Apply the data-drawer-disable-scroll="false" attribute to allow the page scrollbar to remain enabled.
Preview HTML

Drawer Title

Drawer content.

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Drawer component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/drawer/drawer.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Drawer component.
src/core/plugins/components/drawer.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Drawer component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Drawer component. 
				
					<button class="btn btn-primary" data-drawer-toggle="#drawer_1">
 Show Drawer
</button>
<div class="drawer drawer-start flex flex-col max-w-[90%] w-[300px]" data-drawer="true" id="drawer_1">
 <div class="flex items-center justify-between p-5 border-b">
  <h3 class="text-base font-semibold text-gray-900">
   Drawer Title
  </h3>
  <button class="btn btn-xs btn-icon btn-icon-xl btn-light" data-drawer-dismiss="true">
   <i class="ki-outline ki-cross">
   </i>
  </button>
 </div>
 <div class="p-5">
  Drawer content.
 </div>
</div>

Attributes

The following HTML attributes are utilized by Tailwind CSS Drawer component to control its JavaScript behavior.
HTML Attribute Description
data-drawer-dismiss="true" Identifies an element that, upon click, hides the drawer.
data-drawer-input-focus="true" Specifies an input that gains focus when the drawer opened.

Classes

This table outlines the custom CSS classes utilized for styling the default components of the Tailwind CSS Drawer.
Class Description
drawer Base class for the drawer component. It wraps the entire drawer content and provides basic styling and behavior.
drawer-start Opens the drawer from the left, sliding the drawer into view.
drawer-end Opens the drawer from the right, sliding the drawer into view.
drawer-top Opens the drawer from the top, sliding the drawer into view.
drawer-bottom Opens the drawer from the bottom, sliding the drawer into view.
open Applied to a specific drawer to indicate that it should be displayed or opened. Typically triggers the drawer to become visible.
hidden Sets a specific drawer to be hidden initially. Can be used to hide the drawer until it needs to be displayed.

Data Attribute Initialization

Auto-initialize all KTDrawer instances on page load by adding the data-drawer="true" attribute to your drawer elements. This triggers on the fly initialization by the KTDrawer JavaScript component. 
				
					<button class="btn btn-primary" data-drawer-toggle="#drawer_1">
 Show Drawer
</button>
<div class="drawer drawer-start flex flex-col max-w-[90%] w-[300px]" data-drawer="true" id="drawer_1">
 <div class="flex items-center justify-between p-5 border-b">
  <h3 class="text-base font-semibold text-gray-900">
   Drawer Title
  </h3>
  <button class="btn btn-xs btn-icon btn-icon-xl btn-light" data-drawer-dismiss="true">
   <i class="ki-outline ki-cross">
   </i>
  </button>
 </div>
 <div class="p-5">
  Drawer content.
 </div>
</div>
These attributes allow you to set options for the KTDrawer component during initialization. The values you provide as strings are automatically converted to the appropriate KTDrawer Options .
HTML Attribute Type Default Description
data-drawer boolean true Used to auto-initialize KTDrawer instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
data-drawer-zindex string auto Specifies the z-index of the drawer.
data-drawer-backdrop boolean true Controls whether a backdrop is displayed behind the drawer.
data-drawer-backdrop-class string transition-all duration-300 fixed inset-0 bg-gray-900 opacity-25 Defines the CSS classes applied to the drawer backdrop.
data-drawer-backdrop-static boolean false Specifies whether the drawer backdrop is static, preventing drawer closure on click.
data-drawer-keyboard boolean false Controls whether the drawer can be closed by pressing the Escape key.
data-drawer-disable-scroll boolean true Specifies whether scrolling on the page is disabled when the drawer is open.
data-drawer-persistent boolean false Controls whether the drawer remains open after clicking outside of it.
data-drawer-focus boolean true Specifies whether an input defined with the data-drawer-input-focus="true" attribute gains focus when the drawer opened.
data-drawer-hidden-class string hidden Defines the CSS class applied to hide the drawer.

JavaScript Initialization

To initialize a new drawer component, pass the corresponding DOM element and configuration options to the KTDrawer class constructor.
JavaScript HTML 
				
					// Drawer toggle element
const drawerEl = document.querySelector('#my_drawer');

// Configuration options(optional)
const options = {
	backdropClass: 'transition-all duration-300 fixed inset-0 bg-gray-900 opacity-25',
	backdrop: true,
	disableScroll: true,
	persistent: true
};

// Initialize object
const drawer = new KTDrawer(drawerEl, options);

To initialize the drawer via JavaScript, use data-drawer="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Drawer instances, using the KTDrawer JavaScript component.
Option Type Default Description
zindex string auto Specifies the z-index of the drawer.
backdrop boolean true Controls whether a backdrop is displayed behind the drawer.
backdropClass string transition-all duration-300 fixed inset-0 bg-gray-900 opacity-25 Defines the CSS classes applied to the drawer backdrop.
backdropStatic boolean false Specifies whether the drawer backdrop is static, preventing drawer closure on click.
keyboard boolean false Controls whether the drawer can be closed by pressing the Escape key.
disableScroll boolean true Specifies whether scrolling on the page is disabled when the drawer is open.
persistent boolean false Controls whether the drawer remains open after clicking outside of it.
focus boolean true Specifies whether an input defined with the input-focus="true" attribute gains focus when the drawer opened.
hiddenClass string hidden Defines the CSS class applied to hide the drawer.

Utilities

Manage and interact with KTDrawer instances using these static methods of KTDrawer class.
Method Description
init() Automatically initializes KTDrawer object for all elements with the data-drawer="true" attribute on page load.
createInstances() Allows to create KTDrawer instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTDrawer object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTDrawer object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all drawers
KTDrawer.init()

// Initialzie pending drawers
KTDrawer.createInstances();

// Get drawer object
const drawerEl = document.querySelector('#my_drawer');
const drawer = KTDrawer.getInstance(drawerEl);

Methods

Use KTDrawer component's API methods to programmatically control its behavior.
Method Description
new KTDrawer(element, options) Creates an object instance of KTDrawer class for the given DOM element and configuration options .
show() Shows a drawer element.
hide() Hides a drawer element.
toggle() Toggles a drawer state to shown or hidden.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTDrawer instance.
getElement() Retrieves the DOM element linked to a specific KTDrawer instance.
on(eventName, handler) Allows attaching event listeners to the KTDrawer custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTDrawer. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId) Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose() Removes the KTDrawer instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const drawerEl = document.querySelector('#my_drawer');
const drawer = KTDrawer.getInstance(drawerEl);

drawer.show();
drawer.hide();
drawer.toggle();

Events

KTDrawer custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
Event Description
show Triggered immediately before a drawer element is shown.
shown Triggered immediately after a drawer element is shown.
hide Triggered immediately before a drawer element is hidden.
hidden Triggered immediately after a drawer element is hidden.
toggle Triggered immediately before a drawer element is toggled(shown/hidden). 
				
					const drawerEl = document.querySelector('#my_drawer');
const drawer = KTDrawer.getInstance(drawerEl);

drawer.on('show', () => {
	console.log('show event');
});

drawer.on('shown', () => {
	console.log('shown event');
});

drawer.on('hide', (detail) => {
	detail.cancel = true;
	console.log('hide action canceled');
});
Previous Dismiss Next Dropdown