diff --git a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
index 9e5725994b..78c406b3d8 100644
--- a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
@@ -44,6 +44,7 @@ public function __construct($title, $content, array $dialog_options = [], $setti
     $this->dialogOptions['resizable'] = 'w';
     $this->dialogOptions['draggable'] = FALSE;
     $this->dialogOptions['drupalAutoButtons'] = FALSE;
+    $this->dialogOptions['drupalOffCanvasPosition'] = $position;
     // @todo drupal.ajax.js does not respect drupalAutoButtons properly, pass an
     //   empty set of buttons until https://www.drupal.org/node/2793343 is in.
     $this->dialogOptions['buttons'] = [];
diff --git a/core/misc/dialog/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js
index 0068e44e1b..5058b72d8d 100644
--- a/core/misc/dialog/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas.es6.js
@@ -90,8 +90,7 @@
       $('body').removeClass('js-off-canvas-dialog-open');
       // Remove all *.off-canvas events
       Drupal.offCanvas.removeOffCanvasEvents($element);
-
-      Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
+      Drupal.offCanvas.resetPadding();
     },
 
     /**
@@ -171,8 +170,9 @@
       const offsets = displace.offsets;
       const $element = event.data.$element;
       const container = Drupal.offCanvas.getContainer($element);
+      const position = event.data.settings.drupalOffCanvasPosition;
 
-      const topPosition = (offsets.top !== 0 ? `+${offsets.top}` : '');
+      const topPosition = position === 'side' && offsets.top !== 0 ? `+${offsets.top}` : '';
       const adjustedOptions = {
         // @see http://api.jqueryui.com/position/
         position: {
@@ -182,9 +182,12 @@
         },
       };
 
+      const height = position === 'side' ? `${$(window).height() - (offsets.top + offsets.bottom)}px` : '300px';
+      const width = position === 'side' ? event.data.settings.width : '100%';
       container.css({
         position: 'fixed',
-        height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
+        height,
+        width,
       });
 
       $element
@@ -204,17 +207,25 @@
       if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
         return;
       }
+      Drupal.offCanvas.resetPadding();
       const $element = event.data.$element;
       const $container = Drupal.offCanvas.getContainer($element);
       const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
 
       const width = $container.outerWidth();
       const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`);
-      if (width !== mainCanvasPadding) {
+      if (event.data.settings.drupalOffCanvasPosition === 'side' && width !== mainCanvasPadding) {
         $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, `${width}px`);
         $container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
         displace();
       }
+
+      if (event.data.settings.drupalOffCanvasPosition === 'top') {
+        $('nav#toolbar-bar').css('margin-top', '300px');
+        $mainCanvasWrapper.css('padding-top', '300px');
+        $container.attr('data-offset-top', 300);
+        displace();
+      }
     },
 
     /**
@@ -238,6 +249,16 @@
     getEdge() {
       return document.documentElement.dir === 'rtl' ? 'left' : 'right';
     },
+
+    /**
+     * Reset main canvas wrapper and toolbar padding / margin.
+     */
+    resetPadding() {
+      Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
+      $('nav#toolbar-bar').css('margin-top', '0');
+      displace();
+    },
   };
 
   /**
diff --git a/core/misc/dialog/off-canvas.js b/core/misc/dialog/off-canvas.js
index 1de5f67565..1ac3158e9e 100644
--- a/core/misc/dialog/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -41,8 +41,7 @@
       $('body').removeClass('js-off-canvas-dialog-open');
 
       Drupal.offCanvas.removeOffCanvasEvents($element);
-
-      Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
+      Drupal.offCanvas.resetPadding();
     },
     afterCreate: function afterCreate(_ref3) {
       var $element = _ref3.$element,
@@ -82,8 +81,9 @@
       var offsets = displace.offsets;
       var $element = event.data.$element;
       var container = Drupal.offCanvas.getContainer($element);
+      var position = event.data.settings.drupalOffCanvasPosition;
 
-      var topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
+      var topPosition = position === 'side' && offsets.top !== 0 ? '+' + offsets.top : '';
       var adjustedOptions = {
         position: {
           my: Drupal.offCanvas.getEdge() + ' top',
@@ -92,9 +92,12 @@
         }
       };
 
+      var height = position === 'side' ? $(window).height() - (offsets.top + offsets.bottom) + 'px' : '300px';
+      var width = position === 'side' ? event.data.settings.width : '100%';
       container.css({
         position: 'fixed',
-        height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
+        height: height,
+        width: width
       });
 
       $element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
@@ -103,23 +106,37 @@
       if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
         return;
       }
+      Drupal.offCanvas.resetPadding();
       var $element = event.data.$element;
       var $container = Drupal.offCanvas.getContainer($element);
       var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
 
       var width = $container.outerWidth();
       var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
-      if (width !== mainCanvasPadding) {
+      if (event.data.settings.drupalOffCanvasPosition === 'side' && width !== mainCanvasPadding) {
         $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
         $container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
         displace();
       }
+
+      if (event.data.settings.drupalOffCanvasPosition === 'top') {
+        $('nav#toolbar-bar').css('margin-top', '300px');
+        $mainCanvasWrapper.css('padding-top', '300px');
+        $container.attr('data-offset-top', 300);
+        displace();
+      }
     },
     getContainer: function getContainer($element) {
       return $element.dialog('widget');
     },
     getEdge: function getEdge() {
       return document.documentElement.dir === 'rtl' ? 'left' : 'right';
+    },
+    resetPadding: function resetPadding() {
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
+      $('nav#toolbar-bar').css('margin-top', '0');
+      displace();
     }
   };