diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module
index b7e8ef2..eb1dc83 100644
--- a/core/modules/contextual/contextual.module
+++ b/core/modules/contextual/contextual.module
@@ -31,7 +31,7 @@ function contextual_toolbar() {
       ),
     ),
     '#wrapper_attributes' => array(
-      'class' => array('hidden', 'contextual-toolbar-tab'),
+      'class' => array('hidden', 'js-contextual-toolbar-tab', 'contextual-toolbar-tab'),
     ),
     '#attached' => array(
       'library' => array(
diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.js
index 4641890..850e918 100644
--- a/core/modules/contextual/js/contextual.toolbar.js
+++ b/core/modules/contextual/js/contextual.toolbar.js
@@ -35,7 +35,7 @@
     });
 
     var viewOptions = {
-      el: $('.toolbar .toolbar-bar .contextual-toolbar-tab'),
+      el: $('.js-toolbar .js-toolbar-bar .js-contextual-toolbar-tab'),
       model: model,
       strings: strings
     };
diff --git a/core/modules/contextual/js/toolbar/views/AuralView.js b/core/modules/contextual/js/toolbar/views/AuralView.js
index 38f7363..a52201a 100644
--- a/core/modules/contextual/js/toolbar/views/AuralView.js
+++ b/core/modules/contextual/js/toolbar/views/AuralView.js
@@ -54,7 +54,7 @@
       }
       // Create a new tabbing context when edit mode is enabled.
       if (!this.model.get('isViewing')) {
-        tabbingContext = Drupal.tabbingManager.constrain($('.contextual-toolbar-tab, .contextual'));
+        tabbingContext = Drupal.tabbingManager.constrain($('.js-contextual-toolbar-tab, .contextual'));
         this.model.set('tabbingContext', tabbingContext);
         this.announceTabbingConstraint();
         this.announcedOnce = true;
diff --git a/core/modules/shortcut/src/Tests/ShortcutTranslationUITest.php b/core/modules/shortcut/src/Tests/ShortcutTranslationUITest.php
index 9f81cb5..01ab5ae 100644
--- a/core/modules/shortcut/src/Tests/ShortcutTranslationUITest.php
+++ b/core/modules/shortcut/src/Tests/ShortcutTranslationUITest.php
@@ -73,7 +73,7 @@ protected function doTestBasicTranslation() {
         $this->drupalGet('<front>', array('language' => $language));
         $expected_path = \Drupal::urlGenerator()->generateFromRoute('user.page', array(), array('language' => $language));
         $label = $entity->getTranslation($langcode)->label();
-        $elements = $this->xpath('//nav[contains(@class, "toolbar-lining")]/ul[@class="menu"]/li/a[contains(@href, :href) and normalize-space(text())=:label]', array(':href' => $expected_path, ':label' => $label));
+        $elements = $this->xpath('//nav[contains(@class, "js-toolbar-lining")]/ul[@class="menu"]/li/a[contains(@href, :href) and normalize-space(text())=:label]', array(':href' => $expected_path, ':label' => $label));
         $this->assertTrue(!empty($elements), format_string('Translated @language shortcut link @label found.', array('@label' => $label, '@language' => $language->getName())));
       }
     }
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 6378592..98bc379 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -231,12 +231,12 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
  */
 /* Hide the orientation toggle when the configured narrow breakpoint is not
  * active. */
-.toolbar .toolbar-tray .toolbar-toggle-orientation {
+.toolbar .toolbar-tray .js-toolbar-toggle-orientation {
   display: none;
 }
 /* Show the orientation toggle when the configured narrow breakpoint is
  * active. */
-.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
+.toolbar-oriented .toolbar-tray .js-toolbar-toggle-orientation {
   display: block;
 }
 .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js
index 0544a40..3510985 100644
--- a/core/modules/toolbar/js/escapeAdmin.js
+++ b/core/modules/toolbar/js/escapeAdmin.js
@@ -35,7 +35,7 @@
         else {
           $toolbarEscape.text(Drupal.t('Home'));
         }
-        $toolbarEscape.closest('.toolbar-tab').removeClass('hidden');
+        $toolbarEscape.closest('.js-toolbar-tab').removeClass('hidden');
       }
     }
   };
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index dcfbb2a..c93e2e6 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -43,7 +43,7 @@
         return;
       }
       // Process the administrative toolbar.
-      $(context).find('#toolbar-administration').once('toolbar', function () {
+      $(context).find('#toolbar-administration').once('js-toolbar', function () {
 
         // Establish the toolbar models and views.
         var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
@@ -68,7 +68,7 @@
         // Render collapsible menus.
         var menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel();
         Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
-          el: $(this).find('.toolbar-menu-administration').get(0),
+          el: $(this).find('.js-toolbar-menu-administration').get(0),
           model: menuModel,
           strings: options.strings
         });
@@ -129,7 +129,7 @@
         // not the first 'Home' toolbar tab).
         if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
           Drupal.toolbar.models.toolbarModel.set({
-            'activeTab': $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0)
+            'activeTab': $('.js-toolbar-bar .js-toolbar-tab:not(.js-home-toolbar-tab) a').get(0)
           });
         }
       });
@@ -205,7 +205,7 @@
    *   A string representing a DOM fragment.
    */
   Drupal.theme.toolbarOrientationToggle = function () {
-    return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
+    return '<div class="js-toolbar-toggle-orientation toolbar-toggle-orientation"><div class="js-toolbar-lining toolbar-lining">' +
       '<button class="toolbar-icon" type="button"></button>' +
       '</div></div>';
   };
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index c14d0d4..d48ed2e 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -52,7 +52,7 @@
       if (!Drupal.toolbar.models.toolbarModel.get('isFixed')) {
         Drupal.toolbar.models.toolbarModel.set('activeTab', null);
       }
-      // Stopping propagation to make sure that once a toolbar-box is clicked
+      // Stopping propagation to make sure that once a js-toolbar-box is clicked
       // (the whitespace part), the page is not redirected anymore.
       event.stopPropagation();
     }
@@ -68,7 +68,7 @@
      *   simply toggling its presence.
      */
     function toggleList($item, switcher) {
-      var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
+      var $toggle = $item.children('.js-toolbar-box').children('.toolbar-handle');
       switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
       // Toggle the item open state.
       $item.toggleClass('open', switcher);
@@ -86,7 +86,7 @@
      *
      * Items with sub-elements have a list toggle attached to them. Menu item
      * links and the corresponding list toggle are wrapped with in a div
-     * classed with .toolbar-box. The .toolbar-box div provides a positioning
+     * classed with .toolbar-box. The .js-toolbar-box div provides a positioning
      * context for the item list toggle.
      *
      * @param {jQuery} $menu
@@ -99,14 +99,14 @@
         'text': ''
       };
       // Initialize items and their links.
-      $menu.find('li > a').wrap('<div class="toolbar-box">');
+      $menu.find('li > a').wrap('<div class="js-toolbar-box toolbar-box">');
       // Add a handle to each list item if it has a menu.
       $menu.find('li').each(function (index, element) {
         var $item = $(element);
         if ($item.children('ul.menu').length) {
-          var $box = $item.children('.toolbar-box');
+          var $box = $item.children('.js-toolbar-box');
           options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
-          $item.children('.toolbar-box')
+          $item.children('.js-toolbar-box')
             .append(Drupal.theme('toolbarMenuItemToggle', options));
         }
       });
@@ -156,8 +156,8 @@
 
     // Bind event handlers.
     $(document)
-      .on('click.toolbar', '.toolbar-box', toggleClickHandler)
-      .on('click.toolbar', '.toolbar-box a', linkClickHandler);
+      .on('click.toolbar', '.js-toolbar-box', toggleClickHandler)
+      .on('click.toolbar', '.js-toolbar-box a', linkClickHandler);
 
     // Return the jQuery object.
     return this.each(function (selector) {
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index aaccf17..0909ef0 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -20,10 +20,10 @@
       };
 
       return {
-        'click .toolbar-bar .toolbar-tab': 'onTabClick',
-        'click .toolbar-toggle-orientation button': 'onOrientationToggleClick',
-        'touchend .toolbar-bar .toolbar-tab': touchEndToClick,
-        'touchend .toolbar-toggle-orientation button': touchEndToClick
+        'click .js-toolbar-bar .js-toolbar-tab': 'onTabClick',
+        'click .js-toolbar-toggle-orientation button': 'onOrientationToggleClick',
+        'touchend .js-toolbar-bar .js-toolbar-tab': touchEndToClick,
+        'touchend .js-toolbar-toggle-orientation button': touchEndToClick
       };
     },
 
@@ -39,7 +39,7 @@
 
       // Add the tray orientation toggles.
       this.$el
-        .find('.toolbar-tray .toolbar-lining')
+        .find('.js-toolbar-tray .js-toolbar-lining')
         .append(Drupal.theme('toolbarOrientationToggle'));
 
       // Trigger an activeTab change so that listening scripts can respond on
@@ -154,7 +154,7 @@
           localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
         }
         // Activate the associated tray.
-        var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray');
+        var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].js-toolbar-tray');
         if ($tray.length) {
           $tray.addClass('active');
           this.model.set('activeTray', $tray.get(0));
@@ -177,10 +177,10 @@
     updateBarAttributes: function () {
       var isOriented = this.model.get('isOriented');
       if (isOriented) {
-        this.$el.find('.toolbar-bar').attr('data-offset-top', '');
+        this.$el.find('.js-toolbar-bar').attr('data-offset-top', '');
       }
       else {
-        this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
+        this.$el.find('.js-toolbar-bar').removeAttr('data-offset-top');
       }
       // Toggle between a basic vertical view and a more sophisticated
       // horizontal and vertical display of the toolbar bar and trays.
@@ -196,14 +196,14 @@
       // the tray orientation toggle.
       var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
       // Update the orientation of the trays.
-      var $trays = this.$el.find('.toolbar-tray')
+      var $trays = this.$el.find('.js-toolbar-tray')
         .removeClass('toolbar-tray-horizontal toolbar-tray-vertical')
         .addClass('toolbar-tray-' + orientation);
 
       // Update the tray orientation toggle button.
       var iconClass = 'toolbar-icon-toggle-' + orientation;
       var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation;
-      var $orientationToggle = this.$el.find('.toolbar-toggle-orientation')
+      var $orientationToggle = this.$el.find('.js-toolbar-toggle-orientation')
         .toggle(this.model.get('isTrayToggleVisible'));
       $orientationToggle.find('button')
         .val(antiOrientation)
@@ -227,7 +227,7 @@
      * Sets the tops of the trays so that they align with the bottom of the bar.
      */
     adjustPlacement: function () {
-      var $trays = this.$el.find('.toolbar-tray');
+      var $trays = this.$el.find('.js-toolbar-tray');
       if (!this.model.get('isOriented')) {
         $trays.css('padding-top', 0);
         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
@@ -235,7 +235,7 @@
       else {
         // The toolbar container is invisible. Its placement is used to
         // determine the container for the trays.
-        $trays.css('padding-top', this.$el.find('.toolbar-bar').outerHeight());
+        $trays.css('padding-top', this.$el.find('.js-toolbar-bar').outerHeight());
       }
     },
 
diff --git a/core/modules/toolbar/src/Element/ToolbarItem.php b/core/modules/toolbar/src/Element/ToolbarItem.php
index 929dac4..ca406df 100644
--- a/core/modules/toolbar/src/Element/ToolbarItem.php
+++ b/core/modules/toolbar/src/Element/ToolbarItem.php
@@ -83,6 +83,7 @@ public static function preRenderToolbarItem($element) {
       }
       $element['tray']['#wrapper_attributes'] += $attributes;
       $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray';
+      $element['tray']['#wrapper_attributes']['class'][] = 'js-toolbar-tray';
     }
 
     $element['tab']['#attributes']['class'][] = 'toolbar-item';
diff --git a/core/modules/toolbar/templates/toolbar.html.twig b/core/modules/toolbar/templates/toolbar.html.twig
index 30e61ea..0f02930 100644
--- a/core/modules/toolbar/templates/toolbar.html.twig
+++ b/core/modules/toolbar/templates/toolbar.html.twig
@@ -23,20 +23,20 @@
  */
 #}
 <div{{ attributes.addClass('toolbar') }}>
-  <nav{{ toolbar_attributes.addClass('toolbar-bar') }}>
+  <nav{{ toolbar_attributes.addClass('js-toolbar-bar', 'toolbar-bar') }}>
     <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
     {% for tab in tabs %}
-      <div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
+      <div{{ tab.attributes.addClass('js-toolbar-tab','toolbar-tab') }}>{{ tab.link }}</div>
     {% endfor %}
   </nav>
   {% for tray in trays %}
     {% spaceless %}
     <div{{ tray.attributes }}>
     {% if tray.label %}
-      <nav class="toolbar-lining" role="navigation" aria-label="{{ tray.label }}">
+      <nav class="js-toolbar-lining toolbar-lining" role="navigation" aria-label="{{ tray.label }}">
           <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
     {% else %}
-      <nav class="toolbar-lining" role="navigation">
+      <nav class="js-toolbar-lining toolbar-lining" role="navigation">
     {% endif %}
         {{ tray.links }}
       </nav>
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index 50704d0..10cd8ce 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -133,7 +133,7 @@ function toolbar_toolbar() {
       ),
     ),
     '#wrapper_attributes' => array(
-      'class' => array('hidden', 'home-toolbar-tab'),
+      'class' => array('hidden', 'js-home-toolbar-tab'),
     ),
     '#attached' => array(
       'library' => array(
@@ -182,7 +182,7 @@ function toolbar_toolbar() {
         ),
         '#type' => 'container',
         '#attributes' => array(
-          'class' => array('toolbar-menu-administration'),
+          'class' => array('js-toolbar-menu-administration', 'toolbar-menu-administration'),
         ),
       ),
     ),
diff --git a/core/themes/classy/templates/navigation/toolbar.html.twig b/core/themes/classy/templates/navigation/toolbar.html.twig
index 5d2737d..5bd6f76 100644
--- a/core/themes/classy/templates/navigation/toolbar.html.twig
+++ b/core/themes/classy/templates/navigation/toolbar.html.twig
@@ -22,21 +22,21 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes.addClass('toolbar') }}>
-  <nav{{ toolbar_attributes.addClass('toolbar-bar', 'clearfix') }}>
+<div{{ attributes.addClass('js-toolbar', 'toolbar') }}>
+  <nav{{ toolbar_attributes.addClass('js-toolbar-bar','toolbar-bar', 'clearfix') }}>
     <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
     {% for tab in tabs %}
-      <div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
+      <div{{ tab.attributes.addClass('js-toolbar-tab', 'toolbar-tab') }}>{{ tab.link }}</div>
     {% endfor %}
   </nav>
   {% for tray in trays %}
     {% spaceless %}
     <div{{ tray.attributes }}>
     {% if tray.label %}
-      <nav class="toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
+      <nav class="js-toolbar-lining toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
           <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
     {% else %}
-      <nav class="toolbar-lining clearfix" role="navigation">
+      <nav class="js-toolbar-lining toolbar-lining clearfix" role="navigation">
     {% endif %}
         {{ tray.links }}
       </nav>