diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
index d44260b1b3d..28f857511df 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
@@ -1,24 +1,24 @@
 import * as React from 'react';
-import { DropdownItem, DropdownItemProps } from '../Dropdown';
+import { DropdownItem, DropdownItemProps } from '../../next/components/Dropdown';
 import { OverflowMenuContext } from './OverflowMenuContext';
 
-export interface OverflowMenuDropdownItemProps extends DropdownItemProps {
+export interface OverflowMenuDropdownItemProps extends Omit<DropdownItemProps, 'ref'> {
   /** Indicates when a dropdown item shows and hides the corresponding list item */
   isShared?: boolean;
-  /** Indicates the index of the list item */
-  index?: number;
+  /** Identifies the component in the dropdown onSelect callback */
+  itemId?: string | number;
 }
 
 export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropdownItemProps> = ({
   children,
   isShared = false,
-  index,
+  itemId,
   ...additionalProps
 }: OverflowMenuDropdownItemProps) => (
   <OverflowMenuContext.Consumer>
     {value =>
       (!isShared || value.isBelowBreakpoint) && (
-        <DropdownItem component="button" index={index} {...additionalProps}>
+        <DropdownItem component="button" itemId={itemId} {...additionalProps}>
           {children}
         </DropdownItem>
       )
diff --git a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx
index 49799c8747d..e3ecf91b55a 100644
--- a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx
+++ b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx
@@ -3,14 +3,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem';
-import { DropdownArrowContext } from '../../../Dropdown';
 
 describe('OverflowMenuDropdownItem', () => {
   it('should match snapshot', () => {
     const { asFragment } = render(
-      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
-        <OverflowMenuDropdownItem children={'any'} isShared={false} />
-      </DropdownArrowContext.Provider>
+        <OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />
     );
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
index 095afd9ab46..4fa128180ae 100644
--- a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
+++ b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
@@ -3,19 +3,27 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
+    class="pf-c-menu__list-item"
+    data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+    data-ouia-component-type="PF4/DropdownItem"
+    data-ouia-safe="true"
     role="none"
   >
     <button
-      aria-disabled="false"
-      class=""
-      data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-      data-ouia-component-type="PF4/DropdownItem"
-      data-ouia-safe="true"
+      class="pf-c-menu__item"
       role="menuitem"
       tabindex="-1"
       type="button"
     >
-      any
+      <span
+        class="pf-c-menu__item-main"
+      >
+        <span
+          class="pf-c-menu__item-text"
+        >
+          any
+        </span>
+      </span>
     </button>
   </li>
 </DocumentFragment>
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
index def06f678b9..616e9893291 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
@@ -9,13 +9,15 @@ propComponents:
     'OverflowMenuControl',
     'OverflowMenuDropdownItem',
     'OverflowMenuGroup',
-    'OverflowMenuItem',
+    'OverflowMenuItem'
   ]
 ---
 
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Examples
 
@@ -29,9 +31,11 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class SimpleOverflowMenu extends React.Component {
   constructor(props) {
@@ -39,12 +43,12 @@ class SimpleOverflowMenu extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -54,19 +58,19 @@ class SimpleOverflowMenu extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
         Item 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
         Item 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
         Item 3
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item4" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
         Item 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item5" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="item5" isShared>
         Item 5
       </OverflowMenuDropdownItem>
     ];
@@ -82,15 +86,28 @@ class SimpleOverflowMenu extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Simple example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -108,9 +125,13 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -121,12 +142,12 @@ class OverflowMenuGroupTypes extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -136,31 +157,31 @@ class OverflowMenuGroupTypes extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
         Item 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
         Item 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
         Item 3
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="primary" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="primary" isShared>
         Primary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="secondary" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="secondary" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="tertiary" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action1" isShared>
+      <OverflowMenuDropdownItem itemId={6} key="action1" isShared>
         Action 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action2" isShared>
+      <OverflowMenuDropdownItem itemId={7} key="action2" isShared>
         Action 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action3" isShared>
+      <OverflowMenuDropdownItem itemId={8} key="action3" isShared>
         Action 3
       </OverflowMenuDropdownItem>
     ];
@@ -202,15 +223,28 @@ class OverflowMenuGroupTypes extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Group example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -228,9 +262,13 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -241,12 +279,12 @@ class OverflowMenuAdditionalOptions extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -256,25 +294,27 @@ class OverflowMenuAdditionalOptions extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="1" isShared>
         Primary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="2" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="2" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="3" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="3" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="4" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="4" isShared>
         Action 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="5" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="5" isShared>
         Action 5
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="6" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="6" isShared>
         Action 6
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>
+      <OverflowMenuDropdownItem itemId={6} key="7">
+        Action 7
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -309,15 +349,28 @@ class OverflowMenuAdditionalOptions extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Multiple group example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -335,9 +388,13 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class OverflowMenuPersist extends React.Component {
   constructor(props) {
@@ -345,12 +402,12 @@ class OverflowMenuPersist extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event, itemId) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -360,13 +417,15 @@ class OverflowMenuPersist extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="secondary" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="secondary" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="tertiary" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action">Action 4</OverflowMenuDropdownItem>
+      <OverflowMenuDropdownItem itemId={2} key="action">
+        Action 4
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -384,15 +443,28 @@ class OverflowMenuPersist extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Persistent example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -407,4 +479,5 @@ By passing in the `breakpointReference` property, the overflow menu's breakpoint
 You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.
 
 ```ts file="./OverflowMenuBreakpointOnContainer.tsx"
+
 ```
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
index a8fd7513a14..75f231cb5bb 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
@@ -6,18 +6,19 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  Dropdown,
-  KebabToggle,
+  MenuToggle,
   Slider
 } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [containerWidth, setContainerWidth] = React.useState(100);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
   const onSelect = () => {
@@ -36,19 +37,19 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
   };
 
   const dropdownItems = [
-    <OverflowMenuDropdownItem key="item1" isShared>
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
       Item 1
     </OverflowMenuDropdownItem>,
-    <OverflowMenuDropdownItem key="item2" isShared>
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
       Item 2
     </OverflowMenuDropdownItem>,
-    <OverflowMenuDropdownItem key="item3" isShared>
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
       Item 3
     </OverflowMenuDropdownItem>,
-    <OverflowMenuDropdownItem key="item4" isShared>
+    <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
       Item 4
     </OverflowMenuDropdownItem>,
-    <OverflowMenuDropdownItem key="item5" isShared>
+    <OverflowMenuDropdownItem itemId={4} key="item5" isShared>
       Item 5
     </OverflowMenuDropdownItem>
   ];
@@ -83,15 +84,24 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl>
-            <Dropdown
+            <DropdownNext
               onSelect={onSelect}
-              toggle={<KebabToggle onToggle={onToggle} />}
+              toggle={toggleRef => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="Breakpoint on container example overflow menu"
+                  variant="plain"
+                  onClick={onToggle}
+                  isExpanded={isOpen}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              isFlipEnabled
-              menuAppendTo="parent"
-            />
+              onOpenChange={isOpen => setIsOpen(isOpen)}
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </DropdownNext>
           </OverflowMenuControl>
         </OverflowMenu>
       </div>
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 491f1e3503c..3ae904b69b6 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -10,6 +10,8 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index ef19b4b1ea7..1ab9f847903 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -2,19 +2,17 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
-  KebabToggle,
   Select,
   SelectOption,
   SelectOptionObject,
   SelectVariant,
   Pagination,
   Dropdown,
-  DropdownSeparator,
   DropdownToggle,
   DropdownToggleCheckbox,
   DropdownItem,
-  DropdownPosition,
   Divider,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
@@ -25,7 +23,9 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -52,8 +52,8 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
-  const onKebabToggle = (_event: any, isOpen: boolean) => {
-    setKebabIsOpen(isOpen);
+  const onKebabToggle = () => {
+    setKebabIsOpen(!kebabIsOpen);
   };
 
   const onResourceToggle = (_event: any, isExpanded: boolean) => {
@@ -65,7 +65,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setResourceIsExpanded(false);
   };
 
-  const onResourceSelectDropdown = (event: React.SyntheticEvent<HTMLDivElement, Event> | undefined) => {
+  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent>| undefined) => {
     setResourceSelected(event?.target);
     setResourceIsExpanded(false);
   };
@@ -101,21 +101,21 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemNext key="link">Link</DropdownItemNext>,
+    <DropdownItemNext key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemNext>,
+    <DropdownItemNext key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemNext>,
+    <DropdownItemNext key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    </DropdownItemNext>,
+    <Divider key="separator" />,
+    <DropdownItemNext key="separated link">Separated Link</DropdownItemNext>,
+    <DropdownItemNext key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemNext>
   ];
 
   const splitButtonDropdownItems = [
@@ -192,14 +192,23 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                 </OverflowMenuGroup>
               </OverflowMenuContent>
               <OverflowMenuControl hasAdditionalOptions>
-                <Dropdown
-                  onSelect={onResourceSelectDropdown}
-                  toggle={<KebabToggle onToggle={onKebabToggle} />}
-                  isOpen={kebabIsOpen}
-                  isPlain
-                  dropdownItems={dropdownItems}
-                  position={DropdownPosition.right}
-                />
+              <DropdownNext
+                   onSelect={onResourceSelectDropdown}
+                   toggle={toggleRef => (
+                     <MenuToggle
+                       ref={toggleRef}
+                       aria-label="Kebab overflow menu"
+                       variant="plain"
+                       onClick={onKebabToggle}
+                       isExpanded={kebabIsOpen}
+                     >
+                       <EllipsisVIcon />
+                     </MenuToggle>
+                   )}
+                   isOpen={kebabIsOpen}
+                 >
+                   <DropdownList>{dropdownItems}</DropdownList>
+                 </DropdownNext>
               </OverflowMenuControl>
             </OverflowMenu>
           </ToolbarItem>
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index 41a0bda9036..304fd36aab5 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -18,6 +18,9 @@ import sparkIcon from './camel-spark_200x150.png';
 import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Demos
 
@@ -49,6 +52,7 @@ import {
   EmptyStateActions,
   Gallery,
   KebabToggle,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
@@ -67,6 +71,8 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
@@ -120,9 +126,9 @@ class CardViewBasic extends React.Component {
       }));
     };
 
-    this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => {
+    this.onToolbarKebabDropdownToggle = () => {
       this.setState({
-        isLowerToolbarKebabDropdownOpen
+        isOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
     };
 
@@ -495,19 +501,19 @@ class CardViewBasic extends React.Component {
     } = this.state;
 
     const toolbarKebabDropdownItems = [
-      <OverflowMenuDropdownItem key="link">Link</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action" component="button">
+      <OverflowMenuDropdownItem itemId={0} key="link">Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={1} key="action" component="button">
         Action
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="disabled link" isDisabled>
+      <OverflowMenuDropdownItem itemId={2} key="disabled link" isDisabled>
         Disabled Link
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="disabled action" isDisabled component="button">
+      <OverflowMenuDropdownItem itemId={3} key="disabled action" isDisabled component="button">
         Disabled Action
       </OverflowMenuDropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <OverflowMenuDropdownItem key="separated link">Separated Link</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="separated action" component="button">
+      <DropdownSeparator itemId={4} key="separator" />,
+      <OverflowMenuDropdownItem itemId={5} key="separated link">Separated Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
         Separated Action
       </OverflowMenuDropdownItem>
     ];
@@ -522,15 +528,23 @@ class CardViewBasic extends React.Component {
               <Button variant="primary">Create a project</Button>
             </OverflowMenuItem>
             <OverflowMenuControl hasAdditionalOptions>
-              <Dropdown
+              <DropdownNext
                 onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="toggle-id-6" />}
+                toggle={toggleRef => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label="Toolbar kebab overflow menu"
+                    variant="plain"
+                    onClick={this.onToolbarKebabDropdownToggle}
+                    isExpanded={isLowerToolbarKebabDropdownOpen}
+                  >
+                    <EllipsisVIcon />
+                  </MenuToggle>
+                )}
                 isOpen={isLowerToolbarKebabDropdownOpen}
-                isPlain
-                dropdownItems={toolbarKebabDropdownItems}
-                isFlipEnabled
-                menuAppendTo="parent"
-              />
+              >
+                <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+              </DropdownNext>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index c6aeeae04be..12dfc92b295 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -11,6 +11,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+
 
 ## Demos
 
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index fc856f274f0..3962a1f56b9 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -11,12 +11,12 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
-  Dropdown,
   Flex,
   FlexItem,
   KebabToggle,
   Label,
   LabelGroup,
+  MenuToggle,
   OptionsMenu,
   OptionsMenuToggle,
   OverflowMenu,
@@ -52,6 +52,8 @@ import {
   ActionsColumn,
   CustomActionsToggleProps
 } from '@patternfly/react-table';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -186,13 +188,23 @@ export const TablesAndTabs = () => {
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl hasAdditionalOptions>
-            <Dropdown
+            <DropdownNext
               onSelect={() => {}}
-              toggle={<KebabToggle onToggle={() => {}} />}
+              toggle={toggleRef => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="overflow menu"
+                  variant="plain"
+                  onClick={() => {}}
+                  isExpanded={false}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={false}
-              isPlain
-              dropdownItems={[]}
-            />
+            >
+              <DropdownList>{[]}</DropdownList>
+            </DropdownNext>
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarContent>
diff --git a/packages/react-integration/cypress/integration/overflowmenu.spec.ts b/packages/react-integration/cypress/integration/overflowmenu.spec.ts
index 7e2e18bc784..35bb7fb4dea 100644
--- a/packages/react-integration/cypress/integration/overflowmenu.spec.ts
+++ b/packages/react-integration/cypress/integration/overflowmenu.spec.ts
@@ -26,14 +26,15 @@ describe('OverflowMenu Demo Test', () => {
       });
 
       it('Verify toggle dropdown', () => {
-        cy.get('#simple-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle');
+        cy.get('#simple-overflow-menu button').should('have.class', 'pf-c-menu-toggle');
       });
 
       it('Verify dropdown menu expanded', () => {
         cy.get('#simple-overflow-menu button')
           .last()
           .click({ force: true });
-        cy.get('#simple-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded');
+        cy.get('#simple-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded');
+        cy.get('#simple-overflow-menu .pf-c-menu').should('be.visible');
         // close overflow menu again
         cy.get('#simple-overflow-menu button')
           .last()
@@ -66,14 +67,15 @@ describe('OverflowMenu Demo Test', () => {
       });
 
       it('Verify toggle dropdown', () => {
-        cy.get('#additional-options-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle');
+        cy.get('#additional-options-overflow-menu button').should('have.class', 'pf-c-menu-toggle');
       });
 
       it('Verify dropdown menu expanded', () => {
         cy.get('#additional-options-overflow-menu button')
           .last()
           .click({ force: true });
-        cy.get('#additional-options-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded');
+        cy.get('#additional-options-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded');
+        cy.get('#additional-options-overflow-menu .pf-c-menu').should('be.visible');
       });
     });
   });
@@ -105,14 +107,15 @@ describe('OverflowMenu Demo Test', () => {
       });
 
       it('Verify toggle dropdown', () => {
-        cy.get('#persist-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle');
+        cy.get('#persist-overflow-menu button').should('have.class', 'pf-c-menu-toggle');
       });
 
       it('Verify dropdown menu expanded', () => {
         cy.get('#persist-overflow-menu button')
           .last()
           .click({ force: true });
-        cy.get('#persist-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded');
+        cy.get('#persist-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded');
+        cy.get('#persist-overflow-menu .pf-c-menu').should('be.visible');
       });
     });
   });
@@ -141,14 +144,15 @@ describe('OverflowMenu Demo Test', () => {
       });
 
       it('Verify toggle dropdown', () => {
-        cy.get('#container-breakpoint-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle');
+        cy.get('#container-breakpoint-overflow-menu button').should('have.class', 'pf-c-menu-toggle');
       });
 
       it('Verify dropdown menu expanded', () => {
         cy.get('#container-breakpoint-overflow-menu button')
           .last()
           .click({ force: true });
-        cy.get('#container-breakpoint-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded');
+        cy.get('#container-breakpoint-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded');
+        cy.get('#container-breakpoint-overflow-menu .pf-c-menu').should('be.visible');
         // close overflow menu again
         cy.get('#container-breakpoint-overflow-menu button')
           .last()
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
index 114f26fd270..b48f317a184 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
@@ -6,13 +6,15 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  Dropdown,
-  KebabToggle,
+  MenuToggle,
   Button
 } from '@patternfly/react-core';
+import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
 export class OverflowMenuDemo extends React.Component {
   static displayName = 'OverflowMenuDemo';
   state = {
@@ -29,14 +31,14 @@ export class OverflowMenuDemo extends React.Component {
     marginBottom: '2rem'
   };
 
-  onSimpleToggle = (_event: any, isSimpleOpen: boolean) => {
+  onSimpleToggle = (_event: any) => {
     this.setState({
-      isSimpleOpen
+      isSimpleOpen: !this.state.isSimpleOpen
     });
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onSimpleSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
+  onSimpleSelect = () => {
     this.setState({
       isSimpleOpen: !this.state.isSimpleOpen
     });
@@ -45,20 +47,22 @@ export class OverflowMenuDemo extends React.Component {
   renderSimpleOverflowMenu() {
     const { isSimpleOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="action">Action</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="action">
+        Action
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={1} key="item1" isShared>
         Item 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="item2" isShared>
         Item 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="item3" isShared>
         Item 3
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item4" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="item4" isShared>
         Item 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item5" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="item5" isShared>
         Item 5
       </OverflowMenuDropdownItem>
     ];
@@ -76,26 +80,34 @@ export class OverflowMenuDemo extends React.Component {
         <OverflowMenuControl>
           <Dropdown
             onSelect={this.onSimpleSelect}
-            toggle={<KebabToggle onToggle={this.onSimpleToggle} />}
+            toggle={toggleRef => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Simple example overflow menu"
+                variant="plain"
+                onClick={this.onSimpleToggle}
+                isExpanded={isSimpleOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isSimpleOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
   }
 
-  onAdditionalOptionsToggle = (_event: any, isAdditionalOptionsOpen: boolean) => {
+  onAdditionalOptionsToggle = (_event: any) => {
     this.setState({
-      isAdditionalOptionsOpen
+      isAdditionalOptionsOpen: !this.state.isAdditionalOptionsOpen
     });
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onAdditionalOptionsSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
+  onAdditionalOptionsSelect = () => {
     this.setState({
       isAdditionalOptionsOpen: !this.state.isAdditionalOptionsOpen
     });
@@ -104,25 +116,27 @@ export class OverflowMenuDemo extends React.Component {
   renderOverflowMenuAdditionalOptions() {
     const { isAdditionalOptionsOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="1" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="1" isShared>
         Primary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="2" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="2" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="3" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="3" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="4" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="4" isShared>
         Action 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="5" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="5" isShared>
         Action 5
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="6" isShared>
+      <OverflowMenuDropdownItem itemId={6} key="6" isShared>
         Action 6
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>
+      <OverflowMenuDropdownItem itemId={7} key="7">
+        Action 7
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg" id="additional-options-overflow-menu" style={this.style}>
@@ -159,26 +173,34 @@ export class OverflowMenuDemo extends React.Component {
         <OverflowMenuControl hasAdditionalOptions>
           <Dropdown
             onSelect={this.onAdditionalOptionsSelect}
-            toggle={<KebabToggle onToggle={this.onAdditionalOptionsToggle} />}
+            toggle={toggleRef => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Simple example overflow menu"
+                variant="plain"
+                onClick={this.onAdditionalOptionsToggle}
+                isExpanded={isAdditionalOptionsOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isAdditionalOptionsOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
   }
 
-  onPersistToggle = (_event: any, isPersistOpen: boolean) => {
+  onPersistToggle = () => {
     this.setState({
-      isPersistOpen
+      isPersistOpen: !this.state.isPersistOpen
     });
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onPersistSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
+  onPersistSelect = () => {
     this.setState({
       isPersistOpen: !this.state.isPersistOpen
     });
@@ -187,16 +209,18 @@ export class OverflowMenuDemo extends React.Component {
   renderOverflowMenuPersist() {
     const { isPersistOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="primary" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="primary" isShared>
         Primary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="secondary" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="secondary" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="tertiary" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action">Action 4</OverflowMenuDropdownItem>
+      <OverflowMenuDropdownItem itemId={3} key="action">
+        Action 4
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="xl" id="persist-overflow-menu" style={this.style}>
@@ -216,26 +240,34 @@ export class OverflowMenuDemo extends React.Component {
         <OverflowMenuControl hasAdditionalOptions>
           <Dropdown
             onSelect={this.onPersistSelect}
-            toggle={<KebabToggle onToggle={this.onPersistToggle} />}
+            toggle={toggleRef => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Additional options overflow menu"
+                variant="plain"
+                onClick={this.onPersistToggle}
+                isExpanded={isPersistOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isPersistOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
   }
 
-  onContainerBreakpointToggle = (_event: any, isContainerBreakpointOpen: boolean) => {
+  onContainerBreakpointToggle = () => {
     this.setState({
-      isContainerBreakpointOpen
+      isContainerBreakpointOpen: !this.state.isContainerBreakpointOpen
     });
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onContainerBreakpointSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
+  onContainerBreakpointSelect = () => {
     this.setState({
       isContainerBreakpointOpen: !this.state.isContainerBreakpointOpen
     });
@@ -244,20 +276,22 @@ export class OverflowMenuDemo extends React.Component {
   renderContainerBreakpointOverflowMenu() {
     const { isContainerBreakpointOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="action">Action</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="action">
+        Action
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={1} key="item1" isShared>
         Item 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="item2" isShared>
         Item 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="item3" isShared>
         Item 3
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item4" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="item4" isShared>
         Item 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item5" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="item5" isShared>
         Item 5
       </OverflowMenuDropdownItem>
     ];
@@ -281,13 +315,21 @@ export class OverflowMenuDemo extends React.Component {
           <OverflowMenuControl>
             <Dropdown
               onSelect={this.onContainerBreakpointSelect}
-              toggle={<KebabToggle onToggle={this.onContainerBreakpointToggle} />}
+              toggle={toggleRef => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="Additional options overflow menu"
+                  variant="plain"
+                  onClick={this.onContainerBreakpointToggle}
+                  isExpanded={isContainerBreakpointOpen}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={isContainerBreakpointOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              isFlipEnabled
-              menuAppendTo="parent"
-            />
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </Dropdown>
           </OverflowMenuControl>
         </OverflowMenu>
       </div>
diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md
index 87b51b323a6..4e9f5bb2071 100644
--- a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md
+++ b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md
@@ -53,9 +53,12 @@ import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+
 
 ## TableComposable examples
 
diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx b/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx
index 80e5b96dcba..c3298d18b5b 100644
--- a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx
+++ b/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx
@@ -8,10 +8,11 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  Dropdown,
-  KebabToggle
+  MenuToggle
 } from '@patternfly/react-core';
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 interface Repository {
   name: string;
@@ -43,13 +44,13 @@ export const ComposableTableActions: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <OverflowMenuDropdownItem key="item1" isShared>
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
       Pimary
     </OverflowMenuDropdownItem>,
-    <OverflowMenuDropdownItem key="item2" isShared>
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
       Secondary
     </OverflowMenuDropdownItem>,
-    <OverflowMenuDropdownItem key="item3" isShared>
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
       Tertiary
     </OverflowMenuDropdownItem>
   ];
@@ -68,7 +69,7 @@ export const ComposableTableActions: React.FunctionComponent = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {repos.map(repo => (
+          {repos.map((repo) => (
             <Tr key={repo.name}>
               <Td dataLabel={columnNames.name}>{repo.name}</Td>
               <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
@@ -91,22 +92,30 @@ export const ComposableTableActions: React.FunctionComponent = () => {
                     </OverflowMenuGroup>
                   </OverflowMenuContent>
                   <OverflowMenuControl>
-                    <Dropdown
-                      position="right"
+                    <DropdownNext
                       onSelect={() =>
-                        setRepos(repos.map(r => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
+                        setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                       }
-                      toggle={
-                        <KebabToggle
-                          onToggle={(_event, open) =>
-                            setRepos(repos.map(r => (r.name !== repo.name ? r : { ...r, isMenuOpen: open })))
+                      toggle={(toggleRef) => (
+                        <MenuToggle
+                          ref={toggleRef}
+                          variant="plain"
+                          aria-label="Table actions overflow menu"
+                          onClick={() =>
+                            setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                           }
-                        />
-                      }
+                          isExpanded={repo.isMenuOpen}
+                        >
+                          <EllipsisVIcon />
+                        </MenuToggle>
+                      )}
                       isOpen={repo.isMenuOpen}
-                      isPlain
-                      dropdownItems={dropdownItems}
-                    />
+                      onOpenChange={(isOpen) =>
+                        setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: isOpen })))
+                      }
+                    >
+                      <DropdownList>{dropdownItems}</DropdownList>
+                    </DropdownNext>
                   </OverflowMenuControl>
                 </OverflowMenu>
               </Td>