Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update 
How to programmatically toggle kt_modal and kt_drawer?
I am currently using Vue 3 version of Mertronic UI. Here, the modals and side drawers (MessengerDrawer/ActivityDrawer/...) uses classes to toggle like this:
<div
id="kt_drawer_chat"
class="bg-body"
data-kt-drawer="true"
data-kt-drawer-name="chat"
data-kt-drawer-activate="true"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:"300px", "md": "500px"}"
data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_drawer_chat_toggle"
data-kt-drawer-close="#kt_drawer_chat_close"
>How can I toggle them programmatically?
Replies (1)
Hi Apar,
Thank you for reaching out to us.
You can get a drawer instance in your component and then open it using show function as shown below.
import { DrawerComponent } from "@/assets/ts/components";
const drawer = DrawerComponent.getInstance("your_drawer_id");
drawer?.show();Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
