The documentation for Material Design Components describes how to create layout with a single persistent drawer. But sometimes you need to simultaneously use left and right drawers in your website. In this tutorial I will show you how to create layout with double drawers.

If you’re familiar with MDC Web, you’d probably know that this library is RTL-aware, and it’s easy to switch from LTR to RTL by adding a dir="rtl" attribute to the element. This is important feature that we will use while creating layout with double drawers. So, let’s start to code.

“Start” and “end” instead of “left” and “right”

In our example, I will call the left drawer “start-aligned”, and the right one - “end-aligned”.

I write in LTR, but such terms will work for RTL layout: “start-aligned” drawer will be on the right, and “end-aligned” drawer - on the left.

Start-aligned drawer usually contains the primary app navigation, while end-aligned is typically used for auxiliary actions or secondary information. This is how your starter application’s layout might look:

<div class="app-layout">
  <main class="app-layout__content">
    ...
  </main>
</div>

Start-aligned drawer is coded as usual Material Components’ persistent drawer. I just added my classes to differentiate drawers.

<div class="app-layout">
  <aside class="app-layout__drawer app-layout__drawer--align-start mdc-drawer mdc-drawer--persistent">
    <div class="mdc-drawer__drawer">
      ...
    </div>
  </aside>
</div>

End-aligned drawer is also created as usual MDC Web’s persistent drawer, but with some additional steps:

  1. Apply the language direction, which is opposite to your default language, to the mdc-drawer element.
  2. Then, apply your default language direction to the mdc-drawer__drawer element:
<div class="app-layout">
  <aside class="app-layout__drawer app-layout__drawer--align-start mdc-drawer mdc-drawer--persistent">
  </aside>
  <main class="app-layout__content">
  </main>
  <aside class="app-layout__drawer app-layout__drawer--align-end mdc-drawer mdc-drawer--persistent" dir="rtl">
    <div class="mdc-drawer__drawer" dir="ltr">
      ...
    </div>
  </aside>
</div>

Please note that you should use HTML’s dir attribute, not CSS’s direction property. This is due to current inability of pure CSS to detect the language direction of layout.

Known issues

End-aligned drawer won’t apply correct margin to the mdc-list-item__graphic, so you should fix it manually:

.app-layout__drawer--align-end {
  .mdc-list-item .mdc-list-item__graphic {
    margin-right: 32px;
    margin-left: 0;
  }
}

Live demo

You can view the final result of this tutorial on Codepen.

See the Pen MDC Web Double Drawer Layout by Rustem Gareev (@rustemgareev) on CodePen.