diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json
index 59dd510bc3c..ee87cf52c26 100644
--- a/packages/patternfly-4/react-core/package.json
+++ b/packages/patternfly-4/react-core/package.json
@@ -27,7 +27,8 @@
   "dependencies": {
     "@patternfly/react-icons": "^2.5.2",
     "@patternfly/react-styles": "^2.3.0",
-    "exenv": "^1.2.2"
+    "exenv": "^1.2.2",
+    "focus-trap-react": "^4.0.1"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
index 9bfebad9426..db2bd591259 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
@@ -2,6 +2,7 @@ import React, { Children, cloneElement } from 'react';
 import styles from '@patternfly/patternfly-next/components/Dropdown/dropdown.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
+import FocusTrap from 'focus-trap-react';
 import DropdownMenu from './DropdownMenu';
 
 export const DropdownPosition = {
@@ -71,9 +72,13 @@ class Dropdown extends React.Component {
         }}
       >
         {toggle && Children.map(toggle, oneToggle => cloneElement(oneToggle, { parentRef: this.parentRef, isOpen }))}
-        <DropdownMenu isOpen={isOpen} aria-labelledby={id} onClick={event => onSelect && onSelect(event)}>
-          {children}
-        </DropdownMenu>
+        {isOpen && (
+          <FocusTrap>
+            <DropdownMenu isOpen={isOpen} aria-labelledby={id} onClick={event => onSelect && onSelect(event)}>
+              {children}
+            </DropdownMenu>
+          </FocusTrap>
+        )}
       </div>
     );
   }
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
index 47f56da1984..8ee662c7d90 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styles from '@patternfly/patternfly-next/components/Dropdown/dropdown.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
+import { KEY_CODES } from '../../internal/constants';
 
 const propTypes = {
   /** Anything which can be rendered as dropdown toggle */
@@ -51,8 +52,9 @@ class DropdownToggle extends Component {
   };
 
   onEscPress = event => {
+    const { parentRef } = this.props;
     const keyCode = event.keyCode || event.which;
-    if (keyCode === 27) {
+    if (keyCode === KEY_CODES.ESCAPE_KEY && parentRef && parentRef.contains(event.target)) {
       this.props.onToggle && this.props.onToggle(false);
       this.toggle.focus();
     }
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
index 18414f78194..8e5897bbc80 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -13,34 +13,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-top.pf-m-align-right {
   display: inline-block;
   position: relative;
@@ -122,149 +94,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         </button>
       </DropdownToggle>
     </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -282,34 +111,6 @@ exports[`KebabToggle dropup 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-top {
   display: inline-block;
   position: relative;
@@ -391,149 +192,6 @@ exports[`KebabToggle dropup 1`] = `
         </button>
       </DropdownToggle>
     </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -660,149 +318,159 @@ exports[`KebabToggle expanded 1`] = `
         </button>
       </DropdownToggle>
     </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={true}
-      onClick={[Function]}
+    <FocusTrap
+      _createFocusTrap={[Function]}
+      active={true}
+      focusTrapOptions={Object {}}
+      paused={false}
+      tag="div"
     >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={false}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
+      <div>
+        <DropdownMenu
+          aria-labelledby="Dropdown"
+          className=""
+          isOpen={true}
+          onClick={[Function]}
+        >
+          <div
+            aria-labelledby="Dropdown"
+            className="pf-c-dropdown__menu"
+            hidden={false}
+            onClick={[Function]}
+            role="menu"
+          >
+            <DropItems>
+              <DropdownItem
+                className=""
+                component="a"
                 href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <a
+                  aria-disabled={false}
+                  className=""
+                  href="#"
+                  role="menuitem"
+                >
+                  Link
+                </a>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="button"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <button
+                  className=""
+                  disabled={false}
+                  href="#"
+                  role="menuitem"
+                >
+                  Action
+                </button>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="a"
+                href="#"
+                isDisabled={true}
+                isHovered={false}
+                role="menuitem"
+              >
+                <a
+                  aria-disabled={true}
+                  className="pf-m-disabled"
+                  href="#"
+                  role="menuitem"
+                  tabIndex={-1}
+                >
+                  Disabled Link
+                </a>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="button"
+                href="#"
+                isDisabled={true}
+                isHovered={false}
+                role="menuitem"
+              >
+                <button
+                  className="pf-m-disabled"
+                  disabled={true}
+                  href="#"
+                  role="menuitem"
+                >
+                  Disabled Action
+                </button>
+              </DropdownItem>
+              <Separator
+                className=""
+                component="a"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <DropdownItem
+                  className="pf-c-dropdown__separator"
+                  component="div"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  role="separator"
+                >
+                  <div
+                    className="pf-c-dropdown__separator"
+                    href="#"
+                    role="separator"
+                  />
+                </DropdownItem>
+              </Separator>
+              <DropdownItem
+                className=""
+                component="a"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <a
+                  aria-disabled={false}
+                  className=""
+                  href="#"
+                  role="menuitem"
+                >
+                  Separated Link
+                </a>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="button"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <button
+                  className=""
+                  disabled={false}
+                  href="#"
+                  role="menuitem"
+                >
+                  Separated Action
+                </button>
+              </DropdownItem>
+            </DropItems>
+          </div>
+        </DropdownMenu>
       </div>
-    </DropdownMenu>
+    </FocusTrap>
   </div>
 </Dropdown>
 `;
@@ -820,34 +488,6 @@ exports[`KebabToggle plain 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-plain {
   display: inline-block;
   position: relative;
@@ -929,149 +569,6 @@ exports[`KebabToggle plain 1`] = `
         </button>
       </DropdownToggle>
     </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -1089,34 +586,6 @@ exports[`KebabToggle regular 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown {
   display: inline-block;
   position: relative;
@@ -1198,149 +667,6 @@ exports[`KebabToggle regular 1`] = `
         </button>
       </DropdownToggle>
     </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -1358,34 +684,6 @@ exports[`KebabToggle right aligned 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-align-right {
   display: inline-block;
   position: relative;
@@ -1467,149 +765,6 @@ exports[`KebabToggle right aligned 1`] = `
         </button>
       </DropdownToggle>
     </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -1633,34 +788,6 @@ exports[`dropdown dropup + right aligned 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-top.pf-m-align-right {
   display: inline-block;
   position: relative;
@@ -1743,149 +870,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         </button>
       </DropdownToggle>
     </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -1909,34 +893,6 @@ exports[`dropdown dropup 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-top {
   display: inline-block;
   position: relative;
@@ -2019,149 +975,6 @@ exports[`dropdown dropup 1`] = `
         </button>
       </DropdownToggle>
     </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -2295,149 +1108,159 @@ exports[`dropdown expanded 1`] = `
         </button>
       </DropdownToggle>
     </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={true}
-      onClick={[Function]}
+    <FocusTrap
+      _createFocusTrap={[Function]}
+      active={true}
+      focusTrapOptions={Object {}}
+      paused={false}
+      tag="div"
     >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={false}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
+      <div>
+        <DropdownMenu
+          aria-labelledby="Dropdown"
+          className=""
+          isOpen={true}
+          onClick={[Function]}
+        >
+          <div
+            aria-labelledby="Dropdown"
+            className="pf-c-dropdown__menu"
+            hidden={false}
+            onClick={[Function]}
+            role="menu"
+          >
+            <DropItems>
+              <DropdownItem
+                className=""
+                component="a"
                 href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <a
+                  aria-disabled={false}
+                  className=""
+                  href="#"
+                  role="menuitem"
+                >
+                  Link
+                </a>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="button"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <button
+                  className=""
+                  disabled={false}
+                  href="#"
+                  role="menuitem"
+                >
+                  Action
+                </button>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="a"
+                href="#"
+                isDisabled={true}
+                isHovered={false}
+                role="menuitem"
+              >
+                <a
+                  aria-disabled={true}
+                  className="pf-m-disabled"
+                  href="#"
+                  role="menuitem"
+                  tabIndex={-1}
+                >
+                  Disabled Link
+                </a>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="button"
+                href="#"
+                isDisabled={true}
+                isHovered={false}
+                role="menuitem"
+              >
+                <button
+                  className="pf-m-disabled"
+                  disabled={true}
+                  href="#"
+                  role="menuitem"
+                >
+                  Disabled Action
+                </button>
+              </DropdownItem>
+              <Separator
+                className=""
+                component="a"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <DropdownItem
+                  className="pf-c-dropdown__separator"
+                  component="div"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  role="separator"
+                >
+                  <div
+                    className="pf-c-dropdown__separator"
+                    href="#"
+                    role="separator"
+                  />
+                </DropdownItem>
+              </Separator>
+              <DropdownItem
+                className=""
+                component="a"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <a
+                  aria-disabled={false}
+                  className=""
+                  href="#"
+                  role="menuitem"
+                >
+                  Separated Link
+                </a>
+              </DropdownItem>
+              <DropdownItem
+                className=""
+                component="button"
+                href="#"
+                isDisabled={false}
+                isHovered={false}
+                role="menuitem"
+              >
+                <button
+                  className=""
+                  disabled={false}
+                  href="#"
+                  role="menuitem"
+                >
+                  Separated Action
+                </button>
+              </DropdownItem>
+            </DropItems>
+          </div>
+        </DropdownMenu>
       </div>
-    </DropdownMenu>
+    </FocusTrap>
   </div>
 </Dropdown>
 `;
@@ -2461,34 +1284,6 @@ exports[`dropdown regular 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown {
   display: inline-block;
   position: relative;
@@ -2571,149 +1366,6 @@ exports[`dropdown regular 1`] = `
         </button>
       </DropdownToggle>
     </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
@@ -2737,34 +1389,6 @@ exports[`dropdown right aligned 1`] = `
   color: #282d33;
   background-color: transparent;
 }
-.pf-m-disabled {
-  display: block;
-}
-.pf-m-disabled {
-  display: block;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__separator {
-  display: block;
-  height: 1px;
-  background-color: #ededed;
-}
-.pf-c-dropdown__menu {
-  display: block;
-  position: absolute;
-  z-index: 100;
-  min-width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background: #ffffff;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
-}
 .pf-c-dropdown.pf-m-align-right {
   display: inline-block;
   position: relative;
@@ -2847,149 +1471,6 @@ exports[`dropdown right aligned 1`] = `
         </button>
       </DropdownToggle>
     </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown"
-      className=""
-      isOpen={false}
-      onClick={[Function]}
-    >
-      <div
-        aria-labelledby="Dropdown"
-        className="pf-c-dropdown__menu"
-        hidden={true}
-        onClick={[Function]}
-        role="menu"
-      >
-        <DropItems>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Action
-            </button>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-m-disabled"
-              href="#"
-              role="menuitem"
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={true}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className="pf-m-disabled"
-              disabled={true}
-              href="#"
-              role="menuitem"
-            >
-              Disabled Action
-            </button>
-          </DropdownItem>
-          <Separator
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <DropdownItem
-              className="pf-c-dropdown__separator"
-              component="div"
-              href="#"
-              isDisabled={false}
-              isHovered={false}
-              role="separator"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                role="separator"
-              />
-            </DropdownItem>
-          </Separator>
-          <DropdownItem
-            className=""
-            component="a"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <a
-              aria-disabled={false}
-              className=""
-              href="#"
-              role="menuitem"
-            >
-              Separated Link
-            </a>
-          </DropdownItem>
-          <DropdownItem
-            className=""
-            component="button"
-            href="#"
-            isDisabled={false}
-            isHovered={false}
-            role="menuitem"
-          >
-            <button
-              className=""
-              disabled={false}
-              href="#"
-              role="menuitem"
-            >
-              Separated Action
-            </button>
-          </DropdownItem>
-        </DropItems>
-      </div>
-    </DropdownMenu>
   </div>
 </Dropdown>
 `;
diff --git a/yarn.lock b/yarn.lock
index 3e04147cf70..421f8f1d9f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6271,6 +6271,19 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+focus-trap-react@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-4.0.1.tgz#3cffd39341df3b2f546a4a2fe94cfdea66154683"
+  dependencies:
+    focus-trap "^3.0.0"
+
+focus-trap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-3.0.0.tgz#4d2ee044ae66bf7eb6ebc6c93bd7a1039481d7dc"
+  dependencies:
+    tabbable "^3.1.0"
+    xtend "^4.0.1"
+
 follow-redirects@^1.0.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.0.tgz#234f49cf770b7f35b40e790f636ceba0c3a0ab77"
@@ -14406,6 +14419,10 @@ systemjs@^0.19.46:
   dependencies:
     when "^3.7.5"
 
+tabbable@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.1.tgz#db7512f28a9a1ed16e4275bd190131be9d5ad8e9"
+
 table-resolver@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/table-resolver/-/table-resolver-3.3.0.tgz#22e575d3c6aed15404ab71a0f2046c4ff55e556e"