Other Links


bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!

Component jQuery API

Bootstrap drawer comes with drawer.js to be added to the bootstrap.js component suite. If you're including separate components, drawer.js depends on transition.js plugin.

drawer.js is built similarly to collapse.js.


Button/Link Toggle Example
Try the buttons over there to toggle the menu that pops out on the left!


The drawer plugin utilizes a few classes to do all the work:

These classes can be found in less/mixins/drawer-framework.less. They are built in loops with the .dw-SIZE-# classes because they utilize margins based on the column width.

Via data attributes

Just add data-toggle="drawer" and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class .fold to the collapsible element. If you'd like it to default open, add the additional class .open.

Via JavaScript

Enable manually with:



Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Name selector default description
parent selector false If a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
toggle boolean true Toggle the drawer element on invocation.



Activates your content as a drawer element. Accepts an optional options object.

    toggle: false

Toggles a drawer element as folded or open.


Shows drawer element as opened.


Hide a drawer element.


drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking into the drawer functionality.

Event Type Description This event fires immediately when the show instance method is called. This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). This event is fired immediately when the hide method has been called. This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#myDrawer').on('', function() {
    // do something here...