Documentation v8.0.25

Preview Purchase

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 Example

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 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

Click herefor more info on the options.

<!--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-->

Example Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.

Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.

Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.

Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.

Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.

Advanced Example

Bootstrap Drawer component can be easily configured by adding additional HTML attributes to the view component. For example, adding 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-->

Example Advanced

Adhoc Dismiss Button Example

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-->

Example Dismiss Button

External Toggle Example

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 `true`and `false`values. Default value is set to `true`. This is also compatible with Bootstrap's standard breakpoint sizing `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. For example: `{default: false, md: true}`indicates that the drawer is activated only when width on screens larger than `md`breakpoint size.
`data-kt-drawer-toggle`	`optional`	Defines the toggle button `id`.
`data-kt-drawer-close`	`optional`	Defines the close button `id`within 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 `true`and `false`values.
`data-kt-drawer-width`	`optional`	Specifies the drawer view component's width in either a `px`or `%`value. For example: `400px`or `25%` This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with similar `px`or `%`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'300px', 'md': '500px'}`indicates that the drawer view component has `500px`width on screens larger than `md`and `300px`for every other screen size.
`data-kt-drawer-direction`	`optional`	Defines the starting direction for the drawer view component. Accepts `start`for left and `end`for 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 `selector`is `[data-kt-drawer="true"]`. This method can be used to initialize dynamicly populated Drawer instances(e.g: after Ajax request). `KTDrawer.createInstances();`
`getInstance(DOMElement element)`	Get the Drawer instance created `var drawerElement = document.querySelector("#kt_drawer_example_1"); var drawer = KTDrawer.getInstance(drawerElement);`
`hideAll(DOMElement skip, DOMString selector)`	Hides all drawer elements that match the selector and skips one if provided. `skip`is optional and `selector`optional with default value `[data-kt-drawer="true"]`. `KTDrawer.hideAll();`
`updateAll(DOMString selector)`	Updates all drawer elements that match the selector. `selector`optional with default value `[data-kt-drawer="true"]`. `KTDrawer.updateAll();`
Public Methods
`KTDrawer(DOMElement element, Object options)`	Constructs a new instance of `KTDrawer`class and initializes a Drawer control: `var scrollElement = document.querySelector("#kt_scroll_control"); var scroll = new KTDrawer(scrollElement, {overlay: true});` Remove `data-kt-drawer="true"`attribute to avoid lazy initialization. Option `overlay`replicates `data-kt-drawer-overlay`option functionaliy as described above.
`toggle()`	Toggle the drawer view component's state. `drawer.toggle();`
`show()`	Show/open the drawer view component if the it's current closed. Does nothing if it's already opened. `drawer.show();`
`hide()`	Hide/close the drawer view component if the it's current opened. Does nothing if it's already closed. `drawer.hide();`
`isShown()`	Return the drawer view component's display state. Returns `true`or `false`. `drawer.isShown();`
`update()`	Forces the drawer component to update with any modifications done. `drawer.update();`
`goElement()`	Returns the selected drawer instance. `drawer.goElement();`
`destroy()`	Removes the component instance from element. `drawer.destroy();`

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. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.on("kt.drawer.toggle", function() { // console.log("kt.drawer.toggle event is fired"); });`
`kt.drawer.toggled`	This event fires on when the drawer is done toggling. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.on("kt.drawer.toggled", function() { // console.log("kt.drawer.toggled event is fired"); });`
`kt.drawer.hide`	This event fires on when the drawer starts to hide. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.on("kt.drawer.hide", function() { // console.log("kt.drawer.hide event is fired"); });`
`kt.drawer.after.hidden`	This event fires on when the drawer is completely hidden. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.on("kt.drawer.after.hidden", function() { // console.log("kt.drawer.after.hidden event is fired"); });`
`kt.drawer.show`	This event fires on when the drawer starts to show. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.on("kt.drawer.show", function() { // console.log("kt.drawer.show event is fired"); });`
`kt.drawer.shown`	This event fires on when the drawer is completely shown. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.on("kt.drawer.shown", function() { // console.log("kt.drawer.shown event is fired"); });`
`trigger(drawer, event)`	Triggers a specific event to the selected drawer. `var drawerEl = document.querySelector("#kt_drawer_example"); var drawer = KTDrawer.getInstance(drawerEl); drawer.trigger(drawer, "kt.drawer.show"); // trigger show drawer`