Restore offset option for dropdown component

js/src/dropdown.js

@@ -289,6 +289,31 @@ class Dropdown extends BaseComponent {
     return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null
   }
 
+  _getOffset() {
+    let offset = [0, 0]
+
+    if (!this._config.offset) {
+      return offset
+    }
+
+    if (typeof this._config.offset === 'number') {
+      offset[0] = this._config.offset
+    } else if (typeof this._config.offset === 'string') {
+      offset = offset.split(',')
+      if (offset.length === 1) {
+        offset = [offset[0], 0]
+      }
+
+      offset = offset.map(val => Number.parseInt(val, 10))
+    } else if (typeof this._config.offset === 'function') {
+      offset = (popper, reference, placement) => {
+        return offset({ popper, reference, placement }, this._element)
+      }
+    }
+
+    return offset
+  }
+
   _getPopperConfig() {
     const popperConfig = {
       placement: this._getPlacement(),
@@ -304,6 +329,12 @@ class Dropdown extends BaseComponent {
         options: {
           fallbackPlacements: ['top', 'right', 'bottom', 'left']
         }
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: this._getOffset()
+        }
       }]
     }
 

site/content/docs/5.0/components/dropdowns.md

@@ -896,6 +896,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td><code>'dynamic'</code></td>
       <td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
     </tr>
+    <tr>
+      <td><code>offset</code></td>
+      <td>number | string | function</td>
+      <td><code>0</code></td>
+      <td>
+        <p>Offset of the dropdown relative to its target.</p>
+          <p>When a function is used to determine the offset, it is called with an object containing the popper offsets object data as its first argument. The function must return an array with two numbers: <code>[skidding, distance]</code>. The triggering element DOM node is passed as the second argument.</p>
+          <p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p>
+      </td>
+    </tr>
     <tr>
       <td><code>popperConfig</code></td>
       <td>null | object</td>