<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
												idwhich needs to be defined in the view component.
										data-kt-drawer
											data-kt-drawer-activate
											data-kt-drawer-toggle
											data-kt-drawer-close
											data-kt-drawer-width
											
<!--begin::Trigger button-->
<button id="kt_drawer_example_basic_button" class="btn btn-primary">Toggle basic drawer</button>
<!--end::Trigger button-->
<!--begin::View component-->
<div
    id="kt_drawer_example_basic"
    class="bg-white"
    data-kt-drawer="true"
    data-kt-drawer-activate="true"
    data-kt-drawer-toggle="#kt_drawer_example_basic_button"
    data-kt-drawer-close="#kt_drawer_example_basic_close"
    data-kt-drawer-width="500px"
>
    ...
</div>
<!--end::View component-->
												data-kt-drawer-directionwill indicate which side the drawer will slide out from (
										startfor left and
										endfor right).
										data-kt-drawer-widthwill set the drawer view component's width and it's also very responsive and uses Bootstrap's default breakpoints to switch widths on certain screen sizes. For example:
										{default:'300px', 'md': '500px'}indicates that the drawer view component has
										500pxwidth on screens larger than
										mdand
										300pxfor every other screen size.
										
<!--begin::Trigger button-->
<button id="kt_drawer_example_basic_button" class="btn btn-primary">Toggle advanced drawer</button>
<!--end::Trigger button-->
<!--begin::View component-->
<div
    id="kt_drawer_example_advanced"
    class="bg-white"
    data-kt-drawer="true"
    data-kt-drawer-activate="true"
    data-kt-drawer-toggle="#kt_drawer_example_advanced_button"
    data-kt-drawer-close="#kt_drawer_example_advanced_close"
    data-kt-drawer-name="docs"
    data-kt-drawer-overlay="true"
    data-kt-drawer-width="{default:'300px', 'md': '500px'}"
    data-kt-drawer-direction="start"
>
    ...
</div>
<!--end::View component-->
												data-kt-drawer-dismiss="true"to close the current drawer.
<!--begin::Trigger button-->
<button id="kt_drawer_example_dismiss_button" class="btn btn-primary">Toggle drawer with dismiss button</button>
<!--end::Trigger button-->
<!--begin::View component-->
<div
    id="kt_drawer_example_dismiss"
    class="bg-white"
    data-kt-drawer="true"
    data-kt-drawer-activate="true"
    data-kt-drawer-toggle="#kt_drawer_example_dismiss_button"
    data-kt-drawer-close="#kt_drawer_example_dismiss_close"
    data-kt-drawer-overlay="true"
    data-kt-drawer-width="{default:'300px', 'md': '500px'}"
>
    ...
    <!--begin::Dismiss button-->
    <button class="btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss drawer</button>
    <!--end::Dismiss button-->
    ...
</div>
<!--end::View component-->
												idwith the drawer view component by adding
										data-kt-drawer-show="true"and
										data-kt-drawer-targetwith the drawer view component
										id.
<!--begin::Trigger button-->
<button class="btn btn-primary me-3" data-kt-drawer-show="true" data-kt-drawer-target="#kt_drawer_example_basic">Toggle basic drawer</button>
<button class="btn btn-primary" data-kt-drawer-show="true" data-kt-drawer-target="#kt_drawer_example_advanced">Toggle advanced drawer</button>
<!--end::Trigger button-->
												| Name | Type | Description | 
|---|---|---|
| data-kt-drawer | mandatory | Defines the element as a drawer view component. | 
| data-kt-drawer-activate | optional | Enables the drawer view component. Accepts
															 trueandfalsevalues. Default value is set totrue.This is also compatible with Bootstrap's standard breakpoint sizing
															For example: eg: sm, md, lg, xl. For responsive options, this attribute value must be written as a JSON string to specify values for multiple responsive breakpoints.{default: false, md: true}indicates that the drawer is activated only when width on screens larger thanmdbreakpoint size. | 
| data-kt-drawer-toggle | optional | Defines the toggle button id. | 
| data-kt-drawer-close | optional | Defines the close button idwithin the drawer view component. | 
| data-kt-drawer-name | mandatory | Defines the drawer view component's name for identification and used to append a special attribute to Body element to indicate the drawer's shown state. | 
| data-kt-drawer-overlay | optional | Toggles the drawer view component as an overlay element or not. Accepts trueandfalsevalues. | 
| data-kt-drawer-width | optional | Specifies the drawer view component's width in either a
															 pxor%value. For example:400pxor25%This is also compatible with Bootstrap's standard breakpoint sizing (eg:
															For example: sm, md, lg, xl) with similarpxor%values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.{default:'300px', 'md': '500px'}indicates that the drawer view component has500pxwidth on screens larger thanmdand300pxfor every other screen size. | 
| data-kt-drawer-direction | optional | Defines the starting direction for the drawer view component. Accepts startfor left andendfor right values. Default value is set toend. | 
| Name | Description | 
|---|---|
| Static Methods | |
| createInstances(DOMString selector) | Initializes Drawer instances by selector. Default value of selectoris[data-kt-drawer="true"]. This method can be used to initialize dynamicly populated Drawer instances(e.g: after Ajax request).
 | 
| getInstance(DOMElement element) | Get the Drawer instance created 
 | 
| hideAll(DOMElement skip, DOMString selector) | Hides all drawer elements that match the selector and skips one if provided. skipis optional andselectoroptional with default value[data-kt-drawer="true"].
 | 
| updateAll(DOMString selector) | Updates all drawer elements that match the selector. selectoroptional with default value[data-kt-drawer="true"].
 | 
| Public Methods | |
| KTDrawer(DOMElement element, Object options) | Constructs a new instance of KTDrawerclass and initializes a Drawer control:
Remove
																 data-kt-drawer="true"attribute to avoid lazy initialization. Optionoverlayreplicatesdata-kt-drawer-overlayoption functionaliy as described above. | 
| toggle() | Toggle the drawer view component's state. 
 | 
| show() | Show/open the drawer view component if the it's current closed. Does nothing if it's already opened. 
 | 
| hide() | Hide/close the drawer view component if the it's current opened. Does nothing if it's already closed. 
 | 
| isShown() | Return the drawer view component's display state. Returns trueorfalse.
 | 
| update() | Forces the drawer component to update with any modifications done. 
 | 
| goElement() | Returns the selected drawer instance. 
 | 
| destroy() | Removes the component instance from element. 
 | 
| Event Type | Description | 
|---|---|
| kt.drawer.toggle | This event fires on when the drawer is about to get toggled. 
 | 
| kt.drawer.toggled | This event fires on when the drawer is done toggling. 
 | 
| kt.drawer.hide | This event fires on when the drawer starts to hide. 
 | 
| kt.drawer.after.hidden | This event fires on when the drawer is completely hidden. 
 | 
| kt.drawer.show | This event fires on when the drawer starts to show. 
 | 
| kt.drawer.shown | This event fires on when the drawer is completely shown. 
 | 
| trigger(drawer, event) | Triggers a specific event to the selected drawer. 
 |