diff --git a/modules/system/assets/ui/docs/dropdown.md b/modules/system/assets/ui/docs/dropdown.md
index 993b12bf6..42932293e 100644
--- a/modules/system/assets/ui/docs/dropdown.md
+++ b/modules/system/assets/ui/docs/dropdown.md
@@ -2,15 +2,34 @@ Customized dropdown menu
 
 # Example
 
-<div class="dropdown">
-    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
-        Dropdown
-        <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
-    </ul>
-</div>
+
+    <div class="btn-group">
+        <div class="dropdown">
+            <a href="#" data-toggle="dropdown" class="btn btn-primary oc-icon-plus">Add small</a>
+
+            <ul class="dropdown-menu" role="menu" data-dropdown-title="Add something small">
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-folder-close">Group</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-copy">Page</a></li>
+            </ul>
+        </div>
+        <div class="dropdown">
+            <a href="#" data-toggle="dropdown" class="btn btn-primary oc-icon-plus">Add large</a>
+
+            <ul class="dropdown-menu" role="menu" data-dropdown-title="Add something large">
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-folder-close">Group</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-copy">Page</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-briefcase">Briefcase</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-link">Link</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-tag">Tag</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-zoom-out">Zoom out</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-briefcase">Briefcase</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-link">Link</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-tag">Tag</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-zoom-out">Zoom out</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-briefcase">Briefcase</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-link">Link</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-tag">Tag</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-zoom-out">Zoom out</a></li>
+            </ul>
+        </div>
+    </div>
diff --git a/modules/system/assets/ui/js/dropdown.js b/modules/system/assets/ui/js/dropdown.js
index bd2b13629..3f58a8956 100644
--- a/modules/system/assets/ui/js/dropdown.js
+++ b/modules/system/assets/ui/js/dropdown.js
@@ -1,3 +1,105 @@
 /*
 =require ../vendor/bootstrap/js/dropdown.js
 */
+/*
+ * Dropdown menus. 
+ *
+ * This script customizes the Twitter Bootstrap drop-downs.
+ *
+ */
++function ($) { "use strict";
+
+    $(document).on('shown.bs.dropdown', '.dropdown', function(){
+        $(document.body).addClass('dropdown-open')
+
+        var dropdown = $('.dropdown-menu', this),
+            dropdownContainer = $(this).data('dropdown-container')
+
+        if ($('.dropdown-container', dropdown).length == 0) {
+            var
+                title = $('[data-toggle=dropdown]', this).text(),
+                titleAttr = dropdown.data('dropdown-title'),
+                timer = null;
+
+            if (titleAttr !== undefined)
+                title = titleAttr
+
+            $('li:first-child', dropdown).addClass('first-item')
+            dropdown.prepend($('<li/>').addClass('dropdown-title').text(title))
+
+            var
+                container = $('<li/>').addClass('dropdown-container'),
+                ul = $('<ul/>')
+
+            container.prepend(ul)
+            ul.prepend(dropdown.children())
+            dropdown.prepend(container)
+
+            dropdown.on('touchstart', function(){
+                window.setTimeout(function(){
+                    dropdown.addClass('scroll')
+                }, 200)
+            })
+
+            dropdown.on('touchend', function(){
+                window.setTimeout(function(){
+                    dropdown.removeClass('scroll')
+                }, 200)
+            })
+
+            dropdown.on('click', 'a', function(){
+                if (dropdown.hasClass('scroll'))
+                    return false
+            })
+        }
+
+        if (dropdownContainer !== undefined && dropdownContainer == 'body') {
+            $(this).data('oc.dropdown', dropdown)
+            $(document.body).append(dropdown)
+
+            dropdown.css({
+                'visibility': 'hidden',
+                'left': 0,
+                'top' : 0,
+                'display': 'block'
+            })
+
+            var targetOffset = $(this).offset(),
+                targetHeight = $(this).height(),
+                targetWidth = $(this).width(),
+                position = {
+                    x: targetOffset.left,
+                    y: targetOffset.top + targetHeight
+                },
+                leftOffset = targetWidth < 30 ? -16 : 0,
+                documentHeight = $(document).height(),
+                dropdownHeight = dropdown.height()
+
+            if ((dropdownHeight + position.y) > $(document).height()) {
+                position.y = targetOffset.top - dropdownHeight - 12
+                dropdown.addClass('top')
+            } else
+                dropdown.removeClass('top')
+
+            dropdown.css({
+                'left': position.x + leftOffset,
+                'top': position.y,
+                'visibility': 'visible'
+            })
+        }
+
+        if ($('.dropdown-overlay', document.body).length == 0)
+            $(document.body).prepend($('<div/>').addClass('dropdown-overlay'));
+    })
+
+    $(document).on('hidden.bs.dropdown', '.dropdown', function(){
+        var dropdown = $(this).data('oc.dropdown')
+        if (dropdown !== undefined) {
+            dropdown.css('display', 'none')
+            $(this).append(dropdown)
+        }
+
+        $(document.body).removeClass('dropdown-open');
+    })
+
+}(window.jQuery);
\ No newline at end of file