diff --git a/core/modules/toolbar/templates/toolbar-item.html.twig b/core/modules/toolbar/templates/toolbar-item.html.twig
new file mode 100644
index 0000000..262507a
--- /dev/null
+++ b/core/modules/toolbar/templates/toolbar-item.html.twig
@@ -0,0 +1,13 @@
+{#
+/**
+ * Default theme implementation for a toolbar item (tab).
+ *
+ * Available variables:
+ * - item: The content of the toolbar tab, or NULL if empty.
+ *
+ * @see template_preprocess_toolbar_item()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ item }}
\ No newline at end of file
diff --git a/core/modules/toolbar/templates/toolbar-tab-wrapper.html.twig b/core/modules/toolbar/templates/toolbar-tab-wrapper.html.twig
new file mode 100644
index 0000000..6f2ec7c
--- /dev/null
+++ b/core/modules/toolbar/templates/toolbar-tab-wrapper.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * Default theme implementation for a toolbar tab wrapper.
+ *
+ * Toolbar tabs have a common styling and placement with the toolbar's bar area.
+ *
+ * Available variables:
+ * - children: The content of the toolbar tab, or NULL if empty.
+ * - wrapper_attributes: An array of HTML attributes to apply to the wrapper
+ *   or NULL if children is empty.
+ *
+ * @see template_preprocess_toolbar_tab_wrapper()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if children %}
+  <div{{ wrapper_attributes }}>{{ children }}</div>
+{% endif %}
\ No newline at end of file
diff --git a/core/modules/toolbar/templates/toolbar-tray-heading-wrapper.html.twig b/core/modules/toolbar/templates/toolbar-tray-heading-wrapper.html.twig
new file mode 100644
index 0000000..08ba5b5
--- /dev/null
+++ b/core/modules/toolbar/templates/toolbar-tray-heading-wrapper.html.twig
@@ -0,0 +1,17 @@
+{#
+/**
+ * Default theme implementation for a toolbar tray heading wrapper.
+ *
+ * Available variables:
+ * - heading_label: The toolbar tray heading label, or NULL if empty.
+ * - children: The children of the toolbar tray heading, or NULL if empty.
+ *
+ * @see template_preprocess_toolbar_tray_heading_wrapper()
+ *
+ * @ingroup themeable
+ */
+#}
+<h3 class="element-invisible">{{ heading_label }}</h3>
+{% if children %}
+  {{ children }}
+{% endif %}
diff --git a/core/modules/toolbar/templates/toolbar-tray-wrapper.html.twig b/core/modules/toolbar/templates/toolbar-tray-wrapper.html.twig
new file mode 100644
index 0000000..89ac692
--- /dev/null
+++ b/core/modules/toolbar/templates/toolbar-tray-wrapper.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * Default theme implementation for a toolbar tray wrapper.
+ *
+ * Available variables:
+ * - item: The content of the toolbar tab, or NULL if empty.
+ *
+ * Available variables:
+ * - children: The content of the toolbar tray, or NULL if empty.
+ * - wrapper_attributes: An array of HTML attributes to apply to the wrapper
+ *   or NULL if children is empty.
+ *
+ * @see template_preprocess_toolbar_tray_wrapper()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if children %}
+  {% spaceless %}
+  <div{{ wrapper_attributes }}>
+    <div class="lining clearfix">
+      {{ children }}
+    </div>
+  </div>
+  {% endspaceless %}
+{% endif %}
diff --git a/core/modules/toolbar/templates/toolbar.html.twig b/core/modules/toolbar/templates/toolbar.html.twig
new file mode 100644
index 0000000..e10d861
--- /dev/null
+++ b/core/modules/toolbar/templates/toolbar.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * Default theme implementation for the administrative toolbar.
+ *
+ * Available variables:
+ * - wrapper_attributes: An array of HTML attributes to apply to the wrapper.
+ * - toolbar_attributes: An array of HTML attributes to apply to the toolbar.
+ * - toolbar_heading: The heading or label for the toolbar.
+ * - children: An array of renderable items (tabs) for the toolbar.
+ * - trays: An array of renderable toolbar trays, each associated with a tab.
+ *
+ * @see template_preprocess_toolbar()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if children %}
+  <nav{{ wrapper_attributes }}>
+    <div{{ toolbar_attributes }}>
+      <h2 class="element-invisible">{{ toolbar_heading }}</h2>
+      {{ children }}
+    </div>
+    {{ trays }}
+  </nav>
+{% endif %}
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index e4996bc..a776d68 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -42,18 +42,23 @@ function toolbar_permission() {
 function toolbar_theme($existing, $type, $theme, $path) {
   $items['toolbar'] = array(
     'render element' => 'element',
+    'template' => 'toolbar',
   );
   $items['toolbar_item'] = array(
     'render element' => 'element',
+    'template' => 'toolbar-item',
   );
   $items['toolbar_tab_wrapper'] = array(
     'render element' => 'element',
+    'template' => 'toolbar-tab-wrapper',
   );
   $items['toolbar_tray_wrapper'] = array(
     'render element' => 'element',
+    'template' => 'toolbar-tray-wrapper',
   );
   $items['toolbar_tray_heading_wrapper'] = array(
     'render element' => 'element',
+    'template' => 'toolbar-tray-heading-wrapper',
   );
   return $items;
 }
@@ -248,24 +253,30 @@ function ($object) {
 }
 
 /**
- * Returns HTML that wraps the administration toolbar.
+ * Prepares variables for the administration toolbar.
  *
  * @param array $variables
  *   An associative array containing:
  *   - element: An associative array containing the properties and children of
  *     the tray. Properties used: #children, #attributes and #bar.
+ *
+ * @see toolbar.html.twig
+ *
+ * @ingroup themeable
  */
-function theme_toolbar(&$variables) {
+function template_preprocess_toolbar(&$variables) {
   if (!empty($variables['element']['#children'])) {
     $element = $variables['element'];
-    $trays = '';
+    $variables['wrapper_attributes'] = new Attribute($element['#attributes']);
+    $variables['toolbar_attributes'] = new Attribute($element['#bar']['#attributes']);
+    $variables['toolbar_heading'] = $element['#bar']['#heading'];
+    $variables['children'] = $element['#children'];
+    $variables['trays'] = array();
     foreach (element_children($element) as $key) {
-      $trays .= drupal_render($element[$key]['tray']);
+      if (isset($element[$key]['tray'])) {
+        $variables['trays'][$key] = $element[$key]['tray'];
+      }
     }
-    return '<nav' . new Attribute($element['#attributes']) . '>'
-      . '<div' . new Attribute($element['#bar']['#attributes']) . '>'
-      . '<h2 class="element-invisible">' . $element['#bar']['#heading'] . '</h2>'
-      . $element['#children'] . '</div>' . $trays . '</nav>';
   }
 }
 
@@ -333,35 +344,26 @@ function toolbar_pre_render_item($element) {
 }
 
 /**
- * Implements template_preprocess_HOOK().
- */
-function template_preprocess_toolbar_tab_wrapper(&$variables) {
-  if (!isset($variables['element']['#wrapper_attributes'])) {
-    $variables['element']['#wrapper_attributes'] = array();
-  }
-  $variables['element']['#wrapper_attributes']['class'][] = 'tab';
-}
-
-/**
- * Returns HTML for a toolbar item.
+ * Prepares variables for toolbar-item.html.twig and variant templates.
  *
- * This theme function only renders the tab portion of the toolbar item. The
- * tray portion will be rendered later.
+ * Prepares the tab portion of the toolbar item. Tray portion is rendered later.
  *
  * @param array $variables
  *   An associative array containing:
  *   - element: An associative array containing the properties and children of
  *     the tray. Property used: tab.
  *
- * @see toolbar_pre_render_item().
- * @see theme_toolbar().
+ * @see toolbar_pre_render_item()
+ * @see toolbar-item.html.twig
+ *
+ * @ingroup themeable
  */
-function theme_toolbar_item(&$variables) {
-  return drupal_render($variables['element']['tab']);
+function template_preprocess_toolbar_item(&$variables) {
+  $variables['item'] = $variables['element']['tab'];
 }
 
 /**
- * Returns HTML for wrapping a toolbar tab.
+ * Prepares variables for toolbar-tab-wrapper.html.twig and variant templates.
  *
  * Toolbar tabs have a common styling and placement with the toolbar's bar area.
  *
@@ -369,18 +371,27 @@ function theme_toolbar_item(&$variables) {
  *   An associative array containing:
  *   - element: An associative array containing the properties and children of
  *     the tray. Properties used: #children and #attributes.
+ *
+ * @see toolbar-tab-wrapper.html.twig
+ *
+ * @ingroup themeable
  */
-function theme_toolbar_tab_wrapper(&$variables) {
+function template_preprocess_toolbar_tab_wrapper(&$variables) {
+  $variables['wrapper_attributes'] = $variables['children'] = NULL;
   if (!empty($variables['element']['#children'])) {
-    $element = $variables['element'];
-    return '<div' . new Attribute($element['#wrapper_attributes']) . '>' . $element['#children'] . '</div>';
+    if (!isset($variables['element']['#wrapper_attributes'])) {
+      $variables['element']['#wrapper_attributes'] = array();
+    }
+    $variables['element']['#wrapper_attributes']['class'][] = 'tab';
+    $variables['wrapper_attributes'] = new Attribute($variables['element']['#wrapper_attributes']);
+    $variables['children'] = $variables['element']['#children'];
   }
 }
 
 /**
- * Returns HTML for wrapping a toolbar tray.
+ * Prepares variables for toolbar-tray-wrapper.html.twig and variant templates.
  *
- * Used in combination with theme_toolbar_tab() to create an
+ * Used in combination with template_preprocess_toolbar_tab() to create an
  * association between a link tag in the administration bar and a tray.
  *
  * @param array $variables
@@ -388,26 +399,34 @@ function theme_toolbar_tab_wrapper(&$variables) {
  *   - element: An associative array containing the properties and children of
  *     the tray. Properties used: #children, #toolbar_identifier and
  *     #attributes.
+ *
+ * @see toolbar-tray-wrapper.html.twig
+ *
+ * @ingroup themeable
  */
-function theme_toolbar_tray_wrapper(&$variables) {
+function template_preprocess_toolbar_tray_wrapper(&$variables) {
+  $variables['wrapper_attributes'] = $variables['children'] = NULL;
   if (!empty($variables['element']['#children'])) {
     $element = $variables['element'];
-    return '<div' . new Attribute($element['#wrapper_attributes']) . '><div class="lining clearfix">' . $element['#children'] . '</div></div>';
+    $variables['wrapper_attributes'] = new Attribute($element['#wrapper_attributes']);
+    $variables['children'] = $element['#children'];
   }
 }
 
 /**
- * Returns HTML for prepending a heading to a toolbar tray.
+ * Prepares variables for prepending a heading to a toolbar tray.
  *
  * @param array $variables
  *   An associative array containing:
  *   - element: An associative array containing the properties and children of
  *     the tray. Properties used: #children and #heading.
  */
-function theme_toolbar_tray_heading_wrapper(&$variables) {
+function template_preprocess_toolbar_tray_heading_wrapper(&$variables) {
+  $variables['heading_label'] = $variables['children'] = NULL;
   if (!empty($variables['element']['#children'])) {
     $element = $variables['element'];
-    return '<h3 class="element-invisible">' . $element['#heading'] . '</h3>' . $element['#children'];
+    $variables['heading_label'] = $element['#heading'];
+    $variables['children'] = $element['#children'];
   }
 }