Drawer
Open a drawer with a button or link with
data-mdb-toggle="drawer"
and a
data-mdb-target
attribute that equals the id of the
<aside> drawer.
<aside> requires the drawer
class
<!-- Drawer Trigger -->
<button
type="button"
class="btn btn-primary"
data-mdb-toggle="drawer"
data-mdb-target="#slide-out"
>
Open Drawer
</button>
<!-- Drawer -->
<aside id="slide-out" class="drawer">
<div class="drawer-container">
<header class="drawer-header">
<h2 class="drawer-header-title h4">Drawer</h2>
<div class="drawer-header-content">
<button
aria-label="Close drawer"
class="btn btn-floating btn-flat"
data-mdb-target="#slide-out"
data-mdb-toggle="drawer"
type="button"
>
<span class="material-icons">close</i>
</button>
</div>
</header>
<div class="drawer-content">
<div key="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
vel varius erat, et iaculis magna. Donec maximus mauris ut ipsum
lobortis sagittis. Nunc fringilla est ac sapien commodo porttitor. Sed
leo ipsum, fringilla sit amet ultricies a, mattis nec ex. In metus
ante, ultrices sit amet tempus non, rhoncus non dui. Vestibulum
sollicitudin nec tortor ut accumsan. Suspendisse a bibendum nunc.
Praesent ultrices lorem posuere sollicitudin posuere.
</p>
</div>
</div>
</div>
</aside>