Drawers

The Material Design for Bootstrap Drawer provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.

Contents

Overview

Templates and examples

The following examples provide a good starting point:

Behavior

The default behavior for any drawer is to be out of the frame of view. It can be set in the frame of view either by using using one of the gridpoint responsive classes such as bmd-drawer-in-lg-up, or by using bmd-drawer-in. Any drawer, be it responsive or statically set to in can be forced out by using bmd-drawer-out.

Markup

In order to use the drawer component you must use BMD’s flex based layout structure. If this layout structure is not a direct child of <body>, be sure that the containing element has set position: relative as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header.

<div class="bmd-layout-container">
  <header class="bmd-layout-header"> </header>
  <div class="bmd-layout-drawer"> </div>
  <main class="bmd-layout-content"> </main>
</div>

Toggle

A manual drawer toggle can be integrated with data attributes. For responsive display or hiding, use the standard Bootstrap classes. The following example will target a drawer with the id of my-drawer

<button class="navbar-toggler hidden-lg-up" data-toggle="drawer" data-target="#my-drawer" type="button">
  <span class="sr-only">Toggle drawer</span>
  <i class="material-icons">menu</i>
</button>

Styles

Push

The default behavior is for content to be pushed.

  • Title

Main content

<div class="bmd-layout-container bmd-drawer-f-l">
  <header class="bmd-layout-header">
    <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
        <span class="sr-only">Toggle drawer</span>
        <i class="material-icons">menu</i>
      </button>
      <ul class="nav navbar-nav">
        <li class="nav-item">Title</li>
      </ul>
    </div>
  </header>
  <div id="dw-s1" class="bmd-layout-drawer bg-faded">
    <header>
      <a class="navbar-brand">Title</a>
    </header>
    <ul class="list-group">
      <a class="list-group-item">Link 1</a>
      <a class="list-group-item">Link 2</a>
      <a class="list-group-item">Link 3</a>
    </ul>
  </div>
  <main class="bmd-layout-content">
    <div class="container">
      <p>Main content</p>
    </div>
  </main>
</div>

Overlay

Optional behavior will overlay the drawer and provide a backdrop. This can be marked with bmd-drawer-overlay to always overlay, or you can use a responsive class such as bmd-drawer-overlay-md-down.

  • Title

Main content

<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
  <header class="bmd-layout-header">
    <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
        <span class="sr-only">Toggle drawer</span>
        <i class="material-icons">menu</i>
      </button>
      <ul class="nav navbar-nav">
        <li class="nav-item">Title</li>
      </ul>
    </div>
  </header>
  <div id="dw-s2" class="bmd-layout-drawer bg-faded">
    <header>
      <a class="navbar-brand">Title</a>
    </header>
    <ul class="list-group">
      <a class="list-group-item">Link 1</a>
      <a class="list-group-item">Link 2</a>
      <a class="list-group-item">Link 3</a>
    </ul>
  </div>
  <main class="bmd-layout-content">
    <div class="container">
      <p>Main content</p>
    </div>
  </main>
</div>

Positions

The following positioning marker classes should be placed on the bmd-layout-container element:

Classes Notes
.bmd-drawer-f-t

Fixed top
.bmd-drawer-f-r

Fixed right
.bmd-drawer-f-b

Fixed bottom
.bmd-drawer-f-l

Fixed left

Fixed left

  • Title
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
  <header class="bmd-layout-header">
    <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p1">
        <span class="sr-only">Toggle drawer</span>
        <i class="material-icons">menu</i>
      </button>
      <ul class="nav navbar-nav">
        <li class="nav-item">Title</li>
      </ul>
    </div>
  </header>
  <div id="dw-p1" class="bmd-layout-drawer bg-faded">
    <header>
      <a class="navbar-brand">Title</a>
    </header>
    <ul class="list-group">
      <a class="list-group-item">Link 1</a>
      <a class="list-group-item">Link 2</a>
      <a class="list-group-item">Link 3</a>
    </ul>
  </div>
  <main class="bmd-layout-content">
    <div class="container">
      <!-- main content -->
    </div>
  </main>
</div>

Fixed right

  • Title
<div class="bmd-layout-container bmd-drawer-f-r bmd-drawer-overlay">
  <header class="bmd-layout-header">
    <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p2">
        <span class="sr-only">Toggle drawer</span>
        <i class="material-icons">menu</i>
      </button>
      <ul class="nav navbar-nav">
        <li class="nav-item">Title</li>
      </ul>
    </div>
  </header>
  <div id="dw-p2" class="bmd-layout-drawer bg-faded">
    <header>
      <a class="navbar-brand">Title</a>
    </header>
    <ul class="list-group">
      <a class="list-group-item">Link 1</a>
      <a class="list-group-item">Link 2</a>
      <a class="list-group-item">Link 3</a>
    </ul>
  </div>
  <main class="bmd-layout-content">
    <div class="container">
      <!-- main content -->
    </div>
  </main>
</div>

Fixed top

  • Title
<div class="bmd-layout-container bmd-drawer-f-t bmd-drawer-overlay">
  <header class="bmd-layout-header">
    <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p3">
        <span class="sr-only">Toggle drawer</span>
        <i class="material-icons">menu</i>
      </button>
      <ul class="nav navbar-nav">
        <li class="nav-item">Title</li>
      </ul>
    </div>
  </header>
  <div id="dw-p3" class="bmd-layout-drawer bg-faded">
    <header>
      <a class="navbar-brand">Title</a>
    </header>
    <ul class="list-group">
      <a class="list-group-item">Link 1</a>
      <a class="list-group-item">Link 2</a>
      <a class="list-group-item">Link 3</a>
    </ul>
  </div>
  <main class="bmd-layout-content">
    <div class="container">
      <!-- main content -->
    </div>
  </main>
</div>

Fixed bottom

  • Title
<div class="bmd-layout-container bmd-drawer-f-b bmd-drawer-overlay">
  <header class="bmd-layout-header">
    <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p4">
        <span class="sr-only">Toggle drawer</span>
        <i class="material-icons">menu</i>
      </button>
      <ul class="nav navbar-nav">
        <li class="nav-item">Title</li>
      </ul>
    </div>
  </header>
  <div id="dw-p4" class="bmd-layout-drawer bg-faded">
    <header>
      <a class="navbar-brand">Title</a>
    </header>
    <ul class="list-group">
      <a class="list-group-item">Link 1</a>
      <a class="list-group-item">Link 2</a>
      <a class="list-group-item">Link 3</a>
    </ul>
  </div>
  <main class="bmd-layout-content">
    <div class="container">
      <!-- main content -->
    </div>
  </main>
</div>

Customization

Variables

Globally, you may alter the size of x vs y drawers with the following variables:

  • $bmd-drawer-x-size
  • $bmd-drawer-y-size

Custom responsive drawer

The following will create x drawers (left/right) at the size of 500px that will respond to both marker classes and grid-based responsive classes such as bmd-drawer-in-lg-up:

.kitchen-sink-drawer {
  $custom-size: 500px;
  @include bmd-drawer-x-out($custom-size);
  &:not(.bmd-drawer-out) {
    @each $breakpoint in map-keys($grid-breakpoints) {
      @include bmd-drawer-x-in-up($custom-size, $breakpoint);
    }
  }
}

Custom static drawer

The following generates a custom drawer at the size of 500px that is out by default and can be triggered in with bmd-drawer-in.

.kitchen-sink-drawer-static {
  $custom-size: 500px;
  @include bmd-drawer-x-out($custom-size); // closed by default
  @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
  @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
}