Overview
Bootstrap Drawer is an exclusive plugin of Metronic that provides a simple, smooth and lightweight option for hidden sidebars that are most used for navigations, shopping carts and a whole lot more.
Usage
Bootstrap Drawer's global style and scripts bundles and are globally included in all pages.
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
Initialization
- Bootstrap Drawer's Javascript is globally initialized and added into our script bundle.
- To initialize it, the drawer view component needs to be added within the page with a button trigger to toggle it.
- Bootstrap Drawer instances can also be created programmatically. See below for more info.
Basic
There are 2 parts when adding in a drawer component. There's the trigger and the view component. The trigger can be anything with a specific
The view component will then have a few HTML attributes that will set it's configuration options. The key attributes are:
idwhich needs to be defined in the view component.
The view component will then have a few HTML attributes that will set it's configuration options. The key attributes are:
-
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-->
Advanced
Bootstrap Drawer component can be easily configured by adding additional HTML attributes to the view component. For example, adding
Adding
Click herefor more info on the options.
data-kt-drawer-directionwill indicate which side the drawer will slide out from (
startfor left and
endfor right).
Adding
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.
Click herefor more info on the options.
<!--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-->
Adhoc Dismiss
Add a button or link within Bootstrap Drawer view component with the HTML attributes
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-->
Permanent
Use
data-kt-drawer-permanent="true"option to prevent drawer from closing on overlay click.
<!--begin::Drawer-->
<div
id="kt_drawer_example_permanent"
class="bg-white"
data-kt-drawer="true"
data-kt-drawer-activate="true"
data-kt-drawer-toggle="#kt_drawer_example_permanent_toggle"
data-kt-drawer-close="#kt_drawer_example_permanent_close"
data-kt-drawer-overlay="true"
data-kt-drawer-permanent="true"
data-kt-drawer-width="{default:'300px', 'md': '500px'}"
>
<!--begin::Card-->
<div class="card rounded-0 w-100">
<!--begin::Card header-->
<div class="card-header pe-5">
<!--begin::Title-->
<div class="card-title">
Permanent Drawer
</div>
<!--end::Title-->
<!--begin::Card toolbar-->
<div class="card-toolbar">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_example_permanent_close">
<span class="svg-icon fs-1">
...
</span>
</div>
<!--end::Close-->
</div>
<!--end::Card toolbar-->
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body hover-scroll-overlay-y">
...
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end::Drawer-->
Permanent Drawer
External Toggle
Bootstrap Drawers can also be toggled without binding the button
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-->
Markup Reference
Scroll uses both CSS and HTML attributes to define the scroll configuration. Here are the references for each below
HTML Attribute references
| 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
trueand
falsevalues. Default value is set to
true.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 than
mdbreakpoint 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
trueand
falsevalues. |
data-kt-drawer-escape
|
optional
|
Closes the active drawer on escape key press. Accepts
trueand
falsevalues. Default value is
false |
data-kt-drawer-permanent
|
optional
|
Prevents drawer from closing on overlay click Accepts
trueand
falsevalues. Default value is set to
false. |
data-kt-drawer-width
|
optional
|
Specifies the drawer view component's width in either a
pxor
%value. For example:
400pxor
25%This is also compatible with Bootstrap's standard breakpoint sizing (eg:
For example:
sm, md, lg, xl) with similar
pxor
%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 has
500pxwidth on screens larger than
mdand
300pxfor every other screen size.
|
data-kt-drawer-direction
|
optional
|
Defines the starting direction for the drawer view component. Accepts
startfor left and
endfor right values. Default value is set to
end. |
Please note that a drawer view component is a simple wrapper element that may contain all other components or elements within it. All HTML attributes should be added into the main wrapping element only.
Methods
All Bootstrap Drawer components are initialized automatically, however the following are the Bootstrap Drawer's functionality methods for more control.
| 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 and
selectoroptional 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. Option
overlayreplicates
data-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
trueor
false.
|
update()
|
Forces the drawer component to update with any modifications done.
|
goElement()
|
Returns the selected drawer instance.
|
destroy()
|
Removes the component instance from element.
|
Events
Below are few events for hooking into the Bootstrap Drawer functionality.
| 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.
|
2024©
Keenthemes
