diff --git a/examples.module b/examples.module
index 1333b6e..3661516 100644
--- a/examples.module
+++ b/examples.module
@@ -59,6 +59,7 @@ function examples_toolbar() {
     'queue_example' => 'queue_example',
     'tablesort_example' => 'tablesort_example_description',
     'tour_example' => 'tour_example_description',
+    'vertical_tabs_example' => 'vertical_tabs_example.description',
   );
 
   // Build a list of links for the menu.
diff --git a/vertical_tabs_example/js/vertical_tabs_example.js b/vertical_tabs_example/js/vertical_tabs_example.js
new file mode 100644
index 0000000..6ca3e12
--- /dev/null
+++ b/vertical_tabs_example/js/vertical_tabs_example.js
@@ -0,0 +1,26 @@
+/**
+ * @file
+ */
+
+(function ($) {
+  /**
+  * Update the summary for the module's vertical tab.
+  */
+  Drupal.behaviors.vertical_tabs_exampleFieldsetSummaries = {
+    attach: function (context) {
+    // Use the details class to identify the vertical tab element.
+    $('#edit-vertical-tabs-example', context).drupalSetSummary(function (context) {
+      // Depending on the checkbox status, the settings will be customized,
+      // so update the summary with the custom setting textfield string or a
+      // use a default string.
+      if ($('#edit-vertical-tabs-example-enabled', context).prop('checked')) {
+        return Drupal.checkPlain($('#edit-vertical-tabs-example-custom-setting', context).val());
+      }
+      else {
+        return Drupal.t('Using default');
+      }
+    });
+   }
+  };
+
+})(jQuery);
diff --git a/vertical_tabs_example/src/Controller/VerticalTabsExampleController.php b/vertical_tabs_example/src/Controller/VerticalTabsExampleController.php
new file mode 100644
index 0000000..0a14bbc
--- /dev/null
+++ b/vertical_tabs_example/src/Controller/VerticalTabsExampleController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Drupal\vertical_tabs_example\Controller;
+
+use Drupal\examples\Utility\DescriptionTemplateTrait;
+
+/**
+ * Class VerticalTabsExampleController.
+ *
+ * @package Drupal\vertical_tabs_example\Controller
+ */
+class VerticalTabsExampleController {
+
+  use DescriptionTemplateTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function getModuleName() {
+    return 'vertical_tabs_example';
+  }
+
+}
diff --git a/vertical_tabs_example/templates/description.html.twig b/vertical_tabs_example/templates/description.html.twig
new file mode 100644
index 0000000..083113e
--- /dev/null
+++ b/vertical_tabs_example/templates/description.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+* @file
+* Contains description of vertical_tabs_example page.
+*/
+#}
+
+{% set content_url = path('node.add_page') %}
+
+{% trans %}
+<p>The Vertical Tabs Example shows how a custom module can add a vertical tab to
+  a node edit form and update its summary field with JavaScript.</p>
+<p>To see the effects of this module, <a href= {{ content_url }}>add a piece of
+  content</a> and look at the set of tabs beside. </p>
+<p>Note that this behavior won't work with the "Seven" administration theme that
+  is enabled by default. You'll need to change the administration theme to be
+  another one.</p>
+{% endtrans %}
diff --git a/vertical_tabs_example/tests/src/Functional/VerticalTabsExampleTest.php b/vertical_tabs_example/tests/src/Functional/VerticalTabsExampleTest.php
new file mode 100644
index 0000000..9f7288f
--- /dev/null
+++ b/vertical_tabs_example/tests/src/Functional/VerticalTabsExampleTest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace Drupal\Tests\vertical_tabs_example\Functional;
+
+use Drupal\Tests\BrowserTestBase;
+
+/**
+ * Functional tests for the Vertical Tabs Example module.
+ *
+ * @ingroup vertical_tabs_examples
+ *
+ * @group vertical_tabs_examples
+ * @group examples
+ */
+class VerticalTabsExampleTest extends BrowserTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = ['vertical_tabs_example'];
+
+  /**
+   * Tests the menu paths defined in vertical_tabs_example module.
+   */
+  public function testVerticalTabsExampleMenus() {
+    $web_assert = $this->assertSession();
+    // Verify links on front-page.
+    $this->drupalGet('examples/vertical_tabs');
+    $web_assert->statusCodeEquals(200);
+    $web_assert->linkByHrefExists('node/add');
+    // Verify vertical tab on node/add/article.
+    $web_user = $this->drupalCreateUser([
+      'access content',
+      'access administration pages',
+      'administer content types',
+    ]);
+    $this->drupalLogin($web_user);
+    $contentTypeName = strtolower($this->randomMachineName(10));
+    $this->drupalGet('admin/structure/types/add');
+    $edit = [
+      'name' => $contentTypeName,
+      'type' => $contentTypeName,
+    ];
+    $this->drupalPostForm(NULL, $edit, t('Save content type'));
+    $web_assert->pageTextContains(t('The content type @name has been added.', ['@name' => $contentTypeName]));
+    $this->drupalGet('node/add/' . $contentTypeName);
+    $this->assertNotNull($this->xpath("//details[@id='edit-vertical-tabs-example']"));
+  }
+
+}
diff --git a/vertical_tabs_example/vertical_tabs_example.info.yml b/vertical_tabs_example/vertical_tabs_example.info.yml
new file mode 100644
index 0000000..8cc15d2
--- /dev/null
+++ b/vertical_tabs_example/vertical_tabs_example.info.yml
@@ -0,0 +1,8 @@
+name: 'Vertical tabs example'
+type: module
+description: 'Show how to use vertical tabs for enhancing user experience.'
+package: Example modules
+core: 8.x
+dependencies:
+  - drupal:node
+  - examples:examples
diff --git a/vertical_tabs_example/vertical_tabs_example.libraries.yml b/vertical_tabs_example/vertical_tabs_example.libraries.yml
new file mode 100644
index 0000000..d665e15
--- /dev/null
+++ b/vertical_tabs_example/vertical_tabs_example.libraries.yml
@@ -0,0 +1,8 @@
+# Build up our dependencies as a library.
+vertical_tabs_example:
+  version: 1.x
+  # Adding our js file.
+  js:
+    js/vertical_tabs_example.js: {}
+  dependencies:
+    - core/jquery
diff --git a/vertical_tabs_example/vertical_tabs_example.links.menu.yml b/vertical_tabs_example/vertical_tabs_example.links.menu.yml
new file mode 100644
index 0000000..3efc834
--- /dev/null
+++ b/vertical_tabs_example/vertical_tabs_example.links.menu.yml
@@ -0,0 +1,3 @@
+vertical_tabs_example.description:
+  title: Virtual Tabs Example
+  route_name: vertical_tabs_example.description
diff --git a/vertical_tabs_example/vertical_tabs_example.module b/vertical_tabs_example/vertical_tabs_example.module
new file mode 100644
index 0000000..72292c0
--- /dev/null
+++ b/vertical_tabs_example/vertical_tabs_example.module
@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * @file
+ * Module file for vertical_tabs_example module.
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Implements hook_form_alter().
+ */
+function vertical_tabs_example_form_node_form_alter(array &$form, FormStateInterface $form_state) {
+  // Vertical tabs provide its most usable appearance when they are used to
+  // include a summary of the information contained in the details. To do this,
+  // we attach additional JavaScript to handle changing the summary when form
+  // settings are changed.
+  $form['#attached']['library'][] = 'vertical_tabs_example/vertical_tabs_example';
+  // Create a details field that will be included in the vertical tab.
+  $form['vertical_tabs_example'] = [
+    '#type' => 'details',
+    '#title' => t('Example vertical tab'),
+    '#collapsible' => TRUE,
+    '#open' => FALSE,
+    '#tree' => TRUE,
+    // Send this tab to the top of the list.
+    '#weight' => -99,
+    // The #group value must match the name of the vertical tabs element.
+    // In most cases, this is 'additional_settings'.
+    '#group' => 'advanced',
+  ];
+
+  // The form elements below provide a demonstration of how a details
+  // summary can be displayed in a collapsed tab.
+  //
+  // This checkbox is used to show or hide the custom settings form using
+  // javascript (altering states of a container defined later).
+  $form['vertical_tabs_example']['enabled'] = [
+    '#type' => 'checkbox',
+    '#title' => t('Change this setting'),
+    '#default_value' => FALSE,
+  ];
+
+  // This container will be used to store the whole form for our custom
+  // settings. This way, showing/hiding the form using JavaScript is easier,
+  // as only one element should be set visible.
+  $form['vertical_tabs_example']['vertical_tabs_examplecontainer'] = [
+    '#type' => 'container',
+    '#parents' => ['vertical_tabs_example'],
+    '#states' => [
+      'invisible' => [
+          // If the checkbox is not enabled, show the container.
+        'input[name="vertical_tabs_example[enabled]"]' => ['checked' => FALSE],
+      ],
+    ],
+  ];
+
+  // The string of this textfield will be shown as summary in the vertical
+  // tab.
+  $form['vertical_tabs_example']['vertical_tabs_examplecontainer']['custom_setting'] = [
+    '#type' => 'textfield',
+    '#title' => t('Use this setting instead'),
+    '#default_value' => 'I am a setting with a summary',
+    '#description' => t('As you type into this field, the summary will be updated in the tab.'),
+  ];
+}
diff --git a/vertical_tabs_example/vertical_tabs_example.routing.yml b/vertical_tabs_example/vertical_tabs_example.routing.yml
new file mode 100644
index 0000000..6903256
--- /dev/null
+++ b/vertical_tabs_example/vertical_tabs_example.routing.yml
@@ -0,0 +1,7 @@
+vertical_tabs_example.description:
+  path: 'examples/vertical_tabs'
+  defaults:
+    _controller: '\Drupal\vertical_tabs_example\Controller\VerticalTabsExampleController::description'
+    _title: 'Vertical tabs example'
+  requirements:
+    _access: 'TRUE'