--- layout: docs title: Drawers group: material-design --- The Bootstrap Material Design `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 * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Overview ### Templates and examples The following examples provide a good starting point: - [Drawer template]({{ site.baseurl }}/examples/drawer/) is a basic fully responsive template. - [Dashboard example]({{ site.baseurl }}/examples/dashboard/) 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 ``, 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. {% highlight html %}
{% endhighlight %} ### 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` {% highlight html %} {% endhighlight %} ## Styles ### Push The default behavior is for content to be pushed. {% example html id=drawer-s1 %}
  • Title
Title

Main content

{% endexample %} ### 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`. {% example html id=drawer-s2 %}
  • Title
Title

Main content

{% endexample %} ## Positions The following positioning marker classes should be placed on the `bmd-layout-container` element:
Classes Notes
.bmd-drawer-f-t {% markdown %}Fixed top{% endmarkdown %}
.bmd-drawer-f-r {% markdown %}Fixed right{% endmarkdown %}
.bmd-drawer-f-b {% markdown %}Fixed bottom{% endmarkdown %}
.bmd-drawer-f-l {% markdown %}Fixed left{% endmarkdown %}
### Fixed left {% example html id=drawer-p1 %}
  • Title
Title
{% endexample %} ### Fixed right {% example html id=drawer-p2 %}
  • Title
Title
{% endexample %} ### Fixed top {% example html id=drawer-p3 %}
  • Title
Title
{% endexample %} ### Fixed bottom {% example html id=drawer-p4 %}
  • Title
Title
{% endexample %} ## 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`: {% highlight scss %} .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); } } } {% endhighlight %} ### 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`. {% highlight scss %} .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 } {% endhighlight %}