diff --git a/backend/app/assets/javascripts/spree/backend/components/tabs.coffee b/backend/app/assets/javascripts/spree/backend/components/tabs.coffee
deleted file mode 100644
index d26626d5d9c..00000000000
--- a/backend/app/assets/javascripts/spree/backend/components/tabs.coffee
+++ /dev/null
@@ -1,79 +0,0 @@
-class Tabs
-  constructor: (@el) ->
-    @$tabList = $(@el)
-    @$tabs = @$tabList.find("li:not(.tabs-dropdown)")
-    @tabs = @$tabs.toArray()
-    @$tabList.append("<li class='tabs-dropdown'><a href='#'></a><ul></ul></li>")
-    @$dropdown = @$tabList.find(".tabs-dropdown")
-    @setWidths()
-    @initEvents()
-
-  initEvents: ->
-    $(window).on "resize", @overflowTabs
-    @overflowTabs()
-
-  setWidths: ->
-    @tabWidths = @tabs.map (tab) ->
-      tab.offsetWidth
-    @totalTabsWidth = @tabWidths.reduce (previousValue, currentValue) ->
-      previousValue + currentValue
-
-  overflowTabs: =>
-    containerWidth = @$tabList[0].offsetWidth
-    @lastKnownWidth = containerWidth unless @lastKnownWidth
-    widthDifference = @totalTabsWidth - containerWidth
-    widthDifferenceWithDropdown = widthDifference + @dropdownWidth()
-    dropdownActive = @$dropdown.find("li").length
-
-    if containerWidth <= @lastKnownWidth
-      # The window is being sized down or we've just loaded the page
-      if (dropdownActive and widthDifferenceWithDropdown > 0) or (not dropdownActive and widthDifference > 0)
-        @hideTabsToFit(widthDifferenceWithDropdown)
-    if containerWidth > @lastKnownWidth
-      # The window is getting larger
-      @showTabsToFit(widthDifference)
-
-    @lastKnownWidth = containerWidth
-
-  dropdownWidth: ->
-    # If the dropdown isn't initiated we need to provide
-    # our best guess of the size it will take up
-    @$dropdown[0].offsetWidth or 50
-
-  hideTabsToFit: (widthDifference) ->
-    @$tabList.addClass("tabs-overflowed")
-    tabs = @tabs.slice().reverse()
-
-    for tab in tabs
-      # Bail if things are now fitting
-      return if widthDifference <= 0
-      # Skip items already in the dropdown or active
-      continue if $(tab).hasClass("in-dropdown") or $(tab).hasClass("active")
-
-      tabWidth = tab.offsetWidth
-      @totalTabsWidth -= tabWidth
-      widthDifference -= tabWidth
-      $(tab).appendTo(@$dropdown.find("ul")).addClass("in-dropdown")
-
-  showTabsToFit: (widthDifference) ->
-    for tab, i in @tabs.slice()
-      # Skip items that aren't already in the dropdown
-      continue unless $(tab).hasClass("in-dropdown")
-
-      # Get our tab's width from the array
-      # We can't measure it here because it's hidden in the dropdown
-      tabWidth = @tabWidths[i]
-
-      # Bail if there's no room for this tab
-      break if widthDifference + tabWidth > 0
-
-      @totalTabsWidth += tabWidth
-      widthDifference += tabWidth
-      $(tab).insertBefore(@$dropdown).removeClass("in-dropdown")
-
-    # Reset styles if our dropdown is now empty
-    if @$dropdown.find("li").length is 0
-      @$tabList.removeClass("tabs-overflowed")
-
-window.onload = ->
-  new Tabs(el) for el in $(".tabs")
diff --git a/backend/app/assets/javascripts/spree/backend/components/tabs.js b/backend/app/assets/javascripts/spree/backend/components/tabs.js
new file mode 100644
index 00000000000..03dd6a8f327
--- /dev/null
+++ b/backend/app/assets/javascripts/spree/backend/components/tabs.js
@@ -0,0 +1,67 @@
+/* global Tabs */
+
+Tabs = (function() {
+  function Tabs(el) {
+    _.bindAll(this, 'overflowTabs');
+
+    this.el = el;
+    this.tabs = this.el.querySelectorAll("li:not(.tabs-dropdown)")
+
+    /* <li class='tabs-dropdown'><a href='#'></a><ul></ul></li> */
+    this.dropdown = document.createElement('li');
+    this.dropdown.classList.add('tabs-dropdown');
+    this.dropdown.appendChild(document.createElement('a'));
+    this.dropdownList = document.createElement('ul');
+    this.dropdown.appendChild(this.dropdownList);
+
+    this.el.appendChild(this.dropdown);
+
+    this.tabWidths = _.map(this.tabs, function(tab) {
+      return tab.offsetWidth;
+    });
+    this.totalTabsWidth = this.tabWidths.reduce(function(previousValue, currentValue) {
+      return previousValue + currentValue;
+    });
+
+    window.addEventListener("resize", this.overflowTabs);
+    this.overflowTabs();
+  }
+
+  Tabs.prototype.overflowTabs = function() {
+    var containerWidth = this.el.offsetWidth;
+    var dropdownWidth = this.dropdown.offsetWidth;
+
+    for (var i = 0; i < this.tabs.length; i++) {
+      var tab = this.tabs[i];
+      tab.parentNode.removeChild(tab);
+    }
+
+    if (this.totalTabsWidth < containerWidth) {
+      this.el.classList.remove("tabs-overflowed");
+    } else {
+      this.el.classList.add("tabs-overflowed");
+      remainingWidth -= dropdownWidth;
+    }
+
+    var remainingWidth = containerWidth;
+    for (var i = 0; i < this.tabs.length; i++) {
+      remainingWidth -= this.tabWidths[i];
+      var tab = this.tabs[i];
+      if (remainingWidth >= 0) {
+        tab.classList.remove("in-dropdown");
+        this.el.insertBefore(tab, this.dropdown);
+      } else {
+        tab.classList.add("in-dropdown");
+        this.dropdownList.appendChild(tab);
+      }
+    }
+  };
+
+  return Tabs;
+})();
+
+window.addEventListener('load', function() {
+  _.each(document.querySelectorAll('.tabs'), function(el) {
+    new Tabs(el);
+  });
+});
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss b/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss
index 4ac47f6487b..42ca820de7c 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss
@@ -64,7 +64,7 @@
   position: relative;
 
   .tabs:not(.tabs-overflowed) & {
-    display: none;
+    visibility: hidden;
   }
 
   > a {