diff --git a/docs/intro.md b/docs/intro.md
index 2e7ab9a..dd7225d 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -181,6 +181,18 @@ Similar to `constrainToWindow` but for the target element's first scroll parent:
 
 Additional class names to be added to the drop. These can be set to apply a theme (for example, [`drop-theme-arrows-bounce-dark`](https://github.com/HubSpot/drop/blob/master/css/drop-theme-arrows-bounce-dark.css)) and/or they can be set to apply custom styling to child elements of the drop.
 
+#### `classSuffixOpen`
+
+Class name suffix used when the drop is opened and removed when it should be hidden. By default it's `-open`.
+
+#### `classSuffixOpenTransitionend`
+
+Class name suffix used immediately when the drop is open. By default it's `-open-transitionend`.
+
+#### `classSuffixAfterOpen`
+
+Class name suffix used when the next event loop tick after the drop is opened. By default it's `-after-open`.
+
 #### `remove`
 
 Set to `true` if you'd like the drop element to be removed from the DOM when the drop is closed and recreated when it's opened.
diff --git a/src/js/drop.js b/src/js/drop.js
index 92db0e0..39b6976 100644
--- a/src/js/drop.js
+++ b/src/js/drop.js
@@ -81,6 +81,9 @@ function createContext(options={}) {
       constrainToScrollParent: true,
       constrainToWindow: true,
       classes: '',
+      classSuffixOpen: '-open',
+      classSuffixOpenTransitionend: '-open-transitionend',
+      classSuffixAfterOpen: '-after-open',
       remove: false,
       openDelay: 0,
       closeDelay: 50,
@@ -115,9 +118,9 @@ function createContext(options={}) {
     }
 
     if (anyOpen) {
-      addClass(document.body, `${ drop.classPrefix }-open`);
+      addClass(document.body, `${ drop.classPrefix }${ drop.classSuffixOpen }`);
     } else {
-      removeClass(document.body, `${ drop.classPrefix }-open`);
+      removeClass(document.body, `${ drop.classPrefix }${ drop.classSuffixOpen }`);
     }
 
   };
@@ -353,7 +356,7 @@ function createContext(options={}) {
 
     isOpened() {
       if (this.drop) {
-        return hasClass(this.drop, `${ drop.classPrefix }-open`);
+        return hasClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixOpen }`);
       }
     }
 
@@ -379,12 +382,12 @@ function createContext(options={}) {
         this.tether.enable();
       }
 
-      addClass(this.drop, `${ drop.classPrefix }-open`);
-      addClass(this.drop, `${ drop.classPrefix }-open-transitionend`);
+      addClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixOpen }`);
+      addClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixOpenTransitionend }`);
 
       setTimeout(() => {
         if (this.drop) {
-          addClass(this.drop, `${ drop.classPrefix }-after-open`);
+          addClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixAfterOpen }`);
         }
       });
 
@@ -402,8 +405,8 @@ function createContext(options={}) {
         return;
       }
 
-      if (!hasClass(this.drop, `${ drop.classPrefix }-open`)) {
-        removeClass(this.drop, `${ drop.classPrefix }-open-transitionend`);
+      if (!hasClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixOpen }`)) {
+        removeClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixOpenTransitionend }`);
       }
       this.drop.removeEventListener(transitionEndEvent, this.transitionEndHandler);
     }
@@ -430,8 +433,8 @@ function createContext(options={}) {
         return;
       }
 
-      removeClass(this.drop, `${ drop.classPrefix }-open`);
-      removeClass(this.drop, `${ drop.classPrefix }-after-open`);
+      removeClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixOpen }`);
+      removeClass(this.drop, `${ drop.classPrefix }${ drop.classSuffixAfterOpen }`);
 
       this.drop.addEventListener(transitionEndEvent, this.transitionEndHandler);