diff --git a/docs/userGuide/syntax/dropdowns.mbdf b/docs/userGuide/syntax/dropdowns.mbdf
index ebf21499ec..0ebf299455 100644
--- a/docs/userGuide/syntax/dropdowns.mbdf
+++ b/docs/userGuide/syntax/dropdowns.mbdf
@@ -56,6 +56,23 @@
 </variable>
 </include>
 
+**You can also use create multi-level submenu by nesting Dropdowns.**
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<!-- Can simply nest the dropdown syntax -->
+<dropdown header="*Multi-Level Dropdown*" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  <dropdown header="*Submenu*">
+    <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+    <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  </dropdown>
+</dropdown>
+</variable>
+</include>
+
 ****Options****
 
 Name | Type | Default | Description
diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue
index c8881d63a5..27ae4450d2 100644
--- a/packages/vue-components/src/Submenu.vue
+++ b/packages/vue-components/src/Submenu.vue
@@ -1,7 +1,11 @@
 <template>
   <li ref="submenu" :class="classes">
-    <slot name=button>
-      <a class="submenu-toggle" role="button" :class="{disabled: disabled}">
+    <slot name="button">
+      <a
+        class="submenu-toggle"
+        role="button"
+        :class="{disabled: disabled}"
+      >
         <slot name="_header">
           <slot name="header"></slot>
         </slot>
@@ -36,12 +40,14 @@ export default {
     return {
       dropright: true,
       dropleft: false,
-    }
+    };
   },
   computed: {
     classes() {
-      return [this.class, this.addClass, 'dropdown-submenu', 
-        { 'dropright': this.dropright, 'dropleft': this.dropleft }];
+      return [
+        this.class, this.addClass, 'dropdown-submenu',
+        { 'dropright': this.dropright, 'dropleft': this.dropleft },
+      ];
     },
     disabledBool() {
       return toBoolean(this.disabled);
@@ -61,7 +67,7 @@ export default {
     },
     showSubmenu() {
       this.show = true;
-      $(this.$refs.submenu).findChildren('ul').each(ul => {
+      $(this.$refs.submenu).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', true);
         if (positionSubmenu.isRightAlign(ul)) {
           this.alignMenuRight();
@@ -78,7 +84,7 @@ export default {
     alignMenuLeft() {
       this.dropright = false;
       this.dropleft = true;
-    }
+    },
   },
   created() {
     this._submenu = true;
diff --git a/packages/vue-components/src/__tests__/Dropdown.spec.js b/packages/vue-components/src/__tests__/Dropdown.spec.js
new file mode 100644
index 0000000000..02901c0403
--- /dev/null
+++ b/packages/vue-components/src/__tests__/Dropdown.spec.js
@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import Dropdown from '../Dropdown.vue';
+import Submenu from '../Submenu.vue';
+
+const DEFAULT_STUBS = {
+  'dropdown': Dropdown,
+  'submenu': Submenu,
+};
+
+const DROPDOWN = `
+<li><a href="#" class="dropdown-item">Dropdown Item 1</a></li>
+<li><a href="#" class="dropdown-item">Dropdown Item 2</a></li>
+<li><a href="#" class="dropdown-item">Dropdown Item 3</a></li>
+`;
+
+const FIRST_LEVEL_NESTED_DROPDOWN = `
+${DROPDOWN}
+<dropdown haeder="Submenu Level 1">
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 1</a></li>
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 2</a></li>
+</dropdown>
+`;
+
+const SECOND_LEVEL_NESTED_DROPDOWN = `
+<dropdown haeder="Submenu Level 1">
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 1</a></li>
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 2</a></li>
+  <dropdown haeder="Submenu Level 2">
+    <li><a href="#" class="dropdown-item">Nested Submenu Item</a></li>
+  </dropdown>
+</dropdown>
+`;
+
+describe('Dropdown with submenu', () => {
+  test('dropdown', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('dropdown with one level of submenu', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: FIRST_LEVEL_NESTED_DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('dropdown with two levels of submenu', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: SECOND_LEVEL_NESTED_DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Dropdown.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Dropdown.spec.js.snap
new file mode 100644
index 0000000000..2bd60ba815
--- /dev/null
+++ b/packages/vue-components/src/__tests__/__snapshots__/Dropdown.spec.js.snap
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown with submenu dropdown 1`] = `
+<div
+  class="btn-group"
+>
+   
+  <button
+    class="btn dropdown-toggle btn-light"
+    type="button"
+  >
+    Test Dropdown
+  </button>
+   
+  <ul
+    class="dropdown-menu"
+  >
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 1
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 2
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 3
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown with submenu dropdown with one level of submenu 1`] = `
+<div
+  class="btn-group"
+>
+   
+  <button
+    class="btn dropdown-toggle btn-light"
+    type="button"
+  >
+    Test Dropdown
+  </button>
+   
+  <ul
+    class="dropdown-menu"
+  >
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 1
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 2
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 3
+      </a>
+    </li>
+     
+    <li
+      class="dropdown-submenu dropright"
+      haeder="Submenu Level 1"
+    >
+      <a
+        class="submenu-toggle"
+        role="button"
+      />
+       
+      <ul
+        class="dropdown-menu"
+      >
+            
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 1
+          </a>
+        </li>
+         
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 2
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown with submenu dropdown with two levels of submenu 1`] = `
+<div
+  class="btn-group"
+>
+   
+  <button
+    class="btn dropdown-toggle btn-light"
+    type="button"
+  >
+    Test Dropdown
+  </button>
+   
+  <ul
+    class="dropdown-menu"
+  >
+    <li
+      class="dropdown-submenu dropright"
+      haeder="Submenu Level 1"
+    >
+      <a
+        class="submenu-toggle"
+        role="button"
+      />
+       
+      <ul
+        class="dropdown-menu"
+      >
+            
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 1
+          </a>
+        </li>
+         
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 2
+          </a>
+        </li>
+         
+        <li
+          class="dropdown-submenu dropright"
+          haeder="Submenu Level 2"
+        >
+          <a
+            class="submenu-toggle"
+            role="button"
+          />
+           
+          <ul
+            class="dropdown-menu"
+          >
+                
+            <li>
+              <a
+                class="dropdown-item"
+                href="#"
+              >
+                Nested Submenu Item
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/packages/vue-components/src/utils/submenu.js b/packages/vue-components/src/utils/submenu.js
index ca92a1e70b..7b55881b07 100644
--- a/packages/vue-components/src/utils/submenu.js
+++ b/packages/vue-components/src/utils/submenu.js
@@ -7,23 +7,23 @@
  * ======================================================================== */
 
 function isRightAlign(el) {
-  let viewport = {
-    top: window.scrollY,
-    left: window.scrollX,
-    right: window.scrollY + window.innerWidth,
-    bottom: window.scrollX + window.innerHeight
+  const viewport = {
+    top: 0,
+    left: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
   };
 
-  let position = el.getBoundingClientRect();
+  const position = el.getBoundingClientRect();
 
-  let bounds = {
+  const bounds = {
     top: position.y,
     left: position.x,
     right: position.x + el.offsetWidth,
-    bottom: position.y + el.offsetHeight
+    bottom: position.y + el.offsetHeight,
   };
 
-  if (bounds.top == undefined || bounds.left == undefined) {
+  if (bounds.top === undefined || bounds.left === undefined) {
     return true;
   }
 
@@ -41,28 +41,32 @@ function isRightAlign(el) {
 }
 
 function preventOverflow(el) {
-  el.removeAttribute("style");
-  
-  let viewport = {
-    top: window.scrollY,
-    left: window.scrollX,
-    right: window.scrollY + window.innerWidth,
-    bottom: window.scrollX + window.innerHeight
+  el.removeAttribute('style');
+
+  const viewport = {
+    top: 0,
+    left: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
   };
 
-  let position = el.getBoundingClientRect();
+  const position = el.getBoundingClientRect();
 
-  let bounds = {
+  const bounds = {
     top: position.y,
     left: position.x,
     right: position.x + el.offsetWidth,
-    bottom: position.y + el.offsetHeight
+    bottom: position.y + el.offsetHeight,
   };
 
+  if (bounds.top === undefined || bounds.left === undefined) {
+    return;
+  }
+
   if (bounds.bottom > viewport.bottom) {
-    el.setAttribute("style", "bottom: auto; top: " + (-(bounds.bottom - viewport.bottom)) + "px;");
+    el.setAttribute('style', `bottom: auto; top: ${-(bounds.bottom - viewport.bottom)}px;`);
   } else if (bounds.top < viewport.top) {
-    el.setAttribute("style", "top: auto; bottom: " + (-(viewport.top - bounds.top)) + "px;");
+    el.setAttribute('style', `top: auto; bottom: ${-(viewport.top - bounds.top)}px;`);
   }
 }