Drawer

Right position with sidebar.

Download on GitHub

Currently: v3.2.2

Markup

<body class="drawer drawer--right drawer--sidebar">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main" class="drawer-contents">
    <!-- Page content -->
  </main>
</body>

Sidebar position modifier [ left | right ]

<body class="drawer drawer--left drawer--sidebar">
  ...
  <main role="main" class="drawer-contents">
    <!-- Page content -->
  </main>
</body>

<body class="drawer drawer--right drawer--sidebar">
  ...
  <main role="main" class="drawer-contents">
    <!-- Page content -->
  </main>
</body>

More example on GitHub Repo