Tailwind Drawer allows to add interactive elements, like forms or logins, to a dialog that appears on top of your page content, focusing user attention.
Examples
Basic Usage
Click the below toggle button to reveal the default drawer example.
Transform an element into a Drawer in mobile mode by using the sm:[--kt-drawer-enable:false] responsive option class. Resize the screen to test the element in mobile mode.
Defines the CSS classes applied to the drawer backdrop.
data-kt-drawer-backdrop-static
boolean
false
Specifies whether the drawer backdrop is static, preventing drawer closure on click.
data-kt-drawer-keyboard
boolean
false
Controls whether the drawer can be closed by pressing the Escape key.
data-kt-drawer-disable-scroll
boolean
true
Specifies whether scrolling on the page is disabled when the drawer is open.
data-kt-drawer-persistent
boolean
false
Controls whether the drawer remains open after clicking outside of it.
data-kt-drawer-focus
boolean
true
Specifies whether an input defined with the data-kt-drawer-input-focus="true" attribute gains focus when the drawer opened.
data-kt-drawer-hidden-class
string
hidden
Defines the CSS class applied to hide the drawer.
Tailwind Modifiers
Custom modifiers to control the Drawer’s style and behavior with Tailwind classes.
Name
Description
kt-drawer-open:*
Applies specific styles to Tailwind Drawer and its children when its is shown.
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.
Manage and interact with KTDrawer instances using these static methods of KTDrawer JavaScript class.
Method
Description
init()
Automatically initializes KTDrawer object for all elements with the data-kt-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.
// Initialize all drawersKTDrawer.init()// Initialzie pending drawersKTDrawer.createInstances();// Get drawer objectconst drawerEl = document.querySelector('#my-drawer');const drawer = KTDrawer.getInstance(drawerEl);
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).
