Tailwind Drawer

Docs

Tailwind Drawer

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.

<div>
  <button class="kt-btn" data-kt-drawer-toggle="#drawer">Show Drawer</button>
  <div
    class="kt-drawer kt-drawer-start hidden w-56"
    data-kt-drawer="true"
    id="drawer"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

Directions

The following examples illustrate the various opening directions of the Tailwind Drawer.

<div class="flex items-center justify-center gap-4 p-16">
  <button class="kt-btn" data-kt-drawer-toggle="#drawer_1">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-right"
      aria-hidden="true"
    >
      <path d="M18 8L22 12L18 16"></path>
      <path d="M2 12H22"></path>
    </svg>
    Start</button
  ><button class="kt-btn" data-kt-drawer-toggle="#drawer_2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-up"
      aria-hidden="true"
    >
      <path d="M8 6L12 2L16 6"></path>
      <path d="M12 2V22"></path>
    </svg>
    Top</button
  ><button class="kt-btn" data-kt-drawer-toggle="#drawer_3">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-down"
      aria-hidden="true"
    >
      <path d="M8 18L12 22L16 18"></path>
      <path d="M12 2V22"></path>
    </svg>
    Bottom</button
  ><button class="kt-btn" data-kt-drawer-toggle="#drawer_4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-left"
      aria-hidden="true"
    >
      <path d="M6 8L2 12L6 16"></path>
      <path d="M2 12H22"></path>
    </svg>
    End
  </button>
  <div
    class="kt-drawer kt-drawer-start hidden w-56"
    data-kt-drawer="true"
    id="drawer_1"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
  <div
    class="kt-drawer kt-drawer-top hidden h-80"
    data-kt-drawer="true"
    id="drawer_2"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
  <div
    class="kt-drawer kt-drawer-bottom hidden h-80"
    data-kt-drawer="true"
    id="drawer_3"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
  <div
    class="kt-drawer kt-drawer-end hidden w-56"
    data-kt-drawer="true"
    id="drawer_4"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

Responsive

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.

<div>
  <button class="kt-btn sm:hidden" data-kt-drawer-toggle="#drawer">
    Show mobile drawer
  </button>
  <div
    class="w-72 sm:flex sm:flex-col sm:border sm:border-border sm:rounded-lg sm:[--kt-drawer-enable:false]"
    data-kt-drawer="true"
    data-kt-drawer-class="kt-drawer kt-drawer-start hidden"
    id="drawer"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
    </div>
    <div class="kt-drawer-content kt-scrollable">
      <div class="rounded-lg bg-muted w-full grow h-56"></div>
    </div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

Scrollable

Apply the kt-scrollable overflow-y-auto classes to the drawer body element to enable vertical scrolling within it using Tailwind Scrollable component.

<div>
  <button class="kt-btn" data-kt-drawer-toggle="#drawer">Show Drawer</button>
  <div
    class="kt-drawer kt-drawer-start hidden w-60"
    data-kt-drawer="true"
    id="drawer"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">
      <div class="rounded-lg bg-muted w-full grow h-[800px]"></div>
    </div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

Static Backdrop

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

<div>
  <button class="kt-btn" data-kt-drawer-toggle="#drawer">Show Drawer</button>
  <div
    class="kt-drawer kt-drawer-start hidden w-60"
    data-kt-drawer="true"
    data-kt-drawer-backdrop-static="true"
    id="drawer"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">
      <div class="rounded-lg bg-muted w-full grow h-[800px]"></div>
    </div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

No Backdrop

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

<div>
  <button class="kt-btn" data-kt-drawer-toggle="#drawer">Show Drawer</button>
  <div
    class="kt-drawer kt-drawer-start hidden w-56"
    data-kt-drawer="true"
    data-kt-drawer-backdrop="false"
    id="drawer"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

Toggle Drawers

Switch between multiple drawers for different actions.

<div>
  <button class="kt-btn" data-kt-drawer-toggle="#drawer_one">
    Show drawer
  </button>
  <div
    class="kt-drawer kt-drawer-start hidden w-56"
    data-kt-drawer="true"
    id="drawer_one"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">
      <button class="kt-btn" data-kt-drawer-toggle="#drawer_two">
        Show another drawer
      </button>
    </div>
  </div>
  <div
    class="kt-drawer kt-drawer-end hidden w-56"
    data-kt-drawer="true"
    id="drawer_two"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">
      <button class="kt-btn" data-kt-drawer-toggle="#drawer_one">
        Show first drawer
      </button>
    </div>
  </div>
</div>

Page Scroll

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

<div class="h-[1000px]">
  <button class="kt-btn" data-kt-drawer-toggle="#drawer">Show Drawer</button>
  <div
    class="kt-drawer kt-drawer-start hidden w-56"
    data-kt-drawer="true"
    data-kt-drawer-disable-scroll="false"
    id="drawer"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">Footer</div>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the Drawer component during auto initialization.

Option	Type	Default	Description
`data-kt-drawer-zindex`	~~string~~	~~auto~~	Specifies the z-index of the drawer.
`data-kt-drawer-backdrop`	~~boolean~~	~~true~~	Controls whether a backdrop is displayed behind the drawer.
`data-kt-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-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.

const drawerEl = document.querySelector('#my-drawer');
const drawer = KTDrawer.getInstance(drawerEl);
 
drawer.show();
drawer.hide();
drawer.toggle();

To initialize Tailwind Drawer with JavaScript, use data-Drawer="false" attribute instead. This prevents automatic initialization on page load.

Utilities

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 drawers
KTDrawer.init()
 
// Initialzie pending drawers
KTDrawer.createInstances();
 
// Get drawer object
const 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).

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');
});

PreviouseDismiss NextDropdown

On This Page

Examples
Component API