Basic Drawer

Below is a drawer example that is shown by default (via show on drawer). Drawer includes support for a header with a close button and an optional body and footer classes for some initial padding. We recommand that you include drawer headers with dismiss button whenever possible, or provide an explicit dismiss button.

Basic Drawer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer Without Backdrop

Use data-backdrop="false" attribute to disable the default backdrop of drawer.

Drawer Without Backdrop

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer With Static Backdrop

Change the data-backdrop attribute to static to disable the backdrop close functionality.

Static Backdrop

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer Placements

Use drawer-left, drawer-right, drawer-top and drawer-bottom modifier classes to set the drawer placement. Default is drawer-left

Drawer Start

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer End

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer Top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer Bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Controlled Drawer

To control the drawer via javascript, use createDrawer() global function to initialize the drawer with default options.

Controlled Drawer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Disable Drawer Keypress

Set data-keyboard attribute to false to disable the ESC close functionality of drawer.

Disable Drawer Keypress

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.