bootstrap-drawer

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!

Drawer Customization

bootstrap-drawer comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.

Position

Sometimes you might want the drawer to the right. You can do this quickly by adding .drawer-right to the .drawer container.

<div id="drawerExample2" class="drawer drawer-right ...">
    ...
</div>

right menu example

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

Inverse Color

Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add .drawer-inverse to your .drawer container.

<div id="drawerExample2" class="drawer drawer-inverse ...">
    ...
</div>

inverse menu example

You can inverse the drawer color (like navbar) by adding .drawer-inverse class.