Drawers

This UI Kit is dedicated to Bootstrap 4 & Material Design.

Discover the latest Kit for Bootstrap 5 & Material Design 2.0! DOWNLOAD BOOTSTRAP 5 FREE KIT

Get Material KIT PRO 20% OFF

Use code 5V9QGF on the checkout to get the discount. GET MATERIAL KIT PRO

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
Styles
- Push
- Overlay
Positions
Customization

Overview

Templates and examples

The following examples provide a good starting point:

Drawer template is a basic fully responsive template.
Dashboard example is a comprehensive fully responsive demonstration.

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.

Link 1

Link 2

Link 3

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.

Link 1

Link 2

Link 3

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

Link 1

Link 2

Link 3

<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

Link 1

Link 2

Link 3

<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

Link 1

Link 2

Link 3

<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

Link 1

Link 2

Link 3

<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
}

Drawers

Contents

Overview

Templates and examples

Behavior

Markup

Toggle

Styles

Push

Overlay

Positions

Fixed left

Fixed right

Fixed top

Fixed bottom

Customization

Variables

Custom responsive drawer

Custom static drawer