Drawer

Use Bootstrap's JavaScript drawer plugin to add side content to your site for menu, options, or completely custom content.

How it works

Before getting started with Bootstrap's drawer component, be sure to read the following points.

  • Drawers are build with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that drawer content scrolls instead.
  • Clicking on the drawer "backdrop" will automatically close the drawer.
  • Bootstrap only supports one drawer window at a time. Nested drawers aren't supported as we believe them to be poor user experiences.
  • Drawer use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your drawer HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a .drawer within another fixed element.
  • Once again, due to position: fixed, there are some caveats with using drawers on mobile devices.
  • Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap drawers. To achieve the same effect, use some custom JavaScript:
$('#my-other').on('show.bs.drawer', function(){ $('#my-input').trigger('focus'); })

Keep reading for demos and usage guidelines.

Examples

Drawer Components

Below is a static drawer example (meaning its position and display have been overridden). Included are the drawer header, drawer body (required for padding), and drawer footer (optional).

Drawer Title
Drawer body text goes here.
Drawer footer

Live Demo

Toggle a working drawer demo by clicking the button below. It will slide right from left of the document.

Scrolling long content

When drawers become too long for the user's viewport, they .drawer-content become scrolled. Try the demo below to see what we mean.

You can also create a scrollable drawer that allows scroll the drawer body by adding .drawer-content-scrollable to .drawer-content.

Using the grid

Utilize the Bootstrap grid system within a drawer by nesting .container-fluid within the .drawer-body. Then, use the normal grid system classes as you would anywhere else.

Change animation

The $drawer-transition variable determines the transform state of .drawer on getting in the document.

Remove animation

For drawer that simply appear rather than slide in to view, remove the slide class from your drawer markup.

Accessibility

Be sure to add role="dialog" and aria-labelledby="...", referencing the drawer title, to .drawer, and role="document" to the .drawer-content itself. Additionally, you may give a description of your drawer dialog with aria-describedby on .drawer.

Embedding YouTube videos

Embedding YouTube videos in drawers requires additional JavaScript not in Bootstrap Drawer to automatically stop playback and more.

Usage

The drawer plugin toggles your hidden on demand, via data attributes or JavaScript. It also add .drawer-open to the <body> to override default scrolling behaviour and generates a .drawer-backdrop to provide a click area for dismissing shown drawers when clicking outsite the drawer.

Via data attributes

Activate a drawer without writing JavaScript. Set data-toggle="drawer" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific drawer to toggle

Via JavaScript

Call a drawer with id myDrawer with a single line of JavaScript

$('#myDrawer').drawer(options);

Options

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

NameTypeDefaultDescription
backdrop boolean or string 'static' true Include a drawer-backdrop element. Alternatively, specify static for a backdrop which doesn't close the drawer on click.
keyboard boolean true Close the drawer when escape key pressed.
focus boolean true Puts the focus on the drawer when initialized.
show boolean true Show the drawer when initialized.

Methods

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In additional, a method call on a transition component will be ignored.

.drawer(options)

Activate your content as a drawer. Accept an optional options object.

$('#my-drawer').drawer({ keyboard: false })

.drawer('toggle')

Manullay toggles a drawer. Returns to the caller before the drawer has actually been shown or hidden (i.e before shown.bs.drawer or hidden.bs.drawer event occurs).

$('#my-drawer').drawer('toggle')

.drawer('show')

Manually opens a drawer. Returns to the caller before the drawer has actually been shown (i.e before shown.bs.drawer event occurs).

$('#my-drawer').drawer('show')

.drawer('hide')

Manually hides a drawer. Returns to the caller before the drawer has actually been hidden (i.e before hidden.bs.drawer event occurs).

$('#my-drawer').drawer('hide')

.drawer('dispose')

Destroys an element's drawer.

Events

Bootstrap's drawer class exposes a few events for hooking into drawer functionality. All drawer events are fired at the drawer itself (i.e at the <div class="drawer">).

Event TypeDescription
show.bs.drawer This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.drawer This event is fired when the drawer has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.drawer This event is fired immediately when the hide instance method has been called.
hidden.bs.drawer This event is fired when the drawer has finished being hidden from the user (will wait for CSS transitions to complete).
$('#my-drawer').on('hidden.bs.drawer', function(e){ // do something... })