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>