diff --git a/build/rollup.config.js b/build/rollup.config.js
index 10a075ffe..2c07f4921 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -13,12 +13,14 @@ import path from 'path';
 import babel from 'rollup-plugin-babel';
 import resolve from 'rollup-plugin-node-resolve';
 import minify from 'rollup-plugin-babel-minify';
+import commonjs from 'rollup-plugin-commonjs';
 
 const fileDest = 'tabler',
   banner = require('./banner');
 
 let plugins = [
-  resolve()
+  resolve(),
+  commonjs()
 ];
 
 if (BUNDLE) {
diff --git a/js/tabler.js b/js/tabler.js
index e6aff5181..4e968f277 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -5,6 +5,8 @@
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  */
 
+require('./tabler/dropdowns');
+
 const tabler = {
   colorVariation: function(color, variation) {
     const colorValue = this.colors[color];
@@ -112,8 +114,6 @@ const tabler = {
   },
 };
 
-
-
 $(document).ready(function() {
   const $body = $('body');
 
diff --git a/js/tabler/dropdowns.js b/js/tabler/dropdowns.js
new file mode 100644
index 000000000..af4b3e10d
--- /dev/null
+++ b/js/tabler/dropdowns.js
@@ -0,0 +1,7 @@
+'use strict';
+
+(function(){
+  let dropdown = document.querySelectorAll('.dropup, .dropright, .dropdown, .dropleft'),
+    dropdownToggle = document.querySelectorAll('.dropdown-menu .dropdown-toggle');
+
+})();
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index b8e308328..52c0e27be 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -1,11 +1,11 @@
 {% removeemptylines %}
-<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}" id="menu">
+<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
-   <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %}dropdown{% endif %}">
-      <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+   <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} dropdown{% endif %}">
+      <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
          <span class="nav-icon">
             {% include ui/icon.html icon=icon  %}
          </span>
@@ -20,79 +20,75 @@
          </span>
       </a>
       {% if level-1[1].children or level-1[1].docs %}
-      <div class="navbar-subnav collapse" id="sidebar-{{ level-1[0] }}">
-         <ul class="nav">
+      <ul class="dropdown-menu">
 
-            {% if level-1[1].docs %}
-            {% for d in site.data.docs %}
-            {% assign doc = site.docs | where: "slug", d.page | first %}
-            {% if doc %}
-            <li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
-               <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
-                  <span class="nav-text">
-                     {{ doc.title }}
+         {% if level-1[1].docs %}
+         {% for d in site.data.docs %}
+         {% assign doc = site.docs | where: "slug", d.page | first %}
+         {% if doc %}
+         <li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
+            <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
+               <span class="nav-text">
+                  {{ doc.title }}
 
-                     {% if doc.new %}
-                     <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
-                     {% endif %}
-                  </span>
-               </a>
-            </li>
-            {% endif %}
-            {% endfor %}
-            {% endif %}
+                  {% if doc.new %}
+                  <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
+                  {% endif %}
+               </span>
+            </a>
+         </li>
+         {% endif %}
+         {% endfor %}
+         {% endif %}
 
-            {% for level-2 in level-1[1].children %}
-            <li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}">
-               <a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
-                  <span class="nav-text">
-                     {{ level-2[1].title }}
-                     {% if level-2[1].label %}
-                        <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
-                     {% endif %}
-                  </span>
-               </a>
-               {% if level-2[1].children %}
-               <div class="navbar-subnav collapse" id="sidebar-{{ level-2[0] }}">
-                  <ul class="nav nav-sm flex-column">
-                     {% for level-3 in level-2[1].children %}
-                     <li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
-                        <a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
-                           <span class="nav-text">
-                              {{ level-3[1].title }}
-                              {% if level-3[1].label %}
-                                 <span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
-                              {% endif %}
-                           </span>
-                        </a>
-
-                        {% if level-3[1].children %}
-                        <div class="navbar-subnav collapse" id="sidebar-{{ level-3[0] }}">
-                           <ul class="nav nav-sm flex-column">
-                              {% for level-4 in level-3[1].children %}
-                              <li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
-                                 <a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
-                                    <span class="nav-text">
-                                       {{ level-4[1].title }}
-                                       {% if level-4[1].label %}
-                                          <span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
-                                       {% endif %}
-                                    </span>
-                                 </a>
-                              </li>
-                              {% endfor %}
-                           </ul>
-                        </div>
+         {% for level-2 in level-1[1].children %}
+         <li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}{% if level-2[1].children %} dropdown{% endif %}">
+            <a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
+               <span class="nav-text">
+                  {{ level-2[1].title }}
+                  {% if level-2[1].label %}
+                     <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
+                  {% endif %}
+               </span>
+            </a>
+            {% if level-2[1].children %}
+            <ul class="dropdown-menu">
+               {% for level-3 in level-2[1].children %}
+               <li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
+                  <a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
+                     <span class="nav-text">
+                        {{ level-3[1].title }}
+                        {% if level-3[1].label %}
+                           <span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
                         {% endif %}
-                     </li>
-                     {% endfor %}
-                  </ul>
-               </div>
-               {% endif %}
-            </li>
-            {% endfor %}
-         </ul>
-      </div>
+                     </span>
+                  </a>
+
+                  {% if level-3[1].children %}
+                  <div class="navbar-subnav collapse">
+                     <ul class="nav nav-sm flex-column">
+                        {% for level-4 in level-3[1].children %}
+                        <li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
+                           <a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
+                              <span class="nav-text">
+                                 {{ level-4[1].title }}
+                                 {% if level-4[1].label %}
+                                    <span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
+                                 {% endif %}
+                              </span>
+                           </a>
+                        </li>
+                        {% endfor %}
+                     </ul>
+                  </div>
+                  {% endif %}
+               </li>
+               {% endfor %}
+            </ul>
+            {% endif %}
+         </li>
+         {% endfor %}
+      </ul>
       {% endif %}
    </li>
    {% endfor %}
diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss
index fe2d7aa83..55362ae9f 100644
--- a/scss/ui/_dropdowns.scss
+++ b/scss/ui/_dropdowns.scss
@@ -1,6 +1,7 @@
 .dropdown-menu {
   min-width: 12rem;
   box-shadow: $box-shadow;
+  user-select: none;
 
   .icon {
     width: 1em;