diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee
index 484a223ca..85c367069 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.coffee
@@ -1619,6 +1619,14 @@ App.Config.set( 'layout_ref/calendar_subscriptions', CalendarSubscriptionsRef, '
 
 class ButtonsRef extends App.ControllerContent
 
+  elements:
+    '.js-submitDropdown': 'buttonDropdown'
+
+  events:
+    'click .js-openDropdown':        'toggleMenu'
+    'mouseenter .js-dropdownAction': 'onActionMouseEnter'
+    'mouseleave .js-dropdownAction': 'onActionMouseLeave'
+
   constructor: ->
     super
     @render()
@@ -1626,6 +1634,24 @@ class ButtonsRef extends App.ControllerContent
   render: ->
     @html App.view('layout_ref/buttons')
 
+  toggleMenu: =>
+    if @buttonDropdown.hasClass('is-open')
+      @closeMenu()
+      return
+    @openMenu()
+
+  closeMenu: =>
+    @buttonDropdown.removeClass 'is-open'
+
+  openMenu: =>
+    @buttonDropdown.addClass 'is-open'
+
+  onActionMouseEnter: (e) =>
+    @$(e.currentTarget).addClass('is-active')
+
+  onActionMouseLeave: (e) =>
+    @$(e.currentTarget).removeClass('is-active')
+
 App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' )
 
 class MergeCustomerRef extends App.ControllerContent
diff --git a/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco b/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco
index fb71fbb69..5561ebab8 100644
--- a/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/buttons.jst.eco
@@ -55,4 +55,33 @@
     <div class="btn btn--action btn--split">Split</div>
     <div class="btn btn--action btn--split--last">Split Last</div>
   </div>
+
+  <h3>Dropdown</h3>
+
+  <div class="buttonDropdown dropup js-submitDropdown" style="margin-left: 0px;">
+    <button class="btn btn--primary btn--split--first js-submit">Dropdown UP</button>
+    <button class="btn btn--primary btn--slim btn--split--last js-openDropdown">
+      <svg class="icon icon-arrow-up "><use xlink:href="assets/images/icons.svg#icon-arrow-up"></use></svg>
+    </button>
+    <ul class="dropdown-menu dropdown-menu" role="menu" aria-labelledby="userAction" style="min-width: 195px;">
+        <li class="js-dropdownAction" role="menuitem" data-id="1">Value 1</li>
+        <li class="js-dropdownAction" role="menuitem" data-id="2">Value 2</li>
+        <li class="js-dropdownAction" role="menuitem" data-id="3">Value 3</li>
+    </ul>
+  </div>
+
+  <br>
+
+  <div class="buttonDropdown dropdown js-submitDropdownDown" style="margin-left: 0px;">
+    <button class="btn btn--primary btn--split--first js-submit">Dropdown Down</button>
+    <button class="btn btn--primary btn--slim btn--split--last js-openDropdownDown">
+      <svg class="icon icon-arrow-up "><use xlink:href="assets/images/icons.svg#icon-arrow-down"></use></svg>
+    </button>
+    <ul class="dropdown-menu dropdown-menu" role="menu" aria-labelledby="userAction" style="min-width: 195px;">
+        <li class="js-dropdownActionDown" role="menuitem" data-id="1">Value 1</li>
+        <li class="js-dropdownActionDown" role="menuitem" data-id="2">Value 2</li>
+        <li class="js-dropdownActionDown" role="menuitem" data-id="3">Value 3</li>
+    </ul>
+  </div>
+
 </div>
\ No newline at end of file