Documentation v8.0.36

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

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

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.

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

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.

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 trueand falsevalues. 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 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-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: 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.
For example: {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).
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. skipis optional and selectoroptional with default value [data-kt-drawer="true"].
KTDrawer.hideAll();
updateAll(DOMString selector) Updates all drawer elements that match the selector. selectoroptional with default value [data-kt-drawer="true"].
KTDrawer.updateAll();
Public Methods
KTDrawer(DOMElement element, Object options) Constructs a new instance of KTDrawerclass 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 overlayreplicates data-kt-drawer-overlayoption 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 trueor 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

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 939
Custom License
Reach us for custom license offers.
Buy Now
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now