diff --git a/core/core.services.yml b/core/core.services.yml
index 10afc668fc..dd269e9f37 100644
--- a/core/core.services.yml
+++ b/core/core.services.yml
@@ -1070,6 +1070,11 @@ services:
     arguments: ['@title_resolver', '@renderer']
     tags:
       - { name: render.main_content_renderer, format: drupal_dialog.off_canvas }
+  main_content_renderer.off_canvas_side:
+    class: Drupal\Core\Render\MainContent\OffCanvasRenderer
+    arguments: ['@title_resolver', '@renderer', 'side']
+    tags:
+      - { name: render.main_content_renderer, format: drupal_dialog.off_canvas_side }
   main_content_renderer.off_canvas_top:
     class: Drupal\Core\Render\MainContent\OffCanvasRenderer
     arguments: ['@title_resolver', '@renderer', 'top']
diff --git a/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php b/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php
index c2c4c6dc93..42260f52d7 100644
--- a/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php
@@ -23,8 +23,10 @@ class OffCanvasDialogTest extends BrowserTestBase {
 
   /**
    * Test sending AJAX requests to open and manipulate off-canvas dialog.
+   *
+   * @dataProvider dialogPosition
    */
-  public function testDialog() {
+  public function testDialog($position) {
     // Ensure the elements render without notices or exceptions.
     $this->drupalGet('ajax-test/dialog');
 
@@ -45,9 +47,9 @@ public function testDialog() {
           'resizable' => 'w',
           'draggable' => FALSE,
           'drupalAutoButtons' => FALSE,
-          'drupalOffCanvasPosition' => 'side',
+          'drupalOffCanvasPosition' => $position ?: 'side',
           'buttons' => [],
-          'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-side',
+          'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . ($position ?: 'side'),
           'width' => 300,
         ],
       'effect' => 'fade',
@@ -55,9 +57,21 @@ public function testDialog() {
     ];
 
     // Emulate going to the JS version of the page and check the JSON response.
-    $ajax_result = $this->drupalGet('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog.off_canvas']]);
+    $wrapper_format = $position ? 'drupal_dialog.off_canvas_' . $position : 'drupal_dialog.off_canvas';
+    $ajax_result = $this->drupalGet('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => $wrapper_format]]);
     $ajax_result = Json::decode($ajax_result);
     $this->assertEqual($off_canvas_expected_response, $ajax_result[3], 'off-canvas dialog JSON response matches.');
   }
 
+  /**
+   * @return array
+   */
+  public static function dialogPosition(){
+    return [
+      [NULL],
+      ['side'],
+      ['top'],
+    ];
+  }
+
 }
diff --git a/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
index 5cfdb64fc9..20655d9a4e 100644
--- a/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -13,9 +13,11 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase {
 
   /**
    * @covers ::render
+   *
+   * @dataProvider dialogPosition
    */
-  public function testRender() {
-    $command = new OpenOffCanvasDialogCommand('Title', '<p>Text!</p>', ['url' => 'example']);
+  public function testRender($position) {
+    $command = new OpenOffCanvasDialogCommand('Title', '<p>Text!</p>', ['url' => 'example'], NULL, $position);
 
     $expected = [
       'command' => 'openDialog',
@@ -31,9 +33,9 @@ public function testRender() {
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
         'buttons' => [],
-        'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-side',
+        'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . $position,
         'width' => 300,
-        'drupalOffCanvasPosition' => 'side',
+        'drupalOffCanvasPosition' => $position,
       ],
       'effect' => 'fade',
       'speed' => 1000,
@@ -41,4 +43,14 @@ public function testRender() {
     $this->assertEquals($expected, $command->render());
   }
 
+  /**
+   * @return array
+   */
+  public static function dialogPosition(){
+    return [
+      ['side'],
+      ['top'],
+    ];
+  }
+
 }