diff --git a/demo/index.html b/demo/index.html
index cfbb85d..21dcd85 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,14 +8,14 @@
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../dropdown-menu-container.html">
+    <link rel="import" href="../dropdown-menu.html">
 
     <style>
     </style>
   </head>
   <body>
 
-    <dropdown-menu-container>
+    <dropdown-menu>
       <button>Open</button>
 
       <template>
@@ -23,7 +23,7 @@
         <button>Menu 2</button>
         <button>Menu 3</button>
       </template>
-    </dropdown-menu-container>
+    </dropdown-menu>
 
   </body>
 </html>
diff --git a/dropdown-menu-container.html b/dropdown-menu-container.html
deleted file mode 100644
index 2d9e8ce..0000000
--- a/dropdown-menu-container.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<link rel="import" href="../polymer/polymer-element.html">
-<link rel="import" href="../polymer/lib/utils/templatize.html">
-<link rel="import" href="dropdown-menu.html">
-
-<dom-module id="dropdown-menu-container">
-  <template>
-    <style>
-      :host {
-        display: inline-block;
-      }
-
-      #dropdownTrigger {
-        display: inline-block
-      }
-    </style>
-
-    <div id="dropdownTrigger" on-click="_dropdownTriggerClicked">
-      <slot></slot>
-    </div>
-
-    <dropdown-menu
-        id="dropdown"
-        opened="{{opened}}"
-        no-cancel-on-outside-click="{{noCancelOnOutsideClick}}"></dropdown-menu>
-
-  </template>
-
-  <script>
-
-    class DropdownMenuContainer extends Polymer.Element {
-
-      static get is() {return 'dropdown-menu-container';}
-
-      static get properties() {
-        return {
-
-          noCancelOnOutsideClick: {
-            type: Boolean,
-            value: false
-          },
-
-          opened: Boolean,
-
-          _instance: Object,
-
-          _ctor: Object
-
-        };
-      }
-
-      toggle() {
-        if (!this._instance) {
-          const template = this.querySelector('template');
-          template.__dmc = this;
-
-          if (!template) {
-            throw new Error('dropdown-menu-container requires a <template> child');
-          }
-
-          const ctor = Polymer.Templatize.templatize(template, this, {
-            forwardHostProp: function(prop, value) {
-              const dmc = template.__dmc;
-              if (dmc._instance) {
-                dmc._instance.forwardHostProp(prop, value);
-              }
-            }
-          });
-
-          this._instance = new ctor(this);
-          this.$.dropdown.positionTarget = this.$.dropdownTrigger;
-          this.$.dropdown._dropdownContainer = this;
-          this.$.dropdown.appendChild(this._instance.root);
-        }
-
-        requestAnimationFrame(_ => {
-          this.opened = !this.opened;
-        });
-      }
-
-      _dropdownTriggerClicked(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.toggle();
-      }
-
-    }
-
-    customElements.define(DropdownMenuContainer.is, DropdownMenuContainer);
-
-  </script>
-</dom-module>
diff --git a/dropdown-menu-overlay.html b/dropdown-menu-overlay.html
new file mode 100644
index 0000000..d8f3b2c
--- /dev/null
+++ b/dropdown-menu-overlay.html
@@ -0,0 +1,265 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../overlay-container/overlay-mixin.html">
+
+<!--
+  By default this element center the dropdown in the middle of the screen.
+-->
+<dom-module id="dropdown-menu-overlay">
+  <template>
+    <style>
+      :host {
+        align-items: center;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        left: 0;
+        margin: auto;
+        position: fixed;
+        right: 0;
+        top: 0;
+      }
+
+      /* content box */
+      #content {
+        background: white;
+        border-radius: 2px;
+        box-shadow: 0 1px 20px 2px rgba(0, 0, 0, 0.2);
+        min-width: 180px;
+        position: absolute;
+        will-change: transform;
+      }
+
+      :host([small-screen]) #content {
+        width: 80%;
+        min-width: auto;
+        will-change: initial;
+      }
+
+      #content ::slotted(button),
+      #content ::slotted(a) {
+        background: none;
+        border: 0;
+        color: initial;
+        cursor: pointer;
+        display: block;
+        font-size: 16px;
+        outline: 0;
+        overflow: hidden;
+        padding: 14px 20px 14px;
+        position: relative;
+        text-align: left;
+        text-decoration: none;
+        width: 100%;
+      }
+    </style>
+
+    <div id="content">
+      <slot></slot>
+    </div>
+
+  </template>
+
+  <script>
+
+    class DropdownMenuOverlay extends OverlayMixin(Polymer.Element) {
+
+      static get is() {return 'dropdown-menu-overlay';}
+
+      static get properties() {
+        return {
+
+          noCancelOnOutsideClick: {
+            type: Boolean,
+            value: false
+          },
+
+          noCancelOnButtonClick: {
+            type: Boolean,
+            value: false
+          },
+
+          smallScreen: {
+            type: Boolean,
+            reflectToAttribute: true,
+            value: false
+          },
+
+          /**
+          * The element that should be used to position the element. If not set, it will
+          * be centered on the screen.
+          * @type {!Element}
+          */
+          positionTarget: Object,
+
+          // The element to fit `this` into.
+          fitTarget: {
+            type: Object,
+            value: window
+          },
+          
+          _dropdownContainer: Object
+
+        };
+      }
+
+      constructor() {
+        super();
+        this._mqListener = this._mqListener.bind(this);
+      }
+
+      connectedCallback() {
+        super.connectedCallback();
+
+        requestAnimationFrame(_ => {
+          this.addEventListener('click', this._onClick.bind(this));
+          this._toggleMediaQueryListeners(true);
+          this.smallScreen = this._mq.matches;
+        });
+      }
+      
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        this._toggleMediaQueryListeners(false);
+      }
+
+      __openedChanged(opened, old) {
+        super.__openedChanged(opened, old);
+
+        if (opened) {
+          this._overlayOpened();
+        } else if (!old) {
+          this._overlayClosed();
+        }
+      }
+
+      _toggleMediaQueryListeners(enable) {
+        if (enable) {
+          this._mq = window.matchMedia('(max-width: 640px)');
+          this._mq.addListener(this._mqListener);
+        } else if (this._mq) {
+          this._mq.removeListener(this._mqListener);
+        }
+      }
+
+      _mqListener(event) {
+        this.smallScreen = event.matches;
+      }
+
+      _onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const localName = event.target.localName;
+
+        if (!this.noCancelOnOutsideClick &&
+            (localName === 'dropdown-menu-overlay' || localName === 'button' || localName === 'a')) {
+          this.opened = false;           
+        }
+      }
+
+      _overlayOpened() {
+        if (this.smallScreen || !this.positionTarget) {
+          this.style.background = 'rgba(0,0,0, 0.52)';
+
+          this._animation = this.animate([
+            {opacity: 0}, 
+            {opacity: 1}    
+          ], {
+            duration: 300,
+            easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)'
+          });
+        } else {
+          this._positionize();
+
+          this._animation = this.$.content.animate([
+            {transform: 'scale(0.3, 0) translate(20px, -10px)'},
+            {transform: 'scale(1, 1) translate(0, 0)'}     
+          ], {
+            duration: 240,
+            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+          });
+        }
+
+        this._animation.onfinish = _ => {
+          this.dispatchEvent(new CustomEvent('finish-open-dropdown-animation'));
+          this._animation = null;
+        };
+      }
+
+      _overlayClosed() {
+        this.style.display = '';
+
+        this._animation = this.animate([
+          {opacity: 1}, 
+          {opacity: 0}    
+        ], {
+          duration: 240,
+          easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+        });
+
+        this._animation.onfinish = _ => {
+          this.remove();
+
+          Object.assign(this.$.content.style, {
+            top: '',
+            bottom: '',
+            left: '',
+            right: '',
+            transformOrigin: ''
+          });
+
+          this.style.background = '';
+        };
+      }
+
+      /**
+      * Position the content div to the positionTarget.
+      * top/right align have priority.
+      */
+      _positionize() {
+        const rect = this.$.content.getBoundingClientRect();
+        const fitRect = this._getNormalizedRect(this.fitTarget);
+        const positionRect = this.positionTarget.getBoundingClientRect();
+
+        let top, bottom, right, left, transformOrigin;
+
+        if (fitRect.height - positionRect.bottom >= rect.height) {
+          top = positionRect.top + 'px';
+          transformOrigin = 'top';
+        } else {
+          bottom = 0 + 'px';
+          transformOrigin = 'bottom';
+        }
+
+        if (positionRect.right >= rect.width) {
+          right = fitRect.width - positionRect.right + 'px';
+          transformOrigin += ' right';
+        } else {
+          left = positionRect.left + 'px';
+          transformOrigin += ' left';
+        }
+
+        Object.assign(this.$.content.style,
+          {top, bottom, right, left, transformOrigin});
+      }
+
+      _getNormalizedRect(target) {
+        if (target === document.documentElement || target === window) {
+          return {
+            top: 0,
+            left: 0,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            right: window.innerWidth,
+            bottom: window.innerHeight
+          };
+        }
+        return target.getBoundingClientRect();
+      }
+
+    }
+
+    customElements.define(DropdownMenuOverlay.is, DropdownMenuOverlay);
+
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/dropdown-menu.html b/dropdown-menu.html
index f0e8dd5..a8b7e26 100644
--- a/dropdown-menu.html
+++ b/dropdown-menu.html
@@ -1,67 +1,33 @@
 <link rel="import" href="../polymer/polymer-element.html">
-<link rel="import" href="../overlay-container/overlay-mixin.html">
-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../polymer/lib/utils/templatize.html">
+<link rel="import" href="dropdown-menu-overlay.html">
 
-<!--
-  By default this element center the dropdown in the middle of the screen.
--->
 <dom-module id="dropdown-menu">
   <template>
     <style>
       :host {
-        @apply(--layout-vertical);
-        @apply(--layout-center-center);
-        bottom: 0;
-        left: 0;
-        margin: auto;
-        position: fixed;
-        right: 0;
-        top: 0;
+        display: inline-block;
       }
 
-      /* content box */
-      #content {
-        background: white;
-        border-radius: 2px;
-        box-shadow: 0 1px 20px 2px rgba(0, 0, 0, 0.2);
-        min-width: 180px;
-        position: absolute;
-        will-change: transform;
-      }
-
-      :host([small-screen]) #content {
-        width: 80%;
-        min-width: auto;
-        will-change: initial;
-      }
-
-      #content ::slotted(button),
-      #content ::slotted(a) {
-        background: none;
-        border: 0;
-        color: initial;
-        cursor: pointer;
-        display: block;
-        font-size: 16px;
-        outline: 0;
-        overflow: hidden;
-        padding: 14px 20px 14px;
-        position: relative;
-        text-align: left;
-        text-decoration: none;
-        width: 100%;
+      #dropdownTrigger {
+        display: inline-block
       }
     </style>
 
-    <div id="content">
+    <div id="dropdownTrigger" on-click="_dropdownTriggerClicked">
       <slot></slot>
     </div>
 
+    <dropdown-menu-overlay
+        id="overlay"
+        opened="{{opened}}"
+        no-cancel-on-outside-click="{{noCancelOnOutsideClick}}"></dropdown-menu-overlay>
+
   </template>
 
   <script>
 
-    class DropdownMenu extends OverlayMixin(Polymer.Element) {
+    class DropdownMenu extends Polymer.Element {
 
       static get is() {return 'dropdown-menu';}
 
@@ -73,187 +39,48 @@
             value: false
           },
 
-          noCancelOnButtonClick: {
-            type: Boolean,
-            value: false
-          },
+          opened: Boolean,
 
-          smallScreen: {
-            type: Boolean,
-            reflectToAttribute: true,
-            value: false
-          },
+          _instance: Object,
 
-          /**
-          * The element that should be used to position the element. If not set, it will
-          * be centered on the screen.
-          * @type {!Element}
-          */
-          positionTarget: Object,
-
-          // The element to fit `this` into.
-          fitTarget: {
-            type: Object,
-            value: window
-          },
-          
-          _dropdownContainer: Object
+          _ctor: Object
 
         };
       }
 
-      constructor() {
-        super();
-        this._mqListener = this._mqListener.bind(this);
-      }
+      toggle() {
+        if (!this._instance) {
+          const template = this.querySelector('template');
+          template.__dmc = this;
 
-      connectedCallback() {
-        super.connectedCallback();
+          if (!template) {
+            throw new Error('dropdown-menu requires a <template> child');
+          }
 
-        requestAnimationFrame(_ => {
-          this.addEventListener('click', this._onClick.bind(this));
-          this._toggleMediaQueryListeners(true);
-          this.smallScreen = this._mq.matches;
-        });
-      }
-      
-      disconnectedCallback() {
-        super.disconnectedCallback();
-        this._toggleMediaQueryListeners(false);
-      }
-
-      __openedChanged(opened, old) {
-        super.__openedChanged(opened, old);
-
-        if (opened) {
-          this._overlayOpened();
-        } else if (!old) {
-          this._overlayClosed();
-        }
-      }
-
-      _toggleMediaQueryListeners(enable) {
-        if (enable) {
-          this._mq = window.matchMedia('(max-width: 640px)');
-          this._mq.addListener(this._mqListener);
-        } else if (this._mq) {
-          this._mq.removeListener(this._mqListener);
-        }
-      }
-
-      _mqListener(event) {
-        this.smallScreen = event.matches;
-      }
-
-      _onClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const localName = event.target.localName;
-
-        if (!this.noCancelOnOutsideClick &&
-            (localName === 'dropdown-menu' || localName === 'button' || localName === 'a')) {
-          this.opened = false;           
-        }
-      }
-
-      _overlayOpened() {
-        if (this.smallScreen || !this.positionTarget) {
-          this.style.background = 'rgba(0,0,0, 0.52)';
-
-          this._animation = this.animate([
-            {opacity: 0}, 
-            {opacity: 1}    
-          ], {
-            duration: 300,
-            easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)'
+          const ctor = Polymer.Templatize.templatize(template, this, {
+            forwardHostProp: function(prop, value) {
+              const dmc = template.__dmc;
+              if (dmc._instance) {
+                dmc._instance.forwardHostProp(prop, value);
+              }
+            }
           });
-        } else {
-          this._positionize();
 
-          this._animation = this.$.content.animate([
-            {transform: 'scale(0.3, 0) translate(20px, -10px)'},
-            {transform: 'scale(1, 1) translate(0, 0)'}     
-          ], {
-            duration: 240,
-            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
-          });
+          this._instance = new ctor(this);
+          this.$.overlay.positionTarget = this.$.dropdownTrigger;
+          this.$.overlay._dropdownContainer = this;
+          this.$.overlay.appendChild(this._instance.root);
         }
 
-        this._animation.onfinish = _ => {
-          this.dispatchEvent(new CustomEvent('finish-open-dropdown-animation'));
-          this._animation = null;
-        };
-      }
-
-      _overlayClosed() {
-        this.style.display = '';
-
-        this._animation = this.animate([
-          {opacity: 1}, 
-          {opacity: 0}    
-        ], {
-          duration: 240,
-          easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+        requestAnimationFrame(_ => {
+          this.opened = !this.opened;
         });
-
-        this._animation.onfinish = _ => {
-          this.remove();
-
-          Object.assign(this.$.content.style, {
-            top: '',
-            bottom: '',
-            left: '',
-            right: '',
-            transformOrigin: ''
-          });
-
-          this.style.background = '';
-        };
-      }
-
-      /**
-      * Position the content div to the positionTarget.
-      * top/right align have priority.
-      */
-      _positionize() {
-        const rect = this.$.content.getBoundingClientRect();
-        const fitRect = this._getNormalizedRect(this.fitTarget);
-        const positionRect = this.positionTarget.getBoundingClientRect();
-
-        let top, bottom, right, left, transformOrigin;
-
-        if (fitRect.height - positionRect.bottom >= rect.height) {
-          top = positionRect.top + 'px';
-          transformOrigin = 'top';
-        } else {
-          bottom = 0 + 'px';
-          transformOrigin = 'bottom';
-        }
-
-        if (positionRect.right >= rect.width) {
-          right = fitRect.width - positionRect.right + 'px';
-          transformOrigin += ' right';
-        } else {
-          left = positionRect.left + 'px';
-          transformOrigin += ' left';
-        }
-
-        Object.assign(this.$.content.style,
-          {top, bottom, right, left, transformOrigin});
       }
 
-      _getNormalizedRect(target) {
-        if (target === document.documentElement || target === window) {
-          return {
-            top: 0,
-            left: 0,
-            width: window.innerWidth,
-            height: window.innerHeight,
-            right: window.innerWidth,
-            bottom: window.innerHeight
-          };
-        }
-        return target.getBoundingClientRect();
+      _dropdownTriggerClicked(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
       }
 
     }
@@ -261,4 +88,4 @@
     customElements.define(DropdownMenu.is, DropdownMenu);
 
   </script>
-</dom-module>
\ No newline at end of file
+</dom-module>
diff --git a/index.html b/index.html
index e1710ad..d3d22ba 100644
--- a/index.html
+++ b/index.html
@@ -2,15 +2,15 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-
+    <meta http-equiv="refresh" content="0;url=components/dropdown-menu/demo/" />
     <title>dropdown-menu</title>
-
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="../iron-component-page/iron-component-page.html">
   </head>
   <body>
-    <iron-component-page src="dropdown-menu.html"></iron-component-page>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
   </body>
 </html>
