diff --git a/README.md b/README.md
index a5ee396..c4ea12f 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,9 @@ This web component uses [HTML templates](https://caniuse.com/#feat=template), th
     - Example: `drawer.open = true`
   - In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
     - Example: `<side-drawer open={this.state.isDrawerOpen || undefined}></side-drawer>`
+- `right`
+  - Add this attribute so the drawer opens from the right instead of the left.
+    - Example: `<side-drawer right></side-drawer>`
 
 ### Events
 
diff --git a/index.html b/index.html
index 1d68897..d75c9ba 100644
--- a/index.html
+++ b/index.html
@@ -312,6 +312,11 @@ <h2>Example Customization</h2>
             <code>--side-drawer-overlay-opacity: .25;</code>
             <side-drawer id="drawer4"></side-drawer>
           </li>
+          <li>
+            <wc-menu-button id="menuButton5"></wc-menu-button>
+            <code>&lt;side-drawer right&gt;&lt;side-drawer&gt;</code>
+            <side-drawer right id="drawer5"></side-drawer>
+          </li>
         </ul>
       </section>
     </main>
@@ -347,11 +352,13 @@ <h2>Example Customization</h2>
         const menuButton2 = document.querySelector("#menuButton2");
         const menuButton3 = document.querySelector("#menuButton3");
         const menuButton4 = document.querySelector("#menuButton4");
+        const menuButton5 = document.querySelector("#menuButton5");
 
         const drawer = document.querySelector("#drawer");
         const drawer2 = document.querySelector("#drawer2");
         const drawer3 = document.querySelector("#drawer3");
         const drawer4 = document.querySelector("#drawer4");
+        const drawer5 = document.querySelector("#drawer5");
 
         menuButton.addEventListener("opened", (ev) => {
           drawer.open = true;
@@ -365,6 +372,9 @@ <h2>Example Customization</h2>
         menuButton4.addEventListener("opened", (ev) => {
           drawer4.open = true;
         });
+        menuButton5.addEventListener("opened", (ev) => {
+          drawer5.open = true;
+        });
 
         drawer.addEventListener("open", (ev) => {
           menuButton.open = true;
@@ -378,6 +388,9 @@ <h2>Example Customization</h2>
         drawer4.addEventListener("open", (ev) => {
           menuButton4.open = true;
         });
+        drawer5.addEventListener("open", (ev) => {
+          menuButton5.open = true;
+        });
 
         drawer.addEventListener("close", (ev) => {
           menuButton.open = false;
@@ -391,6 +404,9 @@ <h2>Example Customization</h2>
         drawer4.addEventListener("close", (ev) => {
           menuButton4.open = false;
         });
+        drawer5.addEventListener("close", (ev) => {
+          menuButton5.open = false;
+        });
       }
     </script>
   </body>
diff --git a/package-lock.json b/package-lock.json
index 1134b61..e9abeb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "side-drawer",
-  "version": "3.1.0",
+  "version": "4.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "side-drawer",
-      "version": "3.1.0",
+      "version": "4.1.0",
       "license": "MIT",
       "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.8.4",
diff --git a/package.json b/package.json
index 85e1f39..c4bb59a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "side-drawer",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "A simple side drawer element with no dependencies and small as possible",
   "keywords": [
     "web component",
diff --git a/side-drawer.js b/side-drawer.js
index 96e79c8..ba37fec 100644
--- a/side-drawer.js
+++ b/side-drawer.js
@@ -32,6 +32,12 @@ dialog {
   visibility: hidden;
 }
 
+:host([right]) dialog {
+  left: unset;
+  right: 0;
+  transform: translateX(100%);
+}
+
 /* putting this here in case this is ever fixed:
  https://github.com/whatwg/html/issues/7732 */
 dialog,
@@ -44,6 +50,8 @@ dialog:modal {
   box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
   border-top-right-radius: inherit;
   border-bottom-right-radius: inherit;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
 }
 
 dialog::backdrop {
@@ -63,7 +71,7 @@ dialog[open] {
 
 :host([open]) dialog[open],
 :host([open]) dialog[open]::backdrop {
-    transition-delay:0s;
+    transition-delay: 0s;
     transform: none;
 }