# Documentation v8.0.38

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

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 `id`which 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

Bootstrap Drawer component can be easily configured by adding additional HTML attributes to the view component. For example, adding `data-kt-drawer-direction`will indicate which side the drawer will slide out from ( `start`for left and `end`for right).
Adding `data-kt-drawer-width`will 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 `500px`width on screens larger than `md`and `300px`for 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

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

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

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

Bootstrap Drawers can also be toggled without binding the button `id`with the drawer view component by adding `data-kt-drawer-show="true"`and `data-kt-drawer-target`with 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

### 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
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

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