mdb-ui-kit/docs/material-design/drawers.md

layout	title	group
docs	Drawers	material-design

The Material Design for Bootstrap Drawer provides a markup structure and plugin that allows you to display content on the bounds of any position: relative containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The MDB 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/dashboard/) is a basic fully responsive template.
• [Dashboard example]({{ site.baseurl }}/examples/dashboard/) is a comprehensive fully responsive demonstration.

Markup

In order to use the drawer component, MDB has created the following flex based layout structure:

{% highlight html %}

{% endhighlight %}

Positions

Classes

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

Classes	Notes
.mdb-drawer-f-t	{% markdown %}Fixed top{% endmarkdown %}
.mdb-drawer-f-r	{% markdown %}Fixed right{% endmarkdown %}
.mdb-drawer-f-b	{% markdown %}Fixed bottom{% endmarkdown %}
.mdb-drawer-f-l	{% markdown %}Fixed left{% endmarkdown %}

Fixed left

{% example html id=drawer-p1 %}

Toggle drawer menu

• Title

Title

Link 1 Link 2 Link 3

{% endexample %}

Fixed right

{% example html id=drawer-p2 %}

Toggle drawer menu

• Title

Title

Link 1 Link 2 Link 3

{% endexample %}

Fixed top

{% example html id=drawer-p3 %}

Toggle drawer menu

• Title

Title

Link 1 Link 2 Link 3

{% endexample %}

Fixed bottom

{% example html id=drawer-p4 %}

Toggle drawer menu

• Title

Title

Link 1 Link 2 Link 3

{% endexample %}

Styles

Push

The default behavior is for content to be pushed. {% example html id=drawer-s1 %}

Toggle drawer menu

• Title

Title

Link 1 Link 2 Link 3

Main content

{% endexample %}

Overlay

Optional behavior will overlay the drawer and provide a backdrop: {% example html id=drawer-s2 %}

Toggle drawer menu

• Title

Title

Link 1 Link 2 Link 3

Main content

{% endexample %}

Responsiveness vs Static

Static

in out overlay

Responsive in

Responsive overlay

Customization

Variables

Using mixins