diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md
index c3efc39c11d..6d0ab7d2b85 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionList.md
+++ b/packages/react-core/src/components/ActionList/examples/ActionList.md
@@ -7,25 +7,35 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Examples
 
 ### Action list single group
 
 ```ts file="ActionListSingleGroup.tsx"
+
 ```
 
 ### Action list with icons
 
 ```ts file="./ActionListWithIcons.tsx"
+
 ```
 
 ### Action list multiple groups
 
 ```ts file="./ActionListMultipleGroups.tsx"
+
 ```
 
 ### Action list with cancel button
 
 ```ts file="./ActionListWithCancelButton.tsx"
+
 ```
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
index e06a26aeb68..509332c9d2e 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
 import {
-  ActionList,
-  ActionListItem,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -26,21 +24,21 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
@@ -71,7 +69,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={onSelect}
             toggle={<KebabToggle onToggle={onToggle} />}
             isOpen={isOpen}
diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
index 812fa2bfb85..9437f82c0e0 100644
--- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
@@ -2,8 +2,13 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
-import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
+import {
+  DropdownDirection,
+  DropdownPosition,
+  DropdownToggle,
+  DropdownContext
+} from '../../deprecated/components/Dropdown';
+import { DropdownWithContext } from '../../deprecated/components/Dropdown/DropdownWithContext';
 import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
@@ -94,13 +99,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     return (
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
-          customChild={
-            <SearchInput
-              placeholder={searchPlaceholderText}
-              onChange={onSearch}
-              {...searchProps}
-            />
-          }
+          customChild={<SearchInput placeholder={searchPlaceholderText} onChange={onSearch} {...searchProps} />}
         ></ApplicationLauncherItem>
       </div>
     );
diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx
index 7be51bf49d4..bf0754f2b19 100644
--- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownGroup, DropdownGroupProps } from '../Dropdown';
+import { DropdownGroup, DropdownGroupProps } from '../../deprecated/components/Dropdown';
 
 export const ApplicationLauncherGroup: React.FunctionComponent<DropdownGroupProps> = ({
   children,
diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
index f1a53a0c72c..67a99a31626 100644
--- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import { DropdownItem, DropdownItemProps } from '../Dropdown';
+import { DropdownItem, DropdownItemProps } from '../../deprecated/components/Dropdown';
 import { ApplicationLauncherContent } from './ApplicationLauncherContent';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
 import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext';
diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx
index 59ca4ac3aba..82d63ca61db 100644
--- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownSeparator, SeparatorProps } from '../Dropdown/DropdownSeparator';
+import { DropdownSeparator, SeparatorProps } from '../../deprecated/components/Dropdown/DropdownSeparator';
 
 export const ApplicationLauncherSeparator: React.FunctionComponent<SeparatorProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx
index bbb07940e19..387fbda9579 100644
--- a/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx
@@ -4,7 +4,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { ApplicationLauncher } from '../ApplicationLauncher';
 import { ApplicationLauncherItem } from '../ApplicationLauncherItem';
 
-import { DropdownPosition, DropdownDirection } from '../../Dropdown/dropdownConstants';
+import { DropdownPosition, DropdownDirection } from '../../../deprecated/components/Dropdown/dropdownConstants';
 import { ApplicationLauncherSeparator } from '../ApplicationLauncherSeparator';
 
 const dropdownItems = [
diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx
index fbba4de4795..1dfd81edec5 100644
--- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { ApplicationLauncherSeparator } from '../../ApplicationLauncherSeparator';
-import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants';
+import { DropdownArrowContext } from '../../../../deprecated/components/Dropdown/dropdownConstants';
 
 describe('ApplicationLauncherSeparator', () => {
   it('should match snapshot', () => {
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
index db5d30e9e52..ee9df4ff57e 100644
--- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
@@ -6,6 +6,7 @@ propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationL
 ouia: true
 ---
 
+import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/deprecated';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { Link } from '@reach/router';
 import pfLogoSm from './pf-logo-small.svg';
@@ -18,49 +19,59 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b
 ### Basic
 
 ```ts file="./ApplicationLauncherBasic.tsx"
+
 ```
 
 ### Router link
 
 ```ts file="./ApplicationLauncherRouterLink.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./ApplicationLauncherDisabled.tsx"
+
 ```
 
 ### Aligned right
 
 ```ts file="./ApplicationLauncherAlignRight.tsx"
+
 ```
 
 ### Aligned top
 
 ```ts file="./ApplicationLauncherAlignTop.tsx"
+
 ```
 
 ### With tooltip
 
 ```ts file="./ApplicationLauncherTooltip.tsx"
+
 ```
 
 ### With sections and icons
 
 ```ts file="./ApplicationLauncherSectionsAndIcons.tsx"
+
 ```
 
 ### With favorites and search
 
 ```ts file="./ApplicationLauncherFavoritesAndSearch.tsx"
+
 ```
 
 ### With custom icon
 
 ```ts file="./ApplicationLauncherCustomIcon.tsx"
+
 ```
 
 ### Basic with menu appended to document body
 
 ```ts file="./ApplicationLauncherDocumentBody.tsx"
+
 ```
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx
index ca7f9a2a220..72fd38819b9 100644
--- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem, DropdownPosition } from '@patternfly/react-core';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+import { DropdownPosition } from '@patternfly/react-core/deprecated';
 
 const appLauncherItems: React.ReactElement[] = [
   <ApplicationLauncherItem key="application_1a" href="#">
@@ -17,7 +18,7 @@ export const ApplicationLauncherAlignRight: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx
index 7e5b55619e8..6b7b768776f 100644
--- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem, DropdownDirection } from '@patternfly/react-core';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+import { DropdownDirection } from '@patternfly/react-core/deprecated';
 
 const appLauncherItems: React.ReactElement[] = [
   <ApplicationLauncherItem key="application_1a" href="#">
@@ -17,7 +18,7 @@ export const ApplicationLauncherAlignTop: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher
diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
index 0fa86853556..aa555aa221b 100644
--- a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
+++ b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
@@ -6,6 +6,11 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+BadgeToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 ## Examples
@@ -13,19 +18,23 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 ### Basic
 
 ```ts file="./BreadcrumbBasic.tsx"
+
 ```
 
 ### Without home link
 
 ```ts file="./BreadcrumbWithoutHomeLink.tsx"
+
 ```
 
 ### With heading
 
 ```ts file="./BreadcrumbWithHeading.tsx"
+
 ```
 
 ### With dropdown
 
 ```ts file="./BreadcrumbDropdown.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
index ed251534770..ead45febd25 100644
--- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
+++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
@@ -1,24 +1,22 @@
 import React from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbHeading,
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   BadgeToggle,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 const dropdownItems: JSX.Element[] = [
-  <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+  <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
     Edit
-  </DropdownItem>,
-  <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
     Deployment
-  </DropdownItem>,
-  <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
     Applications
-  </DropdownItem>
+  </DropdownItemDeprecated>
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
@@ -36,7 +34,7 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem component="button">Section home</BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 912b8734457..d65ff910609 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -2,21 +2,28 @@
 id: Card
 section: components
 cssPrefix: pf-c-card
-propComponents: ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+propComponents:
+  ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import pfLogo from './pfLogo.svg';
 import pfLogoSmall from './pf-logo-small.svg';
 
-
-## Examples 
+## Examples
 
 ### Basic cards
 
 Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
 ```ts file='./CardBasic.tsx'
+
 ```
 
 ### Modifiers
@@ -26,29 +33,30 @@ You can further modify the styling of the card's content by using the properties
 Most modifiers can be used in combination with each other, except for `isCompact` and `isLarge`, since they are contradictory.
 
 ```ts file='./CardWithModifiers.tsx'
-```
 
-| Modifier | Description |
-| --- | --- |
-| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. |
-| isFlat | Modifies the card to include flat styling. |
-| isRounded | Modifies the card to include rounded border styling. |
-| isLarge | Modifies the card to be large. Should not be used with isCompact. |
-| isFullHeight | Modifies the card so that it fills the total available height of its container. |
-| isPlain | Modifies the card to include plain styling, which removes the border and background. | 
+```
 
+| Modifier     | Description                                                                          |
+| ------------ | ------------------------------------------------------------------------------------ |
+| isCompact    | Modifies the card to include compact styling. Should not be used with isLarge.       |
+| isFlat       | Modifies the card to include flat styling.                                           |
+| isRounded    | Modifies the card to include rounded border styling.                                 |
+| isLarge      | Modifies the card to be large. Should not be used with isCompact.                    |
+| isFullHeight | Modifies the card so that it fills the total available height of its container.      |
+| isPlain      | Modifies the card to include plain styling, which removes the border and background. |
 
 ### Header images and actions
 
 You can include header actions with the `actions` property of `<CardHeader>` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardHeader>` actions.
 
-The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. 
+The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions.
 
-You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. 
+You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example.
 
 Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
 ```ts file='./CardWithImageAndActions.tsx'
+
 ```
 
 ### Title inline with images and actions
@@ -56,6 +64,7 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi
 Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.
 
 ```ts file='./CardHeaderInCardHead.tsx'
+
 ```
 
 ### Card header without title
@@ -65,6 +74,7 @@ Card actions can be placed in the card header even without a `<CardTitle>`.
 Images can also be placed in the card header without a `<CardTitle>`.
 
 ```ts file='./CardOnlyActionsInCardHead.tsx'
+
 ```
 
 ### With HTML heading element
@@ -72,6 +82,7 @@ Images can also be placed in the card header without a `<CardTitle>`.
 You may use the `component` property to place the card's title within an HTML heading element.
 
 ```ts file='./CardWithHeadingElement.tsx'
+
 ```
 
 ### With multiple body sections
@@ -79,15 +90,17 @@ You may use the `component` property to place the card's title within an HTML he
 You may use multiple body sections to visually separate blocks of content.
 
 ```ts file='./CardWithMultipleBodySections.tsx'
+
 ```
 
 ### With a primary body section that fills
 
 `<CardBody>` sections will fill the available height of the card when `isFilled` equals `{true}`, which is the default value. Set `isFilled` to `{false}` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `<CardBody>` section that does not set `isFilled` to `{false}`.
 
-A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card. 
+A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card.
 
 ```ts file='./CardWithBodySectionFills.tsx'
+
 ```
 
 ### Selectable cards
@@ -95,6 +108,7 @@ A common use case of this is to set all but one body section to `isFilled={false
 Selectable cards can only be selected one at a time, and are intended for use with [primary-detail layout](/demos/primary-detail).
 
 ```ts file='./CardSelectable.tsx'
+
 ```
 
 ### Legacy selectable cards
@@ -102,6 +116,7 @@ Selectable cards can only be selected one at a time, and are intended for use wi
 The following example shows a legacy implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
 
 ```ts file='./CardLegacySelectable.tsx'
+
 ```
 
 ### Selectable card accessibility features
@@ -114,20 +129,22 @@ By default, this input will have an aria-label that corresponds to the `<CardTit
 
 The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
 
-The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies. 
+The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies.
 
 We recommend navigating this example using a screen reader to best understand both cards.
 
 ```ts file='./CardSelectableA11yHighlight.tsx'
+
 ```
 
 ### Expandable cards
 
-A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content. 
+A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.
 
 Place any content that you want to be hidden within the `<CardExpandableContent>` component.
 
 ```ts file='./CardExpandable.tsx'
+
 ```
 
 ### Expandable with icon
@@ -135,4 +152,5 @@ Place any content that you want to be hidden within the `<CardExpandableContent>
 An image can be placed in the card header to show users an icon beside the expansion caret.
 
 ```ts file='./CardExpandableWithIcon.tsx'
+
 ```
diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
index 63d34b84ffa..6871cba5068 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
@@ -6,12 +6,14 @@ import {
   CardBody,
   CardFooter,
   CardExpandableContent,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Checkbox
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardExpandable: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -38,26 +40,26 @@ export const CardExpandable: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
         isOpen={isOpen}
@@ -88,7 +90,7 @@ export const CardExpandable: React.FunctionComponent = () => {
       </div>
       <Card id="expandable-card" isExpanded={isExpanded}>
         <CardHeader
-          actions={{actions: headerActions}}
+          actions={{ actions: headerActions }}
           onExpand={onExpand}
           isToggleRightAligned={isToggleRightAligned}
           toggleButtonProps={{
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
index b311cf23c65..09df6296b8f 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardBody, CardFooter, CardExpandableContent, Checkbox } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  CardExpandableContent,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import pfLogoSmall from './pf-logo-small.svg';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
@@ -33,26 +28,26 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
         isOpen={isOpen}
@@ -73,7 +68,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
   return (
     <Card id="expandable-card-icon" isExpanded={isExpanded}>
       <CardHeader
-        actions={{actions: headerActions}}
+        actions={{ actions: headerActions }}
         onExpand={onExpand}
         toggleButtonProps={{
           id: 'toggle-button2',
diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
index aa28b529d70..82b1af8b1f7 100644
--- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  CardFooter,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardTitleInHeader: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -24,26 +19,26 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
         isOpen={isOpen}
@@ -63,7 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
 
   return (
     <Card>
-      <CardHeader actions={{actions: headerActions}}>
+      <CardHeader actions={{ actions: headerActions }}>
         <CardTitle>
           This is a really really really really really really really really really really long header
         </CardTitle>
diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
index 6b32f9ee43e..cb1f647638e 100644
--- a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardLegacySelectable: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
@@ -46,26 +43,26 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={onToggle} />}
         isOpen={isKebabOpen}
@@ -87,7 +84,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         isSelected={selected === 'legacy-first-card'}
         hasSelectableInput
       >
-        <CardHeader actions={{actions: headerActions}}/>
+        <CardHeader actions={{ actions: headerActions }} />
         <CardTitle>First legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
index 75be753f345..ef14942d7be 100644
--- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
+import { Checkbox, Card, CardHeader, CardBody } from '@patternfly/react-core';
 import {
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
-  KebabToggle,
-  Card,
-  CardHeader,
-  CardBody
-} from '@patternfly/react-core';
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -22,26 +19,26 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
         isOpen={isOpen}
@@ -61,7 +58,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
 
   return (
     <Card>
-      <CardHeader actions={{actions: headerActions}}/>
+      <CardHeader actions={{ actions: headerActions }} />
       <CardBody>This is the card body. There are only actions in the card head.</CardBody>
     </Card>
   );
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index b3679eac3e4..9849709b62e 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardSelectable: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
@@ -49,26 +46,26 @@ export const CardSelectable: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={onToggle} />}
         isOpen={isKebabOpen}
@@ -90,7 +87,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
-        <CardHeader actions={{actions: headerActions}}/>
+        <CardHeader actions={{ actions: headerActions }} />
         <CardTitle>First card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
index 5ed4b18c1e1..4062d29ed03 100644
--- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -1,17 +1,11 @@
 import React from 'react';
+import { Brand, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Brand,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  CardFooter,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import pfLogo from './pfLogo.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
@@ -30,26 +24,26 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
         isOpen={isOpen}
@@ -70,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
   return (
     <>
       <Card>
-        <CardHeader actions={{actions: headerActions, hasNoOffset}}>
+        <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
           <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
         </CardHeader>
         <CardTitle>Title</CardTitle>
diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
index 41838b00639..52782d2e133 100644
--- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
@@ -12,7 +12,7 @@ import { DataListItemCells } from '../DataListItemCells';
 import { DataListItemRow } from '../DataListItemRow';
 import { DataListContent } from '../DataListContent';
 import { Button } from '../../Button';
-import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../Dropdown';
+import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../../deprecated/components/Dropdown';
 
 describe('DataList', () => {
   test('List default', () => {
@@ -26,7 +26,7 @@ describe('DataList', () => {
   });
 
   describe('DataList variants', () => {
-    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach(oneBreakpoint => {
+    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
       test(`Breakpoint - ${oneBreakpoint}`, () => {
         const { asFragment } = render(
           <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
@@ -50,7 +50,7 @@ describe('DataList', () => {
 
   test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -85,8 +85,8 @@ describe('DataList', () => {
     const user = userEvent.setup();
 
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
-        <DataListItem id='item-test-id'>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+        <DataListItem id="item-test-id">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -104,8 +104,8 @@ describe('DataList', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
-        <DataListItem id='item-test-id'>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+        <DataListItem id="item-test-id">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -118,7 +118,7 @@ describe('DataList', () => {
 
   test('Item applies selectableInputAriaLabel to the hidden input', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem selectableInputAriaLabel="Data list item label test">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -134,7 +134,7 @@ describe('DataList', () => {
 
   test('Item defaults to labelling its input using its aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem aria-labelledby="test-id">
           <p id="test-id">Test cell content</p>
         </DataListItem>
@@ -148,7 +148,7 @@ describe('DataList', () => {
 
   test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
           <p id="test-id">Test cell content</p>
         </DataListItem>
diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md
index ef6fd245db8..9a15bb60ac7 100644
--- a/packages/react-core/src/components/DataList/examples/DataList.md
+++ b/packages/react-core/src/components/DataList/examples/DataList.md
@@ -14,10 +14,16 @@ propComponents:
     'DataListToggle',
     'DataListContent',
     'DataListDragButton',
-    'DataListControl',
+    'DataListControl'
   ]
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -28,46 +34,55 @@ import { css } from '@patternfly/react-styles';
 ### Basic
 
 ```ts file="./DataListBasic.tsx"
+
 ```
 
 ### Compact
 
 ```ts file="./DataListCompact.tsx"
+
 ```
 
 ### Checkboxes, actions and additional cells
 
 ```ts file="./DataListCheckboxes.tsx"
+
 ```
 
 ### Actions: single and multiple
 
 ```ts file="./DataListActions.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./DataListExpandable.tsx"
+
 ```
 
 ### Mixed expandable
 
 ```ts file="./DataListMixedExpandable.tsx"
+
 ```
 
 ### Width modifiers
 
 ```ts file="./DataListWidthModifiers.tsx"
+
 ```
 
 ### Selectable rows
 
 ```ts file="./DataListSelectableRows.tsx"
+
 ```
 
 ### Controlling text
 
 ```ts file="./DataListControllingText.tsx"
+
 ```
 
 ### Draggable
@@ -77,9 +92,11 @@ Draggable data lists used to have their own HTML5-based API for drag and drop, w
 Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
 ```ts isBeta file="./DataListDraggable.tsx"
+
 ```
 
 ### Small grid breakpoint
 
 ```ts file="./DataListSmGridBreakpoint.tsx"
+
 ```
diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/src/components/DataList/examples/DataListActions.tsx
index cf08a6d97d3..d88eb552c6c 100644
--- a/packages/react-core/src/components/DataList/examples/DataListActions.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListActions.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   DataList,
   DataListItem,
   DataListCell,
@@ -12,6 +8,12 @@ import {
   DataListItemCells,
   DataListAction
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -75,20 +77,20 @@ export const DataListActions: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
index 8964e2bae84..0b7ddf037b5 100644
--- a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
@@ -7,12 +7,14 @@ import {
   DataListItemRow,
   DataListCell,
   DataListCheck,
-  DataListAction,
-  Dropdown,
-  DropdownItem,
+  DataListAction
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownPosition,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const DataListCheckboxes: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
@@ -72,20 +74,20 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-label="Actions"
             isPlainButtonAction
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position={DropdownPosition.right}
               isOpen={isOpen1}
               onSelect={onSelect1}
               toggle={<KebabToggle onToggle={onToggle1} />}
               dropdownItems={[
-                <DropdownItem key="link">Link</DropdownItem>,
-                <DropdownItem key="action" component="button">
+                <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                <DropdownItemDeprecated key="action" component="button">
                   Action
-                </DropdownItem>,
-                <DropdownItem key="disabled link" isDisabled>
+                </DropdownItemDeprecated>,
+                <DropdownItemDeprecated key="disabled link" isDisabled>
                   Disabled Link
-                </DropdownItem>
+                </DropdownItemDeprecated>
               ]}
             />
           </DataListAction>
@@ -112,19 +114,19 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-label="Actions"
             isPlainButtonAction
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position={DropdownPosition.right}
               isOpen={isOpen2}
               onSelect={onSelect2}
               toggle={<KebabToggle onToggle={onToggle2} />}
               dropdownItems={[
-                <DropdownItem key="pri-action2" component="button">
+                <DropdownItemDeprecated key="pri-action2" component="button">
                   Primary
-                </DropdownItem>,
-                <DropdownItem key="sec-action2" component="button">
+                </DropdownItemDeprecated>,
+                <DropdownItemDeprecated key="sec-action2" component="button">
                   Secondary
-                </DropdownItem>
+                </DropdownItemDeprecated>
               ]}
             />
           </DataListAction>
@@ -160,25 +162,25 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-label="Actions"
             isPlainButtonAction
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position={DropdownPosition.right}
               isOpen={isOpen3}
               onSelect={onSelect3}
               toggle={<KebabToggle onToggle={onToggle3} />}
               dropdownItems={[
-                <DropdownItem key="pri-action3" component="button">
+                <DropdownItemDeprecated key="pri-action3" component="button">
                   Primary
-                </DropdownItem>,
-                <DropdownItem key="sec1-action3" component="button">
+                </DropdownItemDeprecated>,
+                <DropdownItemDeprecated key="sec1-action3" component="button">
                   Secondary
-                </DropdownItem>,
-                <DropdownItem key="sec2-action3" component="button">
+                </DropdownItemDeprecated>,
+                <DropdownItemDeprecated key="sec2-action3" component="button">
                   Secondary
-                </DropdownItem>,
-                <DropdownItem key="sec3-action3" component="button">
+                </DropdownItemDeprecated>,
+                <DropdownItemDeprecated key="sec3-action3" component="button">
                   Secondary
-                </DropdownItem>
+                </DropdownItemDeprecated>
               ]}
             />
           </DataListAction>
diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
index 67159ff6b9a..de02d7f3a08 100644
--- a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
@@ -7,12 +7,14 @@ import {
   DataListAction,
   DataListToggle,
   DataListContent,
-  DataListItemCells,
-  Dropdown,
-  DropdownItem,
+  DataListItemCells
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownPosition,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const DataListExpandable: React.FunctionComponent = () => {
@@ -44,7 +46,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
     setIsOpen3(!isOpen3);
   };
 
-  const toggle = id => {
+  const toggle = (id) => {
     const index = expanded.indexOf(id);
     const newExpanded =
       index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
@@ -85,20 +87,20 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen1}
                 onSelect={onSelect1}
                 toggle={<KebabToggle onToggle={onToggle1} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -145,20 +147,20 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen2}
                 onSelect={onSelect2}
                 toggle={<KebabToggle onToggle={onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -205,20 +207,20 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen3}
                 onSelect={onSelect3}
                 toggle={<KebabToggle onToggle={onToggle3} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
index c048269f989..20f8ad82fb3 100644
--- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -7,12 +7,14 @@ import {
   DataListAction,
   DataListToggle,
   DataListContent,
-  DataListItemCells,
-  Dropdown,
-  DropdownItem,
+  DataListItemCells
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownPosition,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const DataListMixedExpandable: React.FunctionComponent = () => {
@@ -45,7 +47,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
     setIsOpen3(!isOpen3);
   };
 
-  const toggle = id => {
+  const toggle = (id) => {
     const index = expanded.indexOf(id);
     const newExpanded =
       index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
@@ -87,20 +89,20 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen1}
                 onSelect={onSelect1}
                 toggle={<KebabToggle onToggle={onToggle1} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -149,20 +151,20 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen2}
                 onSelect={onSelect2}
                 toggle={<KebabToggle onToggle={onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -199,20 +201,20 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen3}
                 onSelect={onSelect3}
                 toggle={<KebabToggle onToggle={onToggle3} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
diff --git a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
index 176d48ba7d4..ad69539a2dc 100644
--- a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   DataList,
   DataListItem,
   DataListCell,
@@ -11,6 +7,12 @@ import {
   DataListItemCells,
   DataListAction
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const DataListSelectableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
@@ -65,20 +67,20 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen1}
                 onSelect={onSelect1}
                 toggle={<KebabToggle onToggle={onToggle1} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -100,20 +102,20 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen2}
                 onSelect={onSelect2}
                 toggle={<KebabToggle onToggle={onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
index bda5d0b60c2..97e9ee0d807 100644
--- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
@@ -9,14 +9,16 @@ import {
   DataListContent,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-  DropdownPosition,
   Text,
   TextVariants,
   TextContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle,
+  DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
@@ -112,20 +114,20 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={isOpen1}
                   onSelect={onSelect1}
                   toggle={<KebabToggle onToggle={onToggle1} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -172,20 +174,20 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={isOpen2}
                   onSelect={onSelect2}
                   toggle={<KebabToggle onToggle={onToggle2} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
index fc496addf2c..2b437c18c3b 100644
--- a/packages/react-core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -1,115 +1,130 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
-import { DropdownWithContext } from './DropdownWithContext';
-import { OUIAProps, useOUIAId } from '../../helpers';
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Menu, MenuContent, MenuProps } from '../Menu';
+import { Popper, PopperProps } from '../../helpers/Popper/Popper';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Anything which can be rendered in a dropdown */
+export interface DropdownProps extends MenuProps, OUIAProps {
+  /** Anything which can be rendered in a dropdown. */
   children?: React.ReactNode;
-  /** Classes applied to root element of dropdown */
+  /** Classes applied to root element of dropdown. */
   className?: string;
-  /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */
-  dropdownItems?: any[];
-  /** Flag to indicate if menu is opened */
+  /** Renderer for a custom dropdown toggle. Forwards a ref to the toggle. */
+  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
-  /** Display the toggle with no border or background */
+  /** Function callback called when user selects item. */
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  /** Callback to allow the dropdown component to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;
-  /** Display the toggle in text only mode */
-  isText?: boolean;
-  /** Flag indicating that the dropdown should expand to full height */
-  isFullHeight?: boolean;
-  /** Indicates where menu will be aligned horizontally */
-  position?: DropdownPosition | 'right' | 'left';
-  /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */
-  alignments?: {
-    sm?: 'right' | 'left';
-    md?: 'right' | 'left';
-    lg?: 'right' | 'left';
-    xl?: 'right' | 'left';
-    '2xl'?: 'right' | 'left';
-  };
-  /** Display menu above or below dropdown toggle */
-  direction?: DropdownDirection | 'up' | 'down';
-  /** Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width. */
-  minWidth?: string | 'trigger';
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-  /** Flag to indicate if dropdown has groups */
-  isGrouped?: boolean;
-  /** Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> */
-  toggle: React.ReactElement<any>;
-  /** Function callback called when user selects item */
-  onSelect?: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
-  /** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
-   * a specific auto-focus item (like a current selection) otherwise leave as true
-   */
-  autoFocus?: boolean;
-  /** Props for extreme customization of dropdown */
-  contextProps?: typeof DropdownContext;
-  /** Flag for indicating that the dropdown menu should automatically flip vertically when
-   * it reaches the boundary. This prop can only be used when the dropdown component is not
-   * appended inline, e.g. `menuAppendTo="parent"`
-   */
-  isFlipEnabled?: boolean;
-  /** z-index of the dropdown when menuAppendTo is not inline. */
-  zIndex?: number;
+  /** Indicates if the menu should be scrollable. */
+  isScrollable?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** z-index of the dropdown menu */
+  zIndex?: number;
+  /** Additional properties to pass to the Popper */
+  popperProps?: Partial<PopperProps>;
 }
 
-export const Dropdown: React.FunctionComponent<DropdownProps> = ({
+const DropdownBase: React.FunctionComponent<DropdownProps> = ({
+  children,
+  className,
   onSelect,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
+  isOpen,
+  toggle,
+  onOpenChange,
+  isPlain,
+  isScrollable,
+  innerRef,
   ouiaId,
-  ouiaSafe,
-  alignments,
-  contextProps,
-  minWidth,
-  menuAppendTo = 'inline',
-  isFlipEnabled = true,
+  ouiaSafe = true,
   zIndex = 9999,
+  popperProps,
   ...props
-}: DropdownProps) => (
-  <DropdownContext.Provider
-    value={{
-      onSelect: (event) => onSelect && onSelect(event),
-      toggleTextClass: styles.dropdownToggleText,
-      toggleIconClass: styles.dropdownToggleImage,
-      toggleIndicatorClass: styles.dropdownToggleIcon,
-      menuClass: styles.dropdownMenu,
-      itemClass: styles.dropdownMenuItem,
-      toggleClass: styles.dropdownToggle,
-      baseClass: styles.dropdown,
-      baseComponent: 'div',
-      sectionClass: styles.dropdownGroup,
-      sectionTitleClass: styles.dropdownGroupTitle,
-      sectionComponent: 'section',
-      disabledClass: styles.modifiers.disabled,
-      plainTextClass: styles.modifiers.text,
-      ouiaId: useOUIAId(Dropdown.displayName, ouiaId),
-      ouiaSafe,
-      ouiaComponentType: Dropdown.displayName,
-      alignments,
-      ...contextProps
-    }}
-  >
-    <DropdownWithContext
-      menuAppendTo={menuAppendTo}
-      isFlipEnabled={isFlipEnabled}
-      zIndex={zIndex}
-      minWidth={minWidth}
+}: DropdownProps) => {
+  const localMenuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
+  const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
+
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape if onOpenChange is provided
+      if (
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (event.key === 'Escape' || event.key === 'Tab') {
+          onOpenChange(false);
+          toggleRef.current?.focus();
+        }
+      }
+    };
+
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, menuRef, onOpenChange]);
+
+  const menu = (
+    <Menu
+      className={css(className)}
+      ref={menuRef}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
+      isPlain={isPlain}
+      isScrollable={isScrollable}
       {...props}
-    />
-  </DropdownContext.Provider>
-);
+    >
+      <MenuContent>{children}</MenuContent>
+    </Menu>
+  );
+  return (
+    <div ref={containerRef} {...ouiaProps}>
+      <Popper
+        trigger={toggle(toggleRef)}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+        zIndex={zIndex}
+        {...popperProps}
+      />
+    </div>
+  );
+};
+
+export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref<any>) => (
+  <DropdownBase innerRef={ref} {...props} />
+));
 Dropdown.displayName = 'Dropdown';
diff --git a/packages/react-core/src/components/Dropdown/DropdownGroup.tsx b/packages/react-core/src/components/Dropdown/DropdownGroup.tsx
index f6ca197a297..8edb734a2da 100644
--- a/packages/react-core/src/components/Dropdown/DropdownGroup.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownGroup.tsx
@@ -1,36 +1,25 @@
-import * as React from 'react';
+import React from 'react';
 import { css } from '@patternfly/react-styles';
-import { DropdownContext } from './dropdownConstants';
+import { MenuGroupProps, MenuGroup } from '../Menu';
 
-export interface DropdownGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
-  /** Checkboxes within group */
-  children?: React.ReactNode;
-  /** Additional classes added to the DropdownGroup control */
+export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
+  /** Anything which can be rendered in a dropdown group. */
+  children: React.ReactNode;
+  /** Classes applied to root element of dropdown group */
   className?: string;
-  /** Group label */
-  label?: React.ReactNode;
+  /** Label of the dropdown group */
+  label?: string;
 }
 
 export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
-  children = null,
-  className = '',
-  label = '',
+  children,
+  className,
+  label,
+  labelHeadingLevel = 'h1',
   ...props
 }: DropdownGroupProps) => (
-  <DropdownContext.Consumer>
-    {({ sectionClass, sectionTitleClass, sectionComponent }) => {
-      const SectionComponent = sectionComponent as any;
-      return (
-        <SectionComponent className={css(sectionClass, className)} {...props}>
-          {label && (
-            <h1 className={css(sectionTitleClass)} aria-hidden>
-              {label}
-            </h1>
-          )}
-          <ul role="none">{children}</ul>
-        </SectionComponent>
-      );
-    }}
-  </DropdownContext.Consumer>
+  <MenuGroup className={css(className)} label={label} labelHeadingLevel={labelHeadingLevel} {...props}>
+    {children}
+  </MenuGroup>
 );
 DropdownGroup.displayName = 'DropdownGroup';
diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
index cb979adbf0c..83484c2a933 100644
--- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
@@ -1,113 +1,37 @@
-import * as React from 'react';
-import { InternalDropdownItemProps, InternalDropdownItem } from './InternalDropdownItem';
-import { DropdownArrowContext } from './dropdownConstants';
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { MenuItemProps, MenuItem } from '../Menu';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabIndex'>, OUIAProps {
-  /** Anything which can be rendered as dropdown item */
+export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
+  /** Anything which can be rendered in a dropdown item */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown item */
   className?: string;
-  /** Class to be applied to list item */
-  listItemClassName?: string;
-  /**
-   * A ReactElement to render, or a string to use as the component tag.
-   * Example: component={<Link to="/components/alert/">Alert</Link>}
-   * Example: component="button"
-   * If React.isValidElement(component) the className prop will be injected unless styleChildren="false"
-   */
-  component?: React.ReactNode;
-  /** ID for the component element */
-  componentID?: string;
-  /** Whether to set className on component when React.isValidElement(component) */
-  styleChildren?: boolean;
-  /** Render dropdown item as disabled option */
-  isDisabled?: boolean;
-  /** Render dropdown item as aria-disabled option */
-  isAriaDisabled?: boolean;
-  /** Render dropdown item as non-interactive item */
-  isPlainText?: boolean;
-  /** Default hyperlink location */
-  href?: string;
-  /** Tooltip to display when hovered over the item */
-  tooltip?: React.ReactNode;
-  /** Additional tooltip props forwarded to the Tooltip component */
-  tooltipProps?: any;
-  /** Additional node to include alongside item within the <li> */
-  additionalChild?: React.ReactNode;
-  /** Custom item rendering that receives the DropdownContext */
-  customChild?: React.ReactNode;
-  /** tabIndex to use, null to unset it */
-  tabIndex?: number | null;
-  /** An image to display within the DropdownItem, appearing before any component children */
-  icon?: React.ReactNode;
-  /** Initial focus on the item when the menu is opened (Note: Only applicable to one of the items) */
-  autoFocus?: boolean;
-  /** A short description of the dropdown item, displayed under the dropdown item content */
+  /** Description of the dropdown item */
   description?: React.ReactNode;
+  /** Identifies the component in the dropdown onSelect callback */
+  itemId?: any;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
 }
 
-export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
+export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
-  component = 'a',
-  isDisabled = false,
-  isAriaDisabled = false,
-  isPlainText = false,
-  href,
-  tooltip,
-  tooltipProps = {},
-  listItemClassName,
-  onClick,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  additionalChild,
-  customChild,
-  tabIndex = -1,
-  icon = null,
-  autoFocus,
-  description = null,
-  styleChildren,
+  description,
+  itemId,
   ouiaId,
   ouiaSafe,
   ...props
 }: DropdownItemProps) => {
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
-    <DropdownArrowContext.Consumer>
-      {context => (
-        <InternalDropdownItem
-          context={context}
-          role="menuitem"
-          tabIndex={tabIndex}
-          className={className}
-          component={component}
-          isDisabled={isDisabled}
-          isAriaDisabled={isAriaDisabled}
-          isPlainText={isPlainText}
-          href={href}
-          tooltip={tooltip}
-          tooltipProps={tooltipProps}
-          listItemClassName={listItemClassName}
-          onClick={onClick}
-          additionalChild={additionalChild}
-          customChild={customChild}
-          icon={icon}
-          autoFocus={autoFocus}
-          styleChildren={styleChildren}
-          description={description}
-          {...ouiaProps}
-          {...props}
-        >
-          {children}
-        </InternalDropdownItem>
-      )}
-    </DropdownArrowContext.Consumer>
+    <MenuItem className={css(className)} description={description} itemId={itemId} {...ouiaProps} {...props}>
+      {children}
+    </MenuItem>
   );
 };
-
 DropdownItem.displayName = 'DropdownItem';
diff --git a/packages/react-core/src/next/components/Dropdown/DropdownList.tsx b/packages/react-core/src/components/Dropdown/DropdownList.tsx
similarity index 89%
rename from packages/react-core/src/next/components/Dropdown/DropdownList.tsx
rename to packages/react-core/src/components/Dropdown/DropdownList.tsx
index d4e46338346..e591d1ae3f0 100644
--- a/packages/react-core/src/next/components/Dropdown/DropdownList.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
-import { MenuListProps, MenuList } from '../../../components/Menu';
+import { MenuListProps, MenuList } from '../Menu';
 
 export interface DropdownListProps extends MenuListProps {
   /** Anything which can be rendered in a dropdown list */
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
index 77e6fd7abc0..3c21de56481 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -1,278 +1,216 @@
 import React from 'react';
-
-import { render, screen } from '@testing-library/react';
+import { Dropdown } from '../../Dropdown';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Dropdown } from '../Dropdown';
-import { DropdownPosition, DropdownDirection } from '../dropdownConstants';
-import { InternalDropdownItem } from '../InternalDropdownItem';
-import { DropdownSeparator } from '../DropdownSeparator';
-import { DropdownToggle } from '../DropdownToggle';
-import { KebabToggle } from '../KebabToggle';
-
-const dropdownItems = [
-  <InternalDropdownItem key="link">Link</InternalDropdownItem>,
-  <InternalDropdownItem key="action" component="button">
-    Action
-  </InternalDropdownItem>,
-  <InternalDropdownItem key="disabled link" isDisabled>
-    Disabled Link
-  </InternalDropdownItem>,
-  <InternalDropdownItem key="disabled action" isDisabled component="button">
-    Disabled Action
-  </InternalDropdownItem>,
-  <DropdownSeparator key="separator" />,
-  <InternalDropdownItem key="separated link">Separated Link</InternalDropdownItem>,
-  <InternalDropdownItem key="separated action" component="button">
-    Separated Action
-  </InternalDropdownItem>
-];
-
-describe('Dropdown', () => {
-  test('regular', () => {
-    const { asFragment } = render(
-      <Dropdown dropdownItems={dropdownItems} toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        position={DropdownPosition.right}
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('alignment breakpoints', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        alignments={{
-          sm: 'left',
-          md: 'right',
-          lg: 'left',
-          xl: 'right',
-          '2xl': 'left'
-        }}
-        aria-label="Dropdown button"
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-        isOpen
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup + right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        position={DropdownPosition.right}
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('expanded', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        isOpen
-        aria-label="Dropdown button"
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('primary', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        toggle={
-          <DropdownToggle id="Dropdown Toggle" toggleVariant="primary">
-            Dropdown
-          </DropdownToggle>
-        }
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('basic', () => {
-    const { asFragment } = render(
-      <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
-        <div>BASIC</div>
-      </Dropdown>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Renders in strict mode', () => {
-    const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(
-      <React.StrictMode>
-        <Dropdown
-          isOpen
-          dropdownItems={dropdownItems}
-          toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-        />
-      </React.StrictMode>
-    );
-    expect(consoleError).not.toHaveBeenCalled();
-    expect(asFragment()).toMatchSnapshot();
-  });
+jest.mock('../../Menu');
+
+jest.mock('../../../helpers/Popper/Popper');
+
+const toggle = (ref: React.RefObject<any>) => <button ref={ref}>Dropdown</button>;
+
+const dropdownChildren = <div>Dropdown children</div>;
+
+test('renders dropdown', () => {
+  render(
+    <div data-testid="dropdown">
+      <Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('Dropdown children')).toBeVisible();
+});
+
+test('renders passed toggle element', () => {
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible();
 });
 
-describe('KebabToggle', () => {
-  test('regular', () => {
-    const { asFragment } = render(
-      <Dropdown
-        aria-label="Dropdown button"
-        dropdownItems={dropdownItems}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        position={DropdownPosition.right}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup + right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        position={DropdownPosition.right}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('expanded', () => {
-    const { asFragment } = render(
-      <Dropdown
-        aria-label="Dropdown button"
-        dropdownItems={dropdownItems}
-        isOpen
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('plain', () => {
-    const { asFragment } = render(
-      <Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('basic', () => {
-    const { asFragment } = render(
-      <Dropdown isOpen toggle={<KebabToggle id="Dropdown Toggle" />}>
-        <div>BASIC</div>
-      </Dropdown>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('passes no class name by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByTestId('menu-mock')).not.toHaveClass();
+});
+
+test('passes custom class name', () => {
+  render(
+    <Dropdown className="custom-class" isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByTestId('menu-mock')).toHaveClass('custom-class');
+});
+
+test('does not pass isPlain to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isPlain: undefined')).toBeVisible();
+});
+
+test('passes isPlain to Menu', () => {
+  render(
+    <Dropdown isPlain isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isPlain: true')).toBeVisible();
+});
+
+test('does not pass isScrollable to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isScrollable: undefined')).toBeVisible();
+});
+
+test('passes isScrollable to Menu', () => {
+  render(
+    <Dropdown isScrollable isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isScrollable: true')).toBeVisible();
+});
+
+test('passes default zIndex to popper', () => {
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('zIndex: 9999')).toBeVisible();
+});
+
+test('passes zIndex to popper', () => {
+  render(
+    <Dropdown zIndex={100} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('zIndex: 100')).toBeVisible();
+});
+
+test('does not pass isOpen to popper by default', () => {
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('isOpen: undefined')).toBeVisible();
+});
+
+test('passes isOpen to popper', () => {
+  render(
+    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isOpen: true')).toBeVisible();
+});
+
+/* no default tests for callback props
+since there is no way to test that the 
+function doesn`t get passed */
+
+test('passes onSelect callback', async () => {
+  const user = userEvent.setup();
+
+  const onSelect = jest.fn();
+  render(
+    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const trigger = await screen.findByText('Mock item');
+  await user.click(trigger);
+
+  expect(onSelect).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user clicks outside of dropdown', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.click(document.body);
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user presses tab key', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  //focus dropdown
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.keyboard('{Tab}');
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user presses esc key', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  //focus dropdown
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.keyboard('{Escape}');
+
+  expect(onOpenChange).toBeCalledTimes(1);
 });
 
-describe('API', () => {
-  test('click on item', async () => {
-    const mockToggle = jest.fn();
-    const mockSelect = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        onSelect={mockSelect}
-        isOpen
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-
-    await user.click(screen.getByText('Link')); // "Link" is the text of the first item
-    expect(mockToggle.mock.calls).toHaveLength(0);
-    expect(mockSelect.mock.calls).toHaveLength(1);
-  });
-
-  test('dropdownItems and children console error ', () => {
-    const myMock = jest.fn();
-    global.console = { error: myMock } as any;
-    render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        isOpen
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      >
-        <div>Children items</div>
-      </Dropdown>
-    );
-    expect(myMock).toHaveBeenCalledWith(
-      'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered'
-    );
-  });
-
-  test('dropdownItems only, no console error ', () => {
-    const myMock = jest.fn();
-    global.console = { error: myMock } as any;
-    render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        isOpen
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(myMock).not.toHaveBeenCalled();
-  });
-
-  test('children only, no console ', () => {
-    const myMock = jest.fn();
-    global.console = { error: myMock } as any;
-    render(
-      <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
-        <div>Children items</div>
-      </Dropdown>
-    );
-    expect(myMock).not.toHaveBeenCalled();
-  });
+test('match snapshot', () => {
+  const { asFragment } = render(
+    <Dropdown
+      ouiaId={'dropdown'}
+      isOpen
+      isScrollable
+      isPlain
+      className={'customClass'}
+      toggle={(toggleRef) => toggle(toggleRef)}
+    >
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownGroup.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownGroup.test.tsx
index 6fe525cbd09..d7dd551e3a4 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/DropdownGroup.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownGroup.test.tsx
@@ -1,10 +1,69 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { DropdownGroup } from '../DropdownGroup';
-
-describe('dropdown groups', () => {
-  test('basic render', () => {
-    const { asFragment } = render(<DropdownGroup label="Group 1">Something</DropdownGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import { DropdownGroup } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../Menu');
+
+const dropdownGroupChildren = <div>Dropdown Group children</div>;
+
+test('renders dropdown group', () => {
+  render(
+    <div data-testid="dropdown-group">
+      <DropdownGroup>{dropdownGroupChildren}</DropdownGroup>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-group').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('Dropdown Group children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByTestId('menu-group-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuGroup', () => {
+  render(<DropdownGroup className="custom-class">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByTestId('menu-group-mock')).toHaveClass('custom-class');
+});
+
+test('passes no label by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('label: undefined')).toBeVisible();
+});
+
+test('passes custom label to MenuGroup', () => {
+  render(<DropdownGroup label="Test label">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('label: Test label')).toBeVisible();
+});
+
+test('passes h1 as labelHeadingLevel to MenuGroup by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('labelHeadingLevel: h1')).toBeVisible();
+});
+
+test('passes custom labelHeadingLevel to MenuGroup', () => {
+  render(<DropdownGroup labelHeadingLevel="h2">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('labelHeadingLevel: h2')).toBeVisible();
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(
+    <DropdownGroup className="custom-class" label="Test label" labelHeadingLevel="h2">
+      {dropdownGroupChildren}
+    </DropdownGroup>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownItem.test.tsx
similarity index 98%
rename from packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx
rename to packages/react-core/src/components/Dropdown/__tests__/DropdownItem.test.tsx
index 8e626ec5be5..a016915e514 100644
--- a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownItem.test.tsx
@@ -2,7 +2,7 @@ import { DropdownItem } from '../../Dropdown';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-jest.mock('../../../../components/Menu');
+jest.mock('../../Menu');
 
 const dropdownItemChildren = <div>Dropdown Item children</div>;
 
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownList.test.tsx
similarity index 96%
rename from packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx
rename to packages/react-core/src/components/Dropdown/__tests__/DropdownList.test.tsx
index 9599158b8a4..ba9a61ee650 100644
--- a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownList.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownList.test.tsx
@@ -2,7 +2,7 @@ import { DropdownList } from '../../Dropdown';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-jest.mock('../../../../components/Menu');
+jest.mock('../../Menu');
 
 const dropdownListChildren = <div>Dropdown List children</div>;
 
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
index ba14c21f220..b6e17bbdd28 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1,978 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dropdown Renders in strict mode 1`] = `
+exports[`match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-dropdown pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-Dropdown-10"
+    data-ouia-component-id="dropdown"
     data-ouia-component-type="PF4/Dropdown"
     data-ouia-safe="true"
   >
-    <button
-      aria-expanded="true"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
+    <div>
+      <div
+        class="customClass"
+        data-testid="menu-mock"
       >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-labelledby="Dropdown Toggle"
-      class="pf-c-dropdown__menu"
-      role="menu"
-    >
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Disabled Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Disabled Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <div
-          class="pf-c-divider"
-          role="separator"
-        />
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Separated Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Separated Action
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown alignment breakpoints 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Dropdown button"
-    class="pf-c-dropdown pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-Dropdown-3"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-labelledby="Dropdown Toggle"
-      class="pf-c-dropdown__menu pf-m-align-left-on-sm pf-m-align-right-on-md pf-m-align-left-on-lg pf-m-align-right-on-xl pf-m-align-left-on-2xl"
-      role="menu"
-    >
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Disabled Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Disabled Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <div
-          class="pf-c-divider"
-          role="separator"
-        />
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Separated Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Separated Action
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown basic 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-Dropdown-8"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="false"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      class="pf-c-dropdown__menu"
-    >
-      <div>
-        BASIC
+        <div>
+          <div>
+            Dropdown children
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown dropup + right aligned 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-top pf-m-align-right"
-    data-ouia-component-id="OUIA-Generated-Dropdown-5"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown dropup 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-top"
-    data-ouia-component-id="OUIA-Generated-Dropdown-4"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown expanded 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Dropdown button"
-    class="pf-c-dropdown pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-Dropdown-6"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-labelledby="Dropdown Toggle"
-      class="pf-c-dropdown__menu"
-      role="menu"
-    >
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Disabled Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Disabled Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <div
-          class="pf-c-divider"
-          role="separator"
-        />
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Separated Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Separated Action
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown primary 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown"
-    data-ouia-component-id="OUIA-Generated-Dropdown-7"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown regular 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown"
-    data-ouia-component-id="OUIA-Generated-Dropdown-1"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown right aligned 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-align-right"
-    data-ouia-component-id="OUIA-Generated-Dropdown-2"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="pf-c-dropdown__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <span
-        class="pf-c-dropdown__toggle-text"
-      >
-        Dropdown
-      </span>
-      <span
-        class="pf-c-dropdown__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle basic 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-Dropdown-17"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="false"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
-    <div
-      class="pf-c-dropdown__menu"
-    >
       <div>
-        BASIC
+        Mock item
       </div>
+      <p>
+        isPlain: true
+      </p>
+      <p>
+        isScrollable: true
+      </p>
+      <p>
+        minWidth: undefined
+      </p>
+    </div>
+    <p>
+      zIndex: 9999
+    </p>
+    <p>
+      isOpen: true
+    </p>
+    <div>
+      <button>
+        Dropdown
+      </button>
     </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle dropup + right aligned 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-top pf-m-align-right"
-    data-ouia-component-id="OUIA-Generated-Dropdown-14"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle dropup 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-top"
-    data-ouia-component-id="OUIA-Generated-Dropdown-13"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle expanded 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Dropdown button"
-    class="pf-c-dropdown pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-Dropdown-15"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="true"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
-    <ul
-      aria-labelledby="Dropdown Toggle"
-      class="pf-c-dropdown__menu"
-      role="menu"
-    >
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Disabled Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          aria-disabled="true"
-          class="pf-m-disabled pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Disabled Action
-        </button>
-      </li>
-      <li
-        role="none"
-      >
-        <div
-          class="pf-c-divider"
-          role="separator"
-        />
-      </li>
-      <li
-        role="none"
-      >
-        <a
-          class="pf-c-dropdown__menu-item"
-          role="none"
-        >
-          Separated Link
-        </a>
-      </li>
-      <li
-        role="none"
-      >
-        <button
-          class="pf-c-dropdown__menu-item"
-          role="none"
-          type="button"
-        >
-          Separated Action
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle plain 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown"
-    data-ouia-component-id="OUIA-Generated-Dropdown-16"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle pf-m-plain"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle regular 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Dropdown button"
-    class="pf-c-dropdown"
-    data-ouia-component-id="OUIA-Generated-Dropdown-11"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`KebabToggle right aligned 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-dropdown pf-m-align-right"
-    data-ouia-component-id="OUIA-Generated-Dropdown-12"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Actions"
-      class="pf-c-dropdown__toggle"
-      id="Dropdown Toggle"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 192 512"
-        width="1em"
-      >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
-      </svg>
-    </button>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
index f165c5963bc..12277b3b888 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
@@ -1,21 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`dropdown groups basic render 1`] = `
+exports[`matches snapshot 1`] = `
 <DocumentFragment>
-  <section
-    class=""
+  <div
+    class="custom-class"
+    data-testid="menu-group-mock"
   >
-    <h1
-      aria-hidden="true"
-      class=""
-    >
-      Group 1
-    </h1>
-    <ul
-      role="none"
-    >
-      Something
-    </ul>
-  </section>
+    <div>
+      Dropdown Group children
+    </div>
+  </div>
+  <p>
+    label: Test label
+  </p>
+  <p>
+    labelHeadingLevel: h2
+  </p>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap
rename to packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap
rename to packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
index d82912e093a..f63dbee8f39 100644
--- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md
+++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
@@ -1,181 +1,52 @@
 ---
 id: Dropdown
 section: components
-cssPrefix: pf-c-dropdown
-propComponents:
-  ['Dropdown', 'DropdownGroup', 'DropdownItem', 'DropdownToggle', 'DropdownToggleCheckbox', 'DropdownToggleAction', DropdownSeparator]
-ouia: true
+cssPrefix: pf-c-menu
+propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
+beta: true
 ---
 
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import { Link } from '@reach/router';
-import avatarImg from '../../Avatar/examples/avatarImg.svg';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
 ### Basic dropdowns
 
-Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The `isOpen` property is used to determine whether the menu is opened or not.
+Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.
 
-All of the items in a dropdown list are created as `<DropdownItem>` components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may: 
-- Use the `tooltip` property to enable tooltip support. 
-- Use the `isDisabled` property to disable an item.
-- Use the `isAriaDisabled` property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
-
-This example also uses a `<DropdownSeparator>`, which adds a horizontal line that splits the menu into 2 sections.
-
-```ts file='./DropdownBasic.tsx'
-```
-
-### Autofocus on dropdown expansion
-
-A `<DropdownItem>` may use the  `autoFocus` property so that it automatically receives focus when the menu is expanded. `autoFocus` cannot be applied to disabled dropdown items.
-
-```ts file="./DropdownInitialSelection.tsx"
-```
-
-### With groups of items
-
-Use the `<DropdownGroup>` component to group sets of related dropdown items together. Use the `isGrouped` property on the `Dropdown` component to indicate that a dropdown contains grouped items.
-
-```ts file="./DropdownGroups.tsx"
-```
-
-### With item descriptions
-
-A `<DropdownItem>` may use the `description` property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
-
-```ts file="./DropdownDescriptions.tsx"
-```
-
-### With custom content
-
-You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
-
-```ts file="./DropdownBasicPanel.tsx"
-```
-
-### With router link items
-
-`<DropdownItem>` may use the `component` property to include router links.
-
-```ts file="./DropdownRouterLink.tsx"
-```
-
-### Toggle styling
-
-You can adjust the styling of a `<DropdownToggle>` using the `toggleVariant` property. `toggleVariant` may be set to 'primary', 'secondary', or 'default'.
-
-```ts file="./DropdownPrimaryToggle.tsx"
-```
-
-### Plain text toggle
-
-A toggle may be styled as plain text using the `isText` and `isPlain`properties. The following example applies these properties to a `<Dropdown>` component.
-
-```ts file="./DropdownPlainTextToggle.tsx"
-```
-
-### Disabled toggles
-
-A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
+A `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
 
-```ts file="./DropdownDisabled.tsx"
-```
-
-### Icon toggle
-
-`<DropdownToggle>` may use a recognizable icon instead of a text label if text would take up too much room. Set the `toggleIndicator` property to `{null}` to remove the default dropdown toggle caret.
-
-```ts file="./DropdownIconOnly.tsx"
-```
-
-### Kebab toggle
-
-Use `<KebabToggle>` to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
-
-```ts file="./DropdownKebab.tsx"
-```
-
-### Toggle with image
-
-The `icon` property can be used to display an image in the `DropdownToggle` and can be used alongside a text label.
-
-```ts file="./DropdownImageAndText.tsx"
-```
-
-### Toggle with badge
-
-You may use a `<BadgeToggle>` to display the number of dropdown menu items.
-
-```ts file="./DropdownBadge.tsx"
-```
-
-### Split button (checkbox)
+The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
 
-To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
-
-The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets. 
-
-```ts file="./DropdownSplitButton.tsx"
-```
-
-### Split button (checkbox with toggle text)
-
-Text labels may optionally be used alongside actions within split buttons.
-
-```ts file="./DropdownSplitButtonText.tsx"
-```
+- Use the `isDisabled` property to disable an item.
+- Use the `onClick` property to trigger a callback for an action.
 
-### Split button (progress checkbox)
+This example also uses a `<Divider>` which passes in `key=”separator”` to split the menu into 2 sections with a horizontal line.
 
-The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
+```ts file="./DropdownBasic.tsx"
 
-```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
 ```
 
-### Split button toggle variants
-
-Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles. 
+### With kebab toggle
 
-The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
+To style a dropdown menu's toggle with a kebab icon, pass a "plain" `<MenuToggle>` to the `toggle` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.
 
-```ts file="./DropdownSplitButtonActionPrimary.tsx"
-```
-
-### Dropdown alignment
-
-The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A `<Dropdown>` may use the `alignments` property to indicate how the menu will align at different screen sizes.
+```ts file="./DropdownWithKebabToggle.tsx"
 
-```ts file="./DropdownAlignmentOnBreakpoints.tsx"
 ```
 
-### Right-positioned menu
-
-The following example demonstrates a `<Dropdown>` with a `position` equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
-
-```ts file="./DropdownPositionRight.tsx"
-```
+### With groups of items
 
-### Upwards directional menu
+To group sets of related dropdown items together, use a `<DropdownGroup>`. When more than 1 `<DropdownGroup>` is created in a menu, use the `label` and `labelHeadingLevel` properties to assign a name and heading level to each group.
 
-The following example demonstrates a `<Dropdown>` with a  `direction` equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
+```ts file="./DropdownWithGroups.tsx"
 
-```ts file="./DropdownDirectionUp.tsx"
 ```
 
-### Using document parent element
-
-Avoid passing in `document.body` to a `<Dropdown>` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `<Dropdown>` options using keyboards or screen readers. 
+### With item descriptions
 
-Instead, append to ‘parent’ to avoid sacrificing accessibility.
+To provide users with more context about a `<DropdownItem>`, pass a short message to `description` property. As shown in the example below, an item's description will appear below its label.
 
-The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective `<Dropdown>`, but the options for the `document.body` variant cannot be navigated via Voice Over.
+```ts file="./DropdownWithDescriptions.tsx"
 
-```ts file="./DropdownAppendBodyVsParent.tsx"
 ```
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
index 027ab53badb..01a599851dc 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
@@ -1,59 +1,51 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core';
 
 export const DropdownBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
   };
 
-  const onFocus = () => {
-    const element = document.getElementById('toggle-basic');
-    element?.focus();
-  };
-
-  const onSelect = () => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
     setIsOpen(false);
-    onFocus();
   };
 
-  const dropdownItems = [
-    <DropdownItem key="link" tooltip="Tooltip for enabled link">
-      Link
-    </DropdownItem>,
-    <DropdownItem key="action" component="button" tooltip="Tooltip for enabled button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
   return (
     <Dropdown
+      isOpen={isOpen}
       onSelect={onSelect}
-      toggle={
-        <DropdownToggle id="toggle-basic" onToggle={onToggle}>
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem itemId={0} key="link">
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
+          Action
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled link">
+          Disabled link
+        </DropdownItem>
+        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
+          Disabled action
+        </DropdownItem>
+        <Divider key="separator" />
+        <DropdownItem itemId={4} key="separated link">
+          Separated link
+        </DropdownItem>
+        <DropdownItem itemId={5} key="separated action">
+          Separated action
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 };
diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
similarity index 92%
rename from packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx
rename to packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
index 7ed93c5604c..9ddc6635191 100644
--- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
similarity index 85%
rename from packages/react-core/src/next/components/Dropdown/examples/DropdownWithGroups.tsx
rename to packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
index 06e958e6965..57c938dde34 100644
--- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithGroups.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { MenuToggle, Divider } from '@patternfly/react-core';
+import { Dropdown, DropdownGroup, DropdownItem, DropdownList, MenuToggle, Divider } from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -19,8 +18,8 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
         <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
@@ -31,7 +30,7 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
           <DropdownItem itemId={0} key="link">
             Link
           </DropdownItem>
-          <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+          <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
             Action
           </DropdownItem>
         </DropdownList>
diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
similarity index 90%
rename from packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx
rename to packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
index fb966f268c7..25ae5e23fae 100644
--- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { Divider, MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
@@ -46,7 +45,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
         <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
           Disabled action
         </DropdownItem>
-        <Divider key="separator" />,
+        <Divider key="separator" />
         <DropdownItem itemId={4} key="separated link">
           Separated link
         </DropdownItem>
diff --git a/packages/react-core/src/components/Dropdown/index.ts b/packages/react-core/src/components/Dropdown/index.ts
index b7ec6230d01..0edc20d91ad 100644
--- a/packages/react-core/src/components/Dropdown/index.ts
+++ b/packages/react-core/src/components/Dropdown/index.ts
@@ -1,12 +1,4 @@
 export * from './Dropdown';
-export * from './DropdownMenu';
-export * from './DropdownWithContext';
-export * from './dropdownConstants';
 export * from './DropdownGroup';
 export * from './DropdownItem';
-export * from './DropdownSeparator';
-export * from './BadgeToggle';
-export * from './KebabToggle';
-export * from './DropdownToggle';
-export * from './DropdownToggleCheckbox';
-export * from './DropdownToggleAction';
+export * from './DropdownList';
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
index 194dd24aa3e..428c33971c0 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
@@ -11,10 +11,15 @@ propComponents:
     'DualListSelectorControlsWrapper',
     'DualListSelectorControl',
     'DualListSelectorTree',
-    'DualListSelectorTreeItemData',
+    'DualListSelectorTreeItemData'
   ]
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
@@ -27,26 +32,31 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 ### Basic
 
 ```ts file="./DualListSelectorBasic.tsx"
+
 ```
 
 ### Basic with tooltips
 
 ```ts file="./DualListSelectorBasicTooltips.tsx"
+
 ```
 
 ### Basic with search
 
 ```ts file="./DualListSelectorBasicSearch.tsx"
+
 ```
 
 ### Using more complex options with actions
 
 ```ts file="./DualListSelectorComplexOptionsActions.tsx"
+
 ```
 
 ### With tree
 
 ```ts file="./DualListSelectorTreeExample.tsx"
+
 ```
 
 ## Composable structure
@@ -76,6 +86,7 @@ The dual list selector can also be built in a composable manner to make customiz
 ### Composable dual list selector
 
 ```ts file="./DualListSelectorComposable.tsx"
+
 ```
 
 ### Composable with drag and drop
@@ -95,9 +106,11 @@ This example only allows reordering the contents of the "chosen" pane with drag
 Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
 ```ts file="DualListSelectorComposableDragDrop.tsx"
+
 ```
 
 ### Composable with tree
 
 ```ts file="DualListSelectorComposableTree.tsx"
+
 ```
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
index 98c8cd1bdb3..4865cfd4ef3 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
+import { Button, ButtonVariant, Checkbox, DualListSelector } from '@patternfly/react-core';
 import {
-  Button,
-  ButtonVariant,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
-  DualListSelector,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 
 export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
@@ -58,13 +55,13 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     (option as React.ReactElement).props.children.includes(input);
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="secondAction" component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="secondAction" component="button">
       Second Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const availableOptionsActions = [
@@ -77,7 +74,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     >
       <PficonSortCommonAscIcon />
     </Button>,
-    <Dropdown
+    <DropdownDeprecated
       toggle={
         <KebabToggle
           isDisabled={isDisabled}
@@ -102,7 +99,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     >
       <PficonSortCommonAscIcon />
     </Button>,
-    <Dropdown
+    <DropdownDeprecated
       toggle={
         <KebabToggle
           isDisabled={isDisabled}
diff --git a/packages/react-core/src/components/Hint/examples/Hint.md b/packages/react-core/src/components/Hint/examples/Hint.md
index b29df2aed1a..1bcedae2a09 100644
--- a/packages/react-core/src/components/Hint/examples/Hint.md
+++ b/packages/react-core/src/components/Hint/examples/Hint.md
@@ -5,14 +5,23 @@ cssPrefix: null
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
+
 ## Examples
 
 ### Basic with title
 
 ```ts file="HintBasicWithTitle.tsx"
+
 ```
 
 ### Basic without title
 
 ```ts file="HintBasicWithoutTitle.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
index 3693e4cda3c..411a65cca17 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
@@ -1,15 +1,11 @@
 import React from 'react';
+import { Hint, HintTitle, HintBody, HintFooter, Button } from '@patternfly/react-core';
 import {
-  Hint,
-  HintTitle,
-  HintBody,
-  HintFooter,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -23,24 +19,24 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   const actions = (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelect}
       toggle={<KebabToggle onToggle={onToggle} id="hint-kebab-toggle" />}
       isOpen={isOpen}
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
index 907f52b0a7b..a9a53fbb91f 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
+import { Hint, HintBody, HintFooter, Button } from '@patternfly/react-core';
 import {
-  Hint,
-  HintBody,
-  HintFooter,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -22,24 +19,24 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   const actions = (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelect}
       toggle={<KebabToggle onToggle={onToggle} id="hint-notitle-kebab-toggle" />}
       isOpen={isOpen}
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index 3872100de72..1304a7ff8b8 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -4,28 +4,45 @@ section: components
 cssPrefix: null
 propComponents: ['InputGroup', 'InputGroupText']
 ---
+
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
 ## Examples
+
 ### Basic
+
 ```ts file='./InputGroupBasic.tsx'
+
 ```
 
 ### With textarea
+
 ```ts file='./InputGroupWithTextarea.tsx'
+
 ```
 
 ### With dropdown
+
 ```ts file='./InputGroupWithDropdown.tsx'
+
 ```
 
 ### With popover
+
 ```ts file ='./InputGroupWithPopover.tsx'
+
 ```
 
 ### With multiple group siblings
+
 ```ts file='./InputGroupWithSiblings.tsx'
+
 ```
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
index 83a25518d4d..341c88e27c2 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -13,21 +18,21 @@ export const InputGroupWithDropdown: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="opt-1" value="Option 1" component="button">
+    <DropdownItemDeprecated key="opt-1" value="Option 1" component="button">
       Option 1
-    </DropdownItem>,
-    <DropdownItem key="opt-2" value="Option 2" component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="opt-2" value="Option 2" component="button">
       Option 2
-    </DropdownItem>,
-    <DropdownItem key="opt-3" value="Option 3" component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="opt-3" value="Option 3" component="button">
       Option 3
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
     <React.Fragment>
       <InputGroup>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
           isOpen={isOpen}
diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md
index 9e696029ca5..1d4de1f0a02 100644
--- a/packages/react-core/src/components/Menu/examples/Menu.md
+++ b/packages/react-core/src/components/Menu/examples/Menu.md
@@ -6,6 +6,11 @@ propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent'
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+BadgeToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -28,6 +33,7 @@ A menu may contain multiple variations of `<MenuItem>` components. The following
 - Use the `isPlain` property to remove the outer box shadow and style the menu plainly instead.
 
 ```ts file="MenuBasic.tsx"
+
 ```
 
 ### Danger menu item
@@ -35,6 +41,7 @@ A menu may contain multiple variations of `<MenuItem>` components. The following
 To indicate that a `<MenuItem>` is connected to a potentially destructive action, use the `isDanger` property. The "Delete" item in the following example demonstrates how danger items look.
 
 ```ts file="MenuDangerMenuItem.tsx"
+
 ```
 
 ### With icons
@@ -42,6 +49,7 @@ To indicate that a `<MenuItem>` is connected to a potentially destructive action
 Use the `icon` property to add a familiar icon before a `<MenuItem>` to accelerate text label recognition.
 
 ```ts file="MenuWithIcons.tsx"
+
 ```
 
 ### With actions
@@ -53,6 +61,7 @@ To trigger an action when any menu action icon is selected, pass a callback to t
 To trigger an action when a specific item's action icon is selected, pass in the `onClick` property to that `<MenuItemAction>`. The following example logs "clicked on code icon" to the console when the "code" icon is selected.
 
 ```ts file="MenuWithActions.tsx"
+
 ```
 
 ### With links
@@ -60,6 +69,7 @@ To trigger an action when a specific item's action icon is selected, pass in the
 Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it.
 
 ```ts file="MenuWithLinks.tsx"
+
 ```
 
 ### With descriptions
@@ -67,6 +77,7 @@ Use the `to` property to add a link to a `<MenuItem>` that directs users to a ne
 Use the `description` property to add short descriptive text below any menu item that needs additional context.
 
 ```ts file="MenuWithDescription.tsx"
+
 ```
 
 ### Item checkbox
@@ -74,6 +85,7 @@ Use the `description` property to add short descriptive text below any menu item
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
 ```ts file="./MenuWithCheckbox.tsx" isBeta
+
 ```
 
 ### Menu footer
@@ -81,6 +93,7 @@ Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSele
 Add a `<MenuFooter>` that contains separate, but related actions at the bottom of a menu.
 
 ```ts file="MenuWithFooter.tsx"
+
 ```
 
 ### Separated items
@@ -88,6 +101,7 @@ Add a `<MenuFooter>` that contains separate, but related actions at the bottom o
 Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use the `component` property to specify the type of divider component to use.
 
 ```ts file="MenuWithSeparators.tsx"
+
 ```
 
 ### Titled groups of items
@@ -95,6 +109,7 @@ Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use t
 Add a `<MenuGroup>` to organize `<MenuContent>` and use the `label` property to title a group of menu items. Use the `labelHeadingLevel` property to assign a heading level to the menu group label.
 
 ```ts file="MenuWithTitledGroups.tsx"
+
 ```
 
 ### With favorites
@@ -102,6 +117,7 @@ Add a `<MenuGroup>` to organize `<MenuContent>` and use the `label` property to
 The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The `isFavorited` property identifies items that a user has favorited.
 
 ```ts file="MenuWithFavorites.tsx"
+
 ```
 
 ### Filtering with search input
@@ -109,6 +125,7 @@ The following menu example allows users to favorite menu items, an action that d
 A [search input](/components/search-input) component can be placed within `<MenuInput>` to render a search input at the top of the menu. In the following example, the `onChange` property of the text input is passed a callback that filters menu items as a user types.
 
 ```ts file="MenuFilteringWithSearchInput.tsx"
+
 ```
 
 ### Option single select menu
@@ -118,6 +135,7 @@ The following example demonstrates a single option select menu that persists a s
 You must also use the `role` property on the `<Menu>` with a value of `"listbox"` when using a non-checkbox select menu.
 
 ```ts file="MenuOptionSingleSelect.tsx"
+
 ```
 
 ### Option multi select menu
@@ -127,6 +145,7 @@ To persist multiple selections that a user makes, use a multiple option select m
 Similar to a single select menu, you must also pass `role="listbox"` to the `<Menu>`.
 
 ```ts file="MenuOptionMultiSelect.tsx"
+
 ```
 
 ### Scrollable menus
@@ -134,6 +153,7 @@ Similar to a single select menu, you must also pass `role="listbox"` to the `<Me
 Use the `isScrollable` property to make a long `<Menu>` scrollable and visually condensed.
 
 ```ts file="MenuScrollable.tsx"
+
 ```
 
 ### Scrollable menu with custom height
@@ -141,6 +161,7 @@ Use the `isScrollable` property to make a long `<Menu>` scrollable and visually
 Adjust the visual size of a scrollable menu by using the `menuHeight` property within `<MenuContent>`. This example adjusts the height to 200px.
 
 ```ts file="MenuScrollableCustomMenuHeight.tsx"
+
 ```
 
 ### With view more
@@ -150,6 +171,7 @@ If you want to initially render only a certain number of menu items within a lar
 In this example, 3 additional menu items are revealed each time the "view more" option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the "view more" link disappears.
 
 ```ts file="MenuWithViewMore.tsx"
+
 ```
 
 ### With drilldown
@@ -163,6 +185,7 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
 - To account for updated heights as menus drill in and out of use, use the `onGetMenuHeight` property. When starting from a drilled-in state, the `onGetMenuHeight` property must define the height of the root menu.
 
 ```ts file="./MenuWithDrilldown.tsx" isBeta
+
 ```
 
 ### Initially drilled-in menu
@@ -170,6 +193,7 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
 To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.
 
 ```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
+
 ```
 
 ### With drilldown - submenu functions
@@ -177,6 +201,7 @@ To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus
 For added flexibility with large menus, you may create a menu by passing a function to `drilldownMenu`. This approach allows you to create menu items dynamically, rather than creating everything up front.
 
 ```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
+
 ```
 
 ### With drilldown breadcrumbs
@@ -186,9 +211,11 @@ Use [breadcrumbs](/components/breadcrumb) when a drilldown menu has more than 2
 To control the height of a menu, use the `maxMenuHeight` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.
 
 ```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
+
 ```
 
 ### With drilldown and inline filter
 
 ```ts file="MenuFilterDrilldown.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
index 001adccd287..a051d15b832 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
@@ -10,11 +10,13 @@ import {
   BreadcrumbItem,
   BreadcrumbHeading,
   MenuBreadcrumb,
-  Dropdown,
-  DropdownItem,
-  BadgeToggle,
   Checkbox
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  BadgeToggle
+} from '@patternfly/react-core/deprecated';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
@@ -58,11 +60,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     fromPathId: string,
     breadcrumb: JSX.Element | null
   ) => {
-    setMenuDrilledIn(prevMenuDrilledIn => {
+    setMenuDrilledIn((prevMenuDrilledIn) => {
       const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
       return prevMenuDrilledIn.slice(0, indexOfMenuId);
     });
-    setDrilldownPath(prevDrilldownPath => {
+    setDrilldownPath((prevDrilldownPath) => {
       const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);
       return prevDrilldownPath.slice(0, indexOfMenuIdPath);
     });
@@ -91,7 +93,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
@@ -103,12 +105,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'app')}>
               1
@@ -116,16 +118,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -137,12 +139,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'label')}>
               1
@@ -150,16 +152,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -171,7 +173,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
@@ -183,12 +185,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-app')}>
               1
@@ -196,16 +198,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
               }
             >
               Pause rollouts
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -217,12 +219,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           toggle={
             <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-label')}>
               1
@@ -230,16 +232,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           }
           isOpen={isOpen}
           dropdownItems={[
-            <DropdownItem
+            <DropdownItemDeprecated
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={event =>
+              onClick={(event) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
               }
             >
               Pause rollouts
-            </DropdownItem>
+            </DropdownItemDeprecated>
           ]}
         />
       </BreadcrumbItem>
@@ -251,7 +253,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
+        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
       >
         Root
       </BreadcrumbItem>
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index 4ea44c88235..a9c1d5a550d 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -6,6 +6,11 @@ propComponents: ['Modal']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
@@ -18,6 +23,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
 ```ts file="./ModalBasic.tsx"
+
 ```
 
 ### Scrollable modals
@@ -25,6 +31,7 @@ Basic modals give users the option to either confirm or cancel an action. To fla
 To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
 
 ```ts file="ModalWithOverflowingContent.tsx"
+
 ```
 
 ### With a static description
@@ -32,6 +39,7 @@ To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={
 To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
 
 ```ts file="./ModalWithDescription.tsx"
+
 ```
 
 ### Top aligned
@@ -39,15 +47,17 @@ To provide additional information about a modal, use the `description` property.
 To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
 
 ```ts file="./ModalTopAligned.tsx"
+
 ```
 
 ### Small modal
 
-To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default". 
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
 
 The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
 
 ```ts file="./ModalSmall.tsx"
+
 ```
 
 ### Medium modal
@@ -55,6 +65,7 @@ The following example displays a "small" modal by passing in `variant={ModalVari
 The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
 
 ```ts file="./ModalMedium.tsx"
+
 ```
 
 ### Large modal
@@ -62,6 +73,7 @@ The following example displays a "medium" modal by passing in `variant={ModalVar
 The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
 
 ```ts file="./ModalLarge.tsx"
+
 ```
 
 ### Custom width
@@ -69,6 +81,7 @@ The following example displays a "large" modal by passing in `variant={ModalVari
 To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
 
 ```ts file="./ModalCustomWidth.tsx"
+
 ```
 
 ### Custom header and footer
@@ -76,6 +89,7 @@ To choose a specific width for a modal, use the `width` property. The following
 To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
 
 ```ts file="./ModalCustomHeaderFooter.tsx"
+
 ```
 
 ### No header or footer
@@ -83,6 +97,7 @@ To add a custom header and footer to a modal, set the `header` and `footer` prop
 To exclusively present information in a modal, remove the `header` and/or `footer`.
 
 ```ts file="./ModalNoHeaderFooter.tsx"
+
 ```
 
 ### Title icon
@@ -90,6 +105,7 @@ To exclusively present information in a modal, remove the `header` and/or `foote
 To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "default" -- or to an imported custom icon. The following example uses a "warning" variant.
 
 ```ts file="./ModalTitleIcon.tsx"
+
 ```
 
 ### Custom title icon
@@ -97,6 +113,7 @@ To add an icon before a modal’s title, use the `titleIconVariant`, which can b
 To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
 
 ```ts file="./ModalCustomTitleIcon.tsx"
+
 ```
 
 ### With wizard
@@ -104,6 +121,7 @@ To add a custom icon before a modal’s title, set `titleIconVariant` to an impo
 To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
 
 ```ts file="./ModalWithWizard.tsx"
+
 ```
 
 ### With dropdown
@@ -111,6 +129,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
+
 ```
 
 ### With help
@@ -118,14 +137,15 @@ To present a menu of actions or links to a user, you can add a [dropdown](/compo
 To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
 
 ```ts file="./ModalWithHelp.tsx"
+
 ```
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form). 
+To collect user input within a modal, you can add a [form](/components/form).
 
-To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id. 
+To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 
 ```ts file="ModalWithForm.tsx"
-```
 
+```
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
index 7c6fb2d7b81..e6a3331e837 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export const ModalWithDropdown: React.FunctionComponent = () => {
@@ -35,16 +40,16 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
@@ -75,7 +80,7 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         </div>
         <br />
         <div>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={onSelect}
             toggle={
               <DropdownToggle
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
index ce8eba76fe5..97bbbf023ff 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
@@ -12,10 +12,18 @@ propComponents:
     'NotificationDrawerList',
     'NotificationDrawerListItem',
     'NotificationDrawerListItemBody',
-    'NotificationDrawerListItemHeader',
+    'NotificationDrawerListItemHeader'
   ]
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+DropdownDirection,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
@@ -23,14 +31,17 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 ### Basic
 
 ```ts file="NotificationDrawerBasic.tsx"
+
 ```
 
 ### Groups
 
 ```ts file="NotificationDrawerGroups.tsx"
+
 ```
 
 ### Lightweight
 
 ```ts file="NotificationDrawerLightweight.tsx"
+
 ```
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 205f4f6f509..690b0872d81 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -14,6 +8,14 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
@@ -34,19 +36,19 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="disabled link" isDisabled>
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled link
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={3} onClose={onDrawerClose}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={<KebabToggle onToggle={onToggle(0)} id="basic-kebab-toggle" />}
           isOpen={isOpen0}
@@ -64,7 +66,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread info notification title"
               srTitle="Info notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(1)} id="basic-toggle-id-1" />}
@@ -84,7 +86,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
               srTitle="Danger notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(2)} id="basic-toggle-id-2" />}
@@ -106,7 +108,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
               srTitle="Danger notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(3)} id="basic-toggle-id-3" />}
@@ -127,7 +129,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Read warning notification title"
               srTitle="Warning notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(4)} id="basic-toggle-id-4" />}
@@ -147,7 +149,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Read success notification title"
               srTitle="Success notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 direction={DropdownDirection.up}
                 onSelect={onSelect}
@@ -164,7 +166,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
           </NotificationDrawerListItem>
           <NotificationDrawerListItem isRead>
             <NotificationDrawerListItemHeader title="Read (default) notification title" srTitle="notification:">
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(6)} id="basic-toggle-id-6" />}
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
index e9c18babd56..972ed343ab8 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
@@ -1,16 +1,10 @@
 import React from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
   EmptyState,
   EmptyStateBody,
   EmptyStateHeader,
   EmptyStateFooter,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -24,6 +18,14 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
@@ -59,20 +61,20 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="disabled link" isDisabled>
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled link
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={4}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <KebabToggle
@@ -102,7 +104,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -127,7 +129,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -153,7 +155,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -178,7 +180,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={onSelect}
@@ -213,7 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -238,7 +240,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -264,7 +266,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -289,7 +291,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={onSelect}
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
index 28f857511df..d87f6f319d9 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem, DropdownItemProps } from '../../next/components/Dropdown';
+import { DropdownItem, DropdownItemProps } from '../Dropdown';
 import { OverflowMenuContext } from './OverflowMenuContext';
 
 export interface OverflowMenuDropdownItemProps extends Omit<DropdownItemProps, 'ref'> {
@@ -16,7 +16,7 @@ export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropd
   ...additionalProps
 }: OverflowMenuDropdownItemProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (!isShared || value.isBelowBreakpoint) && (
         <DropdownItem component="button" itemId={itemId} {...additionalProps}>
           {children}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
index 616e9893291..469e3780946 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
@@ -17,7 +17,6 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico
 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
 
@@ -32,9 +31,10 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  MenuToggle
+  MenuToggle,
+  Dropdown,
+  DropdownList
 } 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 {
@@ -86,7 +86,7 @@ class SimpleOverflowMenu extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -107,7 +107,7 @@ class SimpleOverflowMenu extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -128,9 +128,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } 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';
@@ -223,7 +224,7 @@ class OverflowMenuGroupTypes extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -244,7 +245,7 @@ class OverflowMenuGroupTypes extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -265,9 +266,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } 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';
@@ -349,7 +351,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -370,7 +372,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -391,9 +393,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } 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 {
@@ -443,7 +446,7 @@ class OverflowMenuPersist extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -464,7 +467,7 @@ class OverflowMenuPersist extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
index 75f231cb5bb..367169550fb 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
@@ -7,9 +7,10 @@ import {
   OverflowMenuItem,
   OverflowMenuDropdownItem,
   MenuToggle,
-  Slider
+  Slider,
+  Dropdown,
+  DropdownList
 } 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 = () => {
@@ -84,9 +85,9 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl>
-            <DropdownNext
+            <Dropdown
               onSelect={onSelect}
-              toggle={toggleRef => (
+              toggle={(toggleRef) => (
                 <MenuToggle
                   ref={toggleRef}
                   aria-label="Breakpoint on container example overflow menu"
@@ -98,10 +99,10 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                 </MenuToggle>
               )}
               isOpen={isOpen}
-              onOpenChange={isOpen => setIsOpen(isOpen)}
+              onOpenChange={(isOpen) => setIsOpen(isOpen)}
             >
               <DropdownList>{dropdownItems}</DropdownList>
-            </DropdownNext>
+            </Dropdown>
           </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 3ae904b69b6..00dbe9ffe40 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -11,7 +11,15 @@ 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';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownToggleCheckbox,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Examples
 
@@ -20,26 +28,31 @@ import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownLis
 Toolbar items are individual components that can be placed inside of a toolbar. Buttons or select lists are examples of items. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
 
 ```ts file="./ToolbarItems.tsx"
+
 ```
 
 ### Adjusting item spacers
 
 ```ts file="./ToolbarSpacers.tsx"
+
 ```
 
 ### Adjusting item widths
 
 ```ts file="./ToolbarWidths.tsx"
+
 ```
 
 ### Adjusting toolbar inset
 
 ```ts file="./ToolbarInsets.tsx"
+
 ```
 
 ### Sticky
 
 ```ts file="./ToolbarSticky.tsx"
+
 ```
 
 ### Groups
@@ -47,6 +60,7 @@ Toolbar items are individual components that can be placed inside of a toolbar.
 Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
 
 ```ts file="./ToolbarGroups.tsx"
+
 ```
 
 ## Examples with toggle groups and filters
@@ -56,6 +70,7 @@ A toggle group can be used when you want to collapse a set of items into an over
 ### Component managed toggle groups
 
 ```ts file="./ToolbarComponentManagedToggleGroups.tsx"
+
 ```
 
 ### Consumer managed toggle groups
@@ -68,6 +83,7 @@ If the consumer would prefer to manage the expanded state of the toggle group fo
 - Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.
 
 ```ts file="./ToolbarConsumerManagedToggleGroups.tsx"
+
 ```
 
 ### With filters
@@ -76,6 +92,7 @@ The ToolbarFilter component expects a consumer managed list of applied filters a
 When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.
 
 ```ts file="./ToolbarWithFilters.tsx"
+
 ```
 
 ### With custom chip group content
@@ -83,6 +100,7 @@ When filters are applied, the toolbar will expand in height to make space for a
 The chip groups generated by toolbar filters may be further customized through the `customChipGroupContent` property, which will append to the filter chip groups. This property will remove the default `Clear all filters` button.
 
 ```ts file="./ToolbarCustomChipGroupContent.tsx"
+
 ```
 
 ### Stacked example
@@ -90,4 +108,5 @@ The chip groups generated by toolbar filters may be further customized through t
 There may be situations where all of the required elements simply cannot fit in a single line.
 
 ```ts file="./ToolbarStacked.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index 1ab9f847903..34cea857da8 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -8,9 +8,8 @@ import {
   SelectVariant,
   Pagination,
   Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
   DropdownItem,
+  DropdownList,
   Divider,
   MenuToggle,
   OverflowMenu,
@@ -23,7 +22,12 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -65,7 +69,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setResourceIsExpanded(false);
   };
 
-  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent>| undefined) => {
+  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
     setResourceSelected(event?.target);
     setResourceIsExpanded(false);
   };
@@ -101,34 +105,34 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItemNext key="link">Link</DropdownItemNext>,
-    <DropdownItemNext key="action" component="button">
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
       Action
-    </DropdownItemNext>,
-    <DropdownItemNext key="disabled link" isDisabled>
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItemNext>,
-    <DropdownItemNext key="disabled action" isDisabled component="button">
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItemNext>,
+    </DropdownItem>,
     <Divider key="separator" />,
-    <DropdownItemNext key="separated link">Separated Link</DropdownItemNext>,
-    <DropdownItemNext key="separated action" component="button">
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
       Separated Action
-    </DropdownItemNext>
+    </DropdownItem>
   ];
 
   const splitButtonDropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const toggleGroupItems = (
@@ -192,23 +196,23 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                 </OverflowMenuGroup>
               </OverflowMenuContent>
               <OverflowMenuControl hasAdditionalOptions>
-              <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>
+                <Dropdown
+                  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>
+                </Dropdown>
               </OverflowMenuControl>
             </OverflowMenu>
           </ToolbarItem>
@@ -222,7 +226,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
       <Toolbar>
         <ToolbarContent>
           <ToolbarItem variant="bulk-select">
-            <Dropdown
+            <DropdownDeprecated
               onSelect={onSplitButtonSelect}
               toggle={
                 <DropdownToggle
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
index 9b9e19b4f0e..5d35820b860 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -8,18 +8,14 @@ import {
   ToolbarGroup,
   SelectOptionObject
 } from '@patternfly/react-core';
+import { Button, Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
 import {
-  Button,
-  Select,
-  SelectOption,
-  SelectVariant,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   DropdownPosition,
-  KebabToggle,
-  SearchInput
-} from '@patternfly/react-core';
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -45,11 +41,11 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
     selection: string | SelectOptionObject
   ) => {
     const checked = (event.target as HTMLInputElement).checked;
-    setFilters(prev => {
+    setFilters((prev) => {
       const prevSelections = prev[type];
       return {
         ...prev,
-        [type]: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
       };
     });
   };
@@ -121,7 +117,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
         <ToolbarFilter
           chips={filters.status}
           deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={category => onDeleteGroup(category as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Status"
         >
           <Select
@@ -158,21 +154,21 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
   );
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const toolbarItems = (
@@ -198,7 +194,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>
-        <Dropdown
+        <DropdownDeprecated
           toggle={<KebabToggle onToggle={onKebabToggle} />}
           isOpen={kebabIsOpen}
           isPlain
diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md
index 8e2d3cc6896..e2a1e2f5154 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeView.md
+++ b/packages/react-core/src/components/TreeView/examples/TreeView.md
@@ -5,6 +5,11 @@ cssPrefix: pf-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
 
 ## Examples
@@ -30,7 +35,7 @@ class DefaultTreeView extends React.Component {
       }
     };
 
-    this.onToggle = evt => {
+    this.onToggle = (evt) => {
       const { allExpanded } = this.state;
       this.setState({
         allExpanded: allExpanded !== undefined ? !allExpanded : true
@@ -298,12 +303,14 @@ class SearchTreeView extends React.Component {
       }
     };
 
-    this.onSearch = evt => {
+    this.onSearch = (evt) => {
       const input = evt.target.value;
       if (input === '') {
         this.setState({ filteredItems: this.options, isFiltered: false });
       } else {
-        const filtered = this.options.map(opt => Object.assign({}, opt)).filter(item => this.filterItems(item, input));
+        const filtered = this.options
+          .map((opt) => Object.assign({}, opt))
+          .filter((item) => this.filterItems(item, input));
         this.setState({ filteredItems: filtered, isFiltered: true });
       }
     };
@@ -316,8 +323,8 @@ class SearchTreeView extends React.Component {
       if (item.children) {
         return (
           (item.children = item.children
-            .map(opt => Object.assign({}, opt))
-            .filter(child => this.filterItems(child, input))).length > 0
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => this.filterItems(child, input))).length > 0
         );
       }
     };
@@ -483,18 +490,18 @@ class CheckboxTreeView extends React.Component {
       console.log(checked);
 
       const checkedItemTree = this.options
-        .map(opt => Object.assign({}, opt))
-        .filter(item => this.filterItems(item, treeViewItem));
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) => this.filterItems(item, treeViewItem));
       const flatCheckedItems = this.flattenTree(checkedItemTree);
       console.log('flat', flatCheckedItems);
 
       this.setState(
-        prevState => ({
+        (prevState) => ({
           checkedItems: checked
             ? prevState.checkedItems.concat(
-                flatCheckedItems.filter(item => !prevState.checkedItems.some(i => i.id === item.id))
+                flatCheckedItems.filter((item) => !prevState.checkedItems.some((i) => i.id === item.id))
               )
-            : prevState.checkedItems.filter(item => !flatCheckedItems.some(i => i.id === item.id))
+            : prevState.checkedItems.filter((item) => !flatCheckedItems.some((i) => i.id === item.id))
         }),
         () => {
           console.log('Checked items: ', this.state.checkedItems);
@@ -503,15 +510,15 @@ class CheckboxTreeView extends React.Component {
     };
 
     // Helper functions
-    const isChecked = dataItem => this.state.checkedItems.some(item => item.id === dataItem.id);
-    const areAllDescendantsChecked = dataItem =>
-      dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);
-    const areSomeDescendantsChecked = dataItem =>
-      dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);
+    const isChecked = (dataItem) => this.state.checkedItems.some((item) => item.id === dataItem.id);
+    const areAllDescendantsChecked = (dataItem) =>
+      dataItem.children ? dataItem.children.every((child) => areAllDescendantsChecked(child)) : isChecked(dataItem);
+    const areSomeDescendantsChecked = (dataItem) =>
+      dataItem.children ? dataItem.children.some((child) => areSomeDescendantsChecked(child)) : isChecked(dataItem);
 
-    this.flattenTree = tree => {
+    this.flattenTree = (tree) => {
       var result = [];
-      tree.forEach(item => {
+      tree.forEach((item) => {
         result.push(item);
         if (item.children) {
           result = result.concat(this.flattenTree(item.children));
@@ -520,7 +527,7 @@ class CheckboxTreeView extends React.Component {
       return result;
     };
 
-    this.mapTree = item => {
+    this.mapTree = (item) => {
       const hasCheck = areAllDescendantsChecked(item);
       // Reset checked properties to be updated
       item.checkProps.checked = false;
@@ -537,7 +544,7 @@ class CheckboxTreeView extends React.Component {
       if (item.children) {
         return {
           ...item,
-          children: item.children.map(child => this.mapTree(child))
+          children: item.children.map((child) => this.mapTree(child))
         };
       }
       return item;
@@ -551,15 +558,15 @@ class CheckboxTreeView extends React.Component {
       if (item.children) {
         return (
           (item.children = item.children
-            .map(opt => Object.assign({}, opt))
-            .filter(child => this.filterItems(child, checkedItem))).length > 0
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => this.filterItems(child, checkedItem))).length > 0
         );
       }
     };
   }
 
   render() {
-    const mapped = this.options.map(item => this.mapTree(item));
+    const mapped = this.options.map((item) => this.mapTree(item));
     return <TreeView data={mapped} onCheck={this.onCheck} hasCheckboxes />;
   }
 }
@@ -856,7 +863,12 @@ class CustomBadgesTreeView extends React.Component {
 
 ```js
 import React from 'react';
-import { TreeView, Button, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { TreeView, Button } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon';
 
@@ -881,7 +893,7 @@ class IconTreeView extends React.Component {
       });
     };
 
-    this.onAppLaunchSelect = event => {
+    this.onAppLaunchSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -891,23 +903,23 @@ class IconTreeView extends React.Component {
   render() {
     const { activeItems, isOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled href="www.google.com">
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
         Disabled Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const options = [
       {
         name: 'Application launcher',
         id: 'example7-AppLaunch',
         action: (
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onAppLaunchSelect}
             toggle={<KebabToggle onToggle={this.onToggle} />}
             isOpen={isOpen}
@@ -1067,14 +1079,12 @@ import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 const CompactTreeView: React.FunctionComponent = () => {
   const options: TreeViewDataItem[] = [
     {
-      name:
-        'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
+      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
       title: 'apiVersion',
       id: 'example9-apiVersion'
     },
     {
-      name:
-        'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
+      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
       title: 'kind',
       id: 'example9-kind'
     },
@@ -1089,8 +1099,7 @@ const CompactTreeView: React.FunctionComponent = () => {
       id: 'example9-spec',
       children: [
         {
-          name:
-            'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
+          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
           title: 'minReadySeconds',
           id: 'example9-minReadySeconds'
         },
@@ -1100,20 +1109,17 @@ const CompactTreeView: React.FunctionComponent = () => {
           id: 'example9-paused'
         },
         {
-          name:
-            'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
+          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
           title: 'progressDeadlineSeconds',
           id: 'example9-progressDeadlineSeconds',
           children: [
             {
-              name:
-                'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
+              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
               title: 'revisionHistoryLimit',
               id: 'example9-revisionHistoryLimit',
               children: [
                 {
-                  name:
-                    'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
+                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
                   title: 'matchLabels',
                   id: 'example9-matchLabels'
                 }
@@ -1137,14 +1143,12 @@ import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 const CompactNoBackgroundTreeView: React.FunctionComponent = () => {
   const options: TreeViewDataItem[] = [
     {
-      name:
-        'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
+      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
       title: 'apiVersion',
       id: 'example10-apiVersion'
     },
     {
-      name:
-        'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
+      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
       title: 'kind',
       id: 'example10-kind'
     },
@@ -1159,8 +1163,7 @@ const CompactNoBackgroundTreeView: React.FunctionComponent = () => {
       id: 'example10-spec',
       children: [
         {
-          name:
-            'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
+          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
           title: 'minReadySeconds',
           id: 'example10-minReadySeconds'
         },
@@ -1170,20 +1173,17 @@ const CompactNoBackgroundTreeView: React.FunctionComponent = () => {
           id: 'example10-paused'
         },
         {
-          name:
-            'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
+          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
           title: 'progressDeadlineSeconds',
           id: 'example10-progressDeadlineSeconds',
           children: [
             {
-              name:
-                'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
+              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
               title: 'revisionHistoryLimit',
               id: 'example10-revisionHistoryLimit',
               children: [
                 {
-                  name:
-                    'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
+                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
                   title: 'matchLabels',
                   id: 'example10-matchLabels'
                 }
@@ -1214,13 +1214,13 @@ class MemoTreeView extends React.Component {
 
     this.onSelect = (evt, treeViewItem) => {
       let filtered = [];
-      this.options.forEach(item => this.filterItems(item, treeViewItem.id, filtered));
+      this.options.forEach((item) => this.filterItems(item, treeViewItem.id, filtered));
       this.setState({
         activeItems: filtered
       });
     };
 
-    this.onToggle = evt => {
+    this.onToggle = (evt) => {
       const { allExpanded } = this.state;
       this.setState({
         allExpanded: allExpanded !== undefined ? !allExpanded : true
@@ -1230,7 +1230,7 @@ class MemoTreeView extends React.Component {
     this.filterItems = (item, input, list) => {
       if (item.children) {
         let childContained = false;
-        item.children.forEach(child => {
+        item.children.forEach((child) => {
           if (childContained) {
             this.filterItems(child, input, list);
           } else {
diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md
index 72329c72de0..922b97801cb 100644
--- a/packages/react-core/src/demos/AlertGroup.md
+++ b/packages/react-core/src/demos/AlertGroup.md
@@ -7,7 +7,12 @@ import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import DashboardWrapper from './examples/DashboardWrapper';
 import DashboardHeader from './examples/DashboardHeader';
-
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle,
+DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -16,4 +21,5 @@ This demonstrates how you can assemble a full page view including the use of ale
 ### Alert group toast with notification drawer
 
 ```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen
-```
\ No newline at end of file
+
+```
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index 304fd36aab5..c3511c575ee 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -20,7 +20,15 @@ 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';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+DropdownToggleCheckbox,
+KebabToggle,
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -39,11 +47,7 @@ import {
   CardBody,
   Checkbox,
   Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownToggleCheckbox,
+  DropdownList,
   EmptyState,
   EmptyStateHeader,
   EmptyStateIcon,
@@ -51,7 +55,6 @@ import {
   EmptyStateVariant,
   EmptyStateActions,
   Gallery,
-  KebabToggle,
   MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
@@ -71,7 +74,15 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  DropdownPosition,
+  DropdownToggleCheckbox,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -411,19 +422,19 @@ class CardViewBasic extends React.Component {
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
     const splitButtonDropdownItems = [
-      <DropdownItem key="item-1" onClick={this.selectNone.bind(this)}>
+      <DropdownItemDeprecated key="item-1" onClick={this.selectNone.bind(this)}>
         Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={this.selectPage.bind(this)}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-2" onClick={this.selectPage.bind(this)}>
         Select page ({this.state.perPage} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={this.selectAll.bind(this)}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-3" onClick={this.selectAll.bind(this)}>
         Select all ({this.state.totalItemCount} items)
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
-      <Dropdown
+      <DropdownDeprecated
         position={DropdownPosition.left}
         onSelect={this.onSplitButtonSelect}
         toggle={
@@ -501,7 +512,9 @@ class CardViewBasic extends React.Component {
     } = this.state;
 
     const toolbarKebabDropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="link">Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={0} key="link">
+        Link
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem itemId={1} key="action" component="button">
         Action
       </OverflowMenuDropdownItem>,
@@ -512,7 +525,9 @@ class CardViewBasic extends React.Component {
         Disabled Action
       </OverflowMenuDropdownItem>,
       <DropdownSeparator itemId={4} key="separator" />,
-      <OverflowMenuDropdownItem itemId={5} key="separated link">Separated Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={5} key="separated link">
+        Separated Link
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
         Separated Action
       </OverflowMenuDropdownItem>
@@ -528,9 +543,9 @@ class CardViewBasic extends React.Component {
               <Button variant="primary">Create a project</Button>
             </OverflowMenuItem>
             <OverflowMenuControl hasAdditionalOptions>
-              <DropdownNext
+              <Dropdown
                 onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={toggleRef => (
+                toggle={(toggleRef) => (
                   <MenuToggle
                     ref={toggleRef}
                     aria-label="Toolbar kebab overflow menu"
@@ -544,7 +559,7 @@ class CardViewBasic extends React.Component {
                 isOpen={isLowerToolbarKebabDropdownOpen}
               >
                 <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
-              </DropdownNext>
+              </Dropdown>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
@@ -619,7 +634,7 @@ class CardViewBasic extends React.Component {
                     actions={{
                       actions: (
                         <>
-                          <Dropdown
+                          <DropdownDeprecated
                             isPlain
                             position="right"
                             onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
@@ -632,10 +647,10 @@ class CardViewBasic extends React.Component {
                             }
                             isOpen={this.state[key]}
                             dropdownItems={[
-                              <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
+                              <DropdownItemDeprecated key="trash" onClick={this.deleteItem(product)} position="right">
                                 <TrashIcon />
                                 Delete
-                              </DropdownItem>
+                              </DropdownItemDeprecated>
                             ]}
                           />
                           <Checkbox
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index f00ff800a5f..916a9a33c1a 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -3,6 +3,7 @@ id: Card
 section: components
 ---
 
+import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, KebabToggle } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
@@ -31,15 +32,17 @@ import {
   Level,
   LabelGroup,
   Label,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Grid,
   Flex,
   List,
   ListItem,
   Button
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
@@ -71,22 +74,22 @@ class CardGridDemo extends React.Component {
   render() {
     const { isCardExpanded, isDropdownOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="action1" component="button">
+      <DropdownItemDeprecated key="action1" component="button">
         Action 1
-      </DropdownItem>,
-      <DropdownItem key="action2" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action2" component="button">
         Action 2
-      </DropdownItem>,
-      <DropdownItem key="disabled action3" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action3" isDisabled component="button">
         Disabled Action 3
-      </DropdownItem>,
-      <DropdownItem key="action4" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action4" component="button">
         Action 4
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const headerActions = (
-      <Dropdown
+      <DropdownDeprecated
         onSelect={this.onActionSelect}
         toggle={<KebabToggle onToggle={this.onActionToggle} />}
         isOpen={isDropdownOpen}
diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md
index 66715f33ba4..64a36d1b6e3 100644
--- a/packages/react-core/src/demos/DataListDemo.md
+++ b/packages/react-core/src/demos/DataListDemo.md
@@ -3,6 +3,12 @@ id: Data list
 section: components
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -25,10 +31,6 @@ import {
   DataListToggle,
   DataListContent,
   DataListItemCells,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
@@ -37,6 +39,12 @@ import {
   SearchInput,
   Tooltip
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
@@ -82,20 +90,20 @@ class ExpandableDataList extends React.Component {
       this.setState({ isOpen3 });
     };
 
-    this.onSelect1 = event => {
-      this.setState(prevState => ({
+    this.onSelect1 = (event) => {
+      this.setState((prevState) => ({
         isOpen1: !prevState.isOpen1
       }));
     };
 
-    this.onSelect2 = event => {
-      this.setState(prevState => ({
+    this.onSelect2 = (event) => {
+      this.setState((prevState) => ({
         isOpen2: !prevState.isOpen2
       }));
     };
 
-    this.onSelect3 = event => {
-      this.setState(prevState => ({
+    this.onSelect3 = (event) => {
+      this.setState((prevState) => ({
         isOpen3: !prevState.isOpen3
       }));
     };
@@ -146,7 +154,7 @@ class ExpandableDataList extends React.Component {
   }
 
   render() {
-    const toggle = id => {
+    const toggle = (id) => {
       const expanded = this.state.expanded;
       const index = expanded.indexOf(id);
       const newExpanded =
@@ -197,20 +205,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen1}
                   onSelect={this.onSelect1}
                   toggle={<KebabToggle onToggle={this.onToggle1} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -257,20 +265,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen2}
                   onSelect={this.onSelect2}
                   toggle={<KebabToggle onToggle={this.onToggle2} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -317,20 +325,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen3}
                   onSelect={this.onSelect3}
                   toggle={<KebabToggle onToggle={this.onToggle3} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md
index 41621df306f..70b6301f342 100644
--- a/packages/react-core/src/demos/DateTimePicker.md
+++ b/packages/react-core/src/demos/DateTimePicker.md
@@ -6,6 +6,11 @@ beta: true
 
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -14,4 +19,5 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ### Date and time picker
 
 ```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
+
 ```
diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md
index 325147250ec..8e2e1dbe55c 100644
--- a/packages/react-core/src/demos/Masthead.md
+++ b/packages/react-core/src/demos/Masthead.md
@@ -9,6 +9,13 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownToggle,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -17,4 +24,5 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
+
 ```
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 50a67129044..67e10126a37 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -3,6 +3,13 @@ id: Navigation
 section: components
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -44,7 +51,7 @@ class PageLayoutDefaultNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -142,7 +149,7 @@ class PageLayoutGroupsNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -253,7 +260,7 @@ class PageLayoutExpandableNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId,
         activeGroup: result.groupId
@@ -359,13 +366,8 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -380,6 +382,13 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -402,7 +411,7 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -414,13 +423,13 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -452,21 +461,21 @@ class PageLayoutHorizontalNav extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerTools = (
       <PageHeaderTools>
@@ -493,7 +502,7 @@ class PageLayoutHorizontalNav extends React.Component {
               lg: 'hidden'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onKebabDropdownSelect}
@@ -505,7 +514,7 @@ class PageLayoutHorizontalNav extends React.Component {
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
@@ -592,13 +601,13 @@ class VerticalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = result => {
+    this.onSubNavSelect = (result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -715,13 +724,8 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -737,6 +741,13 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -760,7 +771,7 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -772,19 +783,19 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = result => {
+    this.onSubNavSelect = (result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -822,21 +833,21 @@ class HorizontalNavWithSubnav extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerTools = (
       <PageHeaderTools>
@@ -863,7 +874,7 @@ class HorizontalNavWithSubnav extends React.Component {
               lg: 'hidden'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onKebabDropdownSelect}
@@ -875,7 +886,7 @@ class HorizontalNavWithSubnav extends React.Component {
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
@@ -994,7 +1005,7 @@ class PageLayoutTertiaryNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1096,7 +1107,7 @@ class PageLayoutLightNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1179,13 +1190,8 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -1201,6 +1207,13 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -1225,7 +1238,7 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -1237,13 +1250,13 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1269,14 +1282,8 @@ class PageLayoutManualNav extends React.Component {
   }
 
   render() {
-    const {
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      isNavOpenDesktop,
-      isNavOpenMobile,
-      isMobileView
-    } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isNavOpenDesktop, isNavOpenMobile, isMobileView } =
+      this.state;
 
     const PageNav = (
       <Nav onSelect={this.onNavSelect} aria-label="Nav">
@@ -1300,21 +1307,21 @@ class PageLayoutManualNav extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerTools = (
       <PageHeaderTools>
@@ -1342,7 +1349,7 @@ class PageLayoutManualNav extends React.Component {
               breakpoint: 'lg'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onKebabDropdownSelect}
@@ -1354,7 +1361,7 @@ class PageLayoutManualNav extends React.Component {
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
@@ -1445,7 +1452,7 @@ class VerticalPage extends React.Component {
       isNavOpen: true,
       activeItem: 0
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1466,7 +1473,7 @@ class VerticalPage extends React.Component {
             <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>
               Additional settings
             </MenuItem>
-            {[...Array(numFlyouts - depth).keys()].map(j => (
+            {[...Array(numFlyouts - depth).keys()].map((j) => (
               <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`} to={`#menu-link-${depth}-${j}`}>
                 Settings menu {depth} item {j}
               </MenuItem>
@@ -1519,4 +1526,5 @@ class VerticalPage extends React.Component {
 ### Drilldown nav
 
 ```js isBeta isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+
 ```
diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
index 2351f7b1b56..226f41334ba 100644
--- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
+++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
@@ -11,6 +11,16 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownPosition,
+DropdownDirection,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -30,13 +40,6 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
@@ -44,7 +47,6 @@ import {
   EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -75,6 +77,16 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -221,21 +233,21 @@ class BasicNotificationDrawer extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerToolbar = (
       <Toolbar>
@@ -277,7 +289,7 @@ class BasicNotificationDrawer extends React.Component {
                   lg: 'hidden'
                 }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position="right"
                   onSelect={this.onKebabDropdownSelect}
@@ -289,7 +301,7 @@ class BasicNotificationDrawer extends React.Component {
               <ToolbarItem
                 visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   position="right"
                   onSelect={this.onDropdownSelect}
                   isOpen={isDropdownOpen}
@@ -340,35 +352,35 @@ class BasicNotificationDrawer extends React.Component {
     const drawerContent = 'Panel content';
 
     const notificationDrawerActions = [
-      <DropdownItem key="markAllRead" onClick={this.markAllRead} component="button">
+      <DropdownItemDeprecated key="markAllRead" onClick={this.markAllRead} component="button">
         Mark all read
-      </DropdownItem>,
-      <DropdownItem key="clearAll" onClick={() => this.showNotifications(false)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="clearAll" onClick={() => this.showNotifications(false)} component="button">
         Clear all
-      </DropdownItem>,
-      <DropdownItem key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
         Unclear last
-      </DropdownItem>,
-      <DropdownItem key="settings" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="settings" component="button">
         Settings
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const notificationDrawerDropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="disabled link" isDisabled>
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const notificationDrawer = (
       <NotificationDrawer ref={this.drawerRef}>
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
@@ -393,7 +405,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
                     toggle={
@@ -422,7 +434,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
                     toggle={
@@ -452,7 +464,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
                     toggle={
@@ -481,7 +493,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={this.onSelect}
@@ -569,13 +581,6 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
@@ -583,7 +588,6 @@ import {
   EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -616,6 +620,16 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -815,21 +829,21 @@ class GroupedNotificationDrawer extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerToolbar = (
       <Toolbar>
@@ -871,7 +885,7 @@ class GroupedNotificationDrawer extends React.Component {
                   lg: 'hidden'
                 }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position="right"
                   onSelect={this.onKebabDropdownSelect}
@@ -883,7 +897,7 @@ class GroupedNotificationDrawer extends React.Component {
               <ToolbarItem
                 visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   position="right"
                   onSelect={this.onDropdownSelect}
                   isOpen={isDropdownOpen}
@@ -934,35 +948,35 @@ class GroupedNotificationDrawer extends React.Component {
     const drawerContent = 'Panel content';
 
     const notificationDrawerDropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="disabled link" isDisabled>
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const notificationDrawerActions = [
-      <DropdownItem key="markAllRead" onClick={this.markAllRead} component="button">
+      <DropdownItemDeprecated key="markAllRead" onClick={this.markAllRead} component="button">
         Mark all read
-      </DropdownItem>,
-      <DropdownItem key="clearAll" onClick={() => this.showNotifications(false)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="clearAll" onClick={() => this.showNotifications(false)} component="button">
         Clear all
-      </DropdownItem>,
-      <DropdownItem key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
         Unclear last
-      </DropdownItem>,
-      <DropdownItem key="settings" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="settings" component="button">
         Settings
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const notificationDrawer = (
       <NotificationDrawer ref={this.drawerRef}>
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
@@ -994,7 +1008,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread info notification title"
                       srTitle="Info notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1023,7 +1037,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                       srTitle="Danger notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1053,7 +1067,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read warning notification title"
                       srTitle="Warning notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1082,7 +1096,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read success notification title"
                       srTitle="Success notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
@@ -1121,7 +1135,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread info notification title"
                       srTitle="Info notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1150,7 +1164,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                       srTitle="Danger notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1180,7 +1194,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read warning notification title"
                       srTitle="Warning notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1209,7 +1223,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read success notification title"
                       srTitle="Success notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
index 200d36df8bc..00c890d826f 100644
--- a/packages/react-core/src/demos/Page.md
+++ b/packages/react-core/src/demos/Page.md
@@ -12,6 +12,13 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownToggle,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
@@ -27,11 +34,13 @@ This demonstrates a variety of navigation patterns in the context of a full page
 ### Sticky section group
 
 ```ts file='./examples/Page/PageStickySectionGroup.tsx' isFullscreen
+
 ```
 
 ### Sticky section group (alternate syntax)
 
-```ts  file='./examples/Page/PageStickySectionGroupAlternate.tsx' isFullscreen
+```ts file='./examples/Page/PageStickySectionGroupAlternate.tsx' isFullscreen
+
 ```
 
 ### Sticky section group (using PageHeader)
@@ -39,9 +48,11 @@ This demonstrates a variety of navigation patterns in the context of a full page
 This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
 
 ```ts file='./examples/Page/PageStickySectionGroupUsingPageHeader.tsx' isFullscreen
+
 ```
 
 ### Sticky section breadcrumb (with breakpoints)
 
 ```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen
+
 ```
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 8e53e3416eb..ff5dcbec16f 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -3,6 +3,15 @@ id: Primary-detail
 section: demos
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownToggleCheckbox,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
@@ -960,12 +969,6 @@ import {
   CardTitle,
   Checkbox,
   Divider,
-  Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-  DropdownItem,
-  DropdownPosition,
-  DropdownSeparator,
   Drawer,
   DrawerActions,
   DrawerPanelBody,
@@ -977,7 +980,6 @@ import {
   Flex,
   FlexItem,
   Gallery,
-  KebabToggle,
   PageSection,
   PageSectionVariants,
   Pagination,
@@ -993,6 +995,15 @@ import {
   ToolbarContent,
   ToolbarFilter
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import pfIcon from './pf-logo-small.svg';
@@ -1346,19 +1357,19 @@ class PrimaryDetailCardView extends React.Component {
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
     const splitButtonDropdownItems = [
-      <DropdownItem key="item-1" onClick={this.selectNone}>
+      <DropdownItemDeprecated key="item-1" onClick={this.selectNone}>
         Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={this.selectPage}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-2" onClick={this.selectPage}>
         Select page ({this.state.res.length} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={this.selectAll}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-3" onClick={this.selectAll}>
         Select all ({this.state.totalItemCount} items)
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
-      <Dropdown
+      <DropdownDeprecated
         position={DropdownPosition.left}
         onSelect={this.onSplitButtonSelect}
         toggle={
@@ -1388,21 +1399,21 @@ class PrimaryDetailCardView extends React.Component {
       this.state;
 
     const toolbarKebabDropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
         Disabled Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
+      <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button">
         Separated Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const toolbarItems = (
@@ -1415,7 +1426,7 @@ class PrimaryDetailCardView extends React.Component {
           <Button variant="secondary">Action</Button>
         </ToolbarItem>
         <ToolbarItem>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onToolbarKebabDropdownSelect}
             toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />}
             isOpen={isLowerToolbarKebabDropdownOpen}
@@ -1463,7 +1474,7 @@ class PrimaryDetailCardView extends React.Component {
               actions={{
                 actions: (
                   <>
-                    <Dropdown
+                    <DropdownDeprecated
                       isPlain
                       position="right"
                       onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
@@ -1476,10 +1487,14 @@ class PrimaryDetailCardView extends React.Component {
                       }
                       isOpen={this.state[key]}
                       dropdownItems={[
-                        <DropdownItem key="trash" onClick={(e) => this.deleteItem(e, product)} position="right">
+                        <DropdownItemDeprecated
+                          key="trash"
+                          onClick={(e) => this.deleteItem(e, product)}
+                          position="right"
+                        >
                           <TrashIcon />
                           Delete
-                        </DropdownItem>
+                        </DropdownItemDeprecated>
                       ]}
                     />
                     <Checkbox
@@ -1748,9 +1763,6 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
   Flex,
   FlexItem,
   PageSection,
@@ -1760,6 +1772,11 @@ import {
   TextContent,
   Title
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
@@ -1845,8 +1862,8 @@ class PrimaryDetailDataListInCard extends React.Component {
     );
 
     const dropdownItems = [
-      <DropdownItem key="option1">Option 1</DropdownItem>,
-      <DropdownItem key="option2">Option 2</DropdownItem>
+      <DropdownItemDeprecated key="option1">Option 1</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="option2">Option 2</DropdownItemDeprecated>
     ];
 
     const drawerContent = (
@@ -1854,7 +1871,7 @@ class PrimaryDetailDataListInCard extends React.Component {
         <Toolbar id="data-list-data-toolbar" usePageInsets>
           <ToolbarContent>
             <ToolbarItem>
-              <Dropdown
+              <DropdownDeprecated
                 onSelect={this.onDropdownSelect}
                 toggle={
                   <DropdownToggle
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index 12dfc92b295..8c225424935 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -12,8 +12,7 @@ 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';
-
+import { KebabToggle } from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -443,19 +442,23 @@ TabsOpenWithSecondaryTabsDemo = () => {
 ### Nested tabs
 
 ```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+
 ```
 
 ### Nested, unindented tabs
 
 ```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
+
 ```
 
 ### Tables and tabs
 
 ```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
+
 ```
 
 ### Modal tabs
 
 ```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
+
 ```
diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
index 79a5895dfc1..60598e6203f 100644
--- a/packages/react-core/src/demos/Toolbar.md
+++ b/packages/react-core/src/demos/Toolbar.md
@@ -4,6 +4,14 @@ section: components
 ---
 
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownToggle,
+DropdownToggleAction,
+DropdownPosition,
+DropdownSeparator
+} from '@patternfly/react-core/deprecated';
 
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
@@ -27,12 +35,6 @@ import {
   Badge,
   Button,
   Checkbox,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownToggleAction,
-  DropdownPosition,
-  DropdownSeparator,
   SearchInput,
   Select,
   SelectOption,
@@ -40,6 +42,14 @@ import {
   PageSectionVariants,
   Tooltip
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  DropdownToggleAction,
+  DropdownPosition,
+  DropdownSeparator
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
@@ -118,13 +128,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onOptionSelect = event => {
+    this.onOptionSelect = (event) => {
       this.setState({
         optionExpanded: !this.state.optionExpanded
       });
     };
 
-    this.onOptionSelectMobile = event => {
+    this.onOptionSelectMobile = (event) => {
       this.setState({
         optionExpandedMobile: !this.state.optionExpandedMobile
       });
@@ -142,13 +152,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onExternalSelect = event => {
+    this.onExternalSelect = (event) => {
       this.setState({
         externalExpanded: !this.state.externalExpanded
       });
     };
 
-    this.onExternalSelectMobile = event => {
+    this.onExternalSelectMobile = (event) => {
       this.setState({
         externalExpandedMobile: !this.state.externalExpandedMobile
       });
@@ -166,27 +176,27 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onDownloadSelect = event => {
+    this.onDownloadSelect = (event) => {
       this.setState({
         downloadExpanded: !this.state.downloadExpanded
       });
     };
 
-    this.onDownloadSelectMobile = event => {
+    this.onDownloadSelectMobile = (event) => {
       this.setState({
         downloadExpandedMobile: !this.state.downloadExpandedMobile
       });
     };
 
-    this.onExternalClick = event => {
+    this.onExternalClick = (event) => {
       window.alert('Open external logs!');
     };
 
-    this.onDownloadClick = event => {
+    this.onDownloadClick = (event) => {
       window.alert('Action!');
     };
 
-    this.pauseOrStart = event => {
+    this.pauseOrStart = (event) => {
       this.setState({
         isPaused: !this.state.isPaused
       });
@@ -200,7 +210,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       this.setState({ secondSwitchChecked });
     };
 
-    this.onClearLogs = event => {
+    this.onClearLogs = (event) => {
       this.setState({
         optionExpanded: false
       });
@@ -214,7 +224,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onSearchClear = event => {
+    this.onSearchClear = (event) => {
       this.setState({
         searchValue: '',
         searchResultsCount: 0,
@@ -222,8 +232,8 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onSearchNext = event => {
-      this.setState(prevState => {
+    this.onSearchNext = (event) => {
+      this.setState((prevState) => {
         const newCurrentResult = prevState.currentSearchResult + 1;
         return {
           currentSearchResult:
@@ -232,8 +242,8 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onSearchPrevious = event => {
-      this.setState(prevState => {
+    this.onSearchPrevious = (event) => {
+      this.setState((prevState) => {
         const newCurrentResult = prevState.currentSearchResult - 1;
         return {
           currentSearchResult: newCurrentResult > 0 ? newCurrentResult : 1
@@ -276,28 +286,28 @@ class ConsoleLogViewerToolbar extends React.Component {
     } = this.state;
 
     const externalDropdownItems = [
-      <DropdownItem key="action-1" component="button" onClick={this.onExternalClick}>
+      <DropdownItemDeprecated key="action-1" component="button" onClick={this.onExternalClick}>
         External logs
-      </DropdownItem>,
-      <DropdownItem key="action-2" component="button" onClick={this.onExternalClick}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action-2" component="button" onClick={this.onExternalClick}>
         External logs
-      </DropdownItem>,
-      <DropdownItem key="action-3" component="button" onClick={this.onExternalClick}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action-3" component="button" onClick={this.onExternalClick}>
         External logs
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const downloadDropdownItems = [
-      <DropdownItem key="action-4" component="button" onClick={this.onDownloadClick}>
+      <DropdownItemDeprecated key="action-4" component="button" onClick={this.onDownloadClick}>
         Current container logs
-      </DropdownItem>,
-      <DropdownItem key="action-5" component="button" onClick={this.onDownloadClick}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action-5" component="button" onClick={this.onDownloadClick}>
         All container logs
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const optionDropdownItems = [
-      <DropdownItem key="switch-1">
+      <DropdownItemDeprecated key="switch-1">
         <Checkbox
           label="Display timestamp"
           isChecked={firstSwitchChecked}
@@ -305,8 +315,8 @@ class ConsoleLogViewerToolbar extends React.Component {
           id="switchMobileCheckbox1"
           name="check1"
         />
-      </DropdownItem>,
-      <DropdownItem key="switch-2">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="switch-2">
         <Checkbox
           label="Wrap lines"
           isChecked={secondSwitchChecked}
@@ -314,11 +324,11 @@ class ConsoleLogViewerToolbar extends React.Component {
           id="switchMobileCheckbox2"
           name="check2"
         />
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="clear-log" onClick={this.onClearLogs}>
+      <DropdownItemDeprecated key="clear-log" onClick={this.onClearLogs}>
         Clear logs
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const selectDropdownContent = (
@@ -378,7 +388,7 @@ class ConsoleLogViewerToolbar extends React.Component {
           />
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             toggle={
               <DropdownToggle id="option-toggle-desktop" onToggle={this.onOptionToggle} icon={<CogIcon />}>
                 Options
@@ -413,7 +423,7 @@ class ConsoleLogViewerToolbar extends React.Component {
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Options</div>}>
-            <Dropdown
+            <DropdownDeprecated
               toggle={
                 <DropdownToggle
                   aria-label="Options"
@@ -447,7 +457,7 @@ class ConsoleLogViewerToolbar extends React.Component {
     const rightAlignedItemsDesktop = (
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onExternalSelect}
             toggle={
               <DropdownToggle id="external-toggle" onToggle={this.onExternalToggle}>
@@ -459,7 +469,7 @@ class ConsoleLogViewerToolbar extends React.Component {
           />
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onDownloadSelect}
             toggle={
               <DropdownToggle id="download-toggle" onToggle={this.onDownloadToggle}>
@@ -477,7 +487,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>External logs</div>}>
-            <Dropdown
+            <DropdownDeprecated
               onSelect={this.onExternalSelectMobile}
               toggle={
                 <DropdownToggle
@@ -494,7 +504,7 @@ class ConsoleLogViewerToolbar extends React.Component {
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Download</div>}>
-            <Dropdown
+            <DropdownDeprecated
               onSelect={this.onDownloadSelectMobile}
               toggle={
                 <DropdownToggle
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index 731f76f821c..4d07e7fb659 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -1,13 +1,10 @@
 import React, { useEffect } from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
   EmptyState,
   EmptyStateBody,
   EmptyStateHeader,
   EmptyStateIcon,
-  KebabToggle,
   NotificationBadge,
   NotificationBadgeVariant,
   NotificationDrawer,
@@ -21,7 +18,6 @@ import {
   PageSectionVariants,
   TextContent,
   Text,
-  DropdownPosition,
   EmptyStateVariant,
   NumberInput,
   Alert,
@@ -29,6 +25,12 @@ import {
   AlertGroup,
   AlertActionCloseButton
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle,
+  DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import DashboardWrapper from '../DashboardWrapper';
@@ -214,27 +216,27 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   );
 
   const notificationDrawerActions = [
-    <DropdownItem key="markAllRead" onClick={markAllNotificationsRead} component="button">
+    <DropdownItemDeprecated key="markAllRead" onClick={markAllNotificationsRead} component="button">
       Mark all read
-    </DropdownItem>,
-    <DropdownItem key="clearAll" onClick={removeAllNotifications} component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="clearAll" onClick={removeAllNotifications} component="button">
       Clear all
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const notificationDrawerDropdownItems = (key: React.Key) => [
-    <DropdownItem key="markRead" component="button" onClick={() => markNotificationRead(key)}>
+    <DropdownItemDeprecated key="markRead" component="button" onClick={() => markNotificationRead(key)}>
       Mark as read
-    </DropdownItem>,
-    <DropdownItem key="action" component="button" onClick={() => removeNotification(key)}>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button" onClick={() => removeNotification(key)}>
       Clear
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const notificationDrawer = (
     <NotificationDrawer>
       <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={() => setDrawerExpanded(false)}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onDropdownSelect}
           toggle={
             <KebabToggle
@@ -260,7 +262,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                 onClick={() => markNotificationRead(key)}
               >
                 <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onDropdownSelect}
                     toggle={
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index e790a189107..f6a878e47f3 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -7,11 +7,6 @@ import {
   Button,
   ButtonVariant,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
-  KebabToggle,
   Masthead,
   MastheadToggle,
   MastheadMain,
@@ -23,6 +18,13 @@ import {
   ToolbarItem,
   PageToggleButton
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -96,39 +98,39 @@ export default class DashboardHeader extends React.Component {
     const { notificationBadge } = this.props;
 
     const kebabDropdownItems = [
-      <DropdownItem key="settings">
+      <DropdownItemDeprecated key="settings">
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="help">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="help">
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const fullKebabItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>,
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>,
       <Divider key="divider" />,
-      <DropdownItem key="settings">
+      <DropdownItemDeprecated key="settings">
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="help">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="help">
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
 
     const appLauncherItems = [
@@ -167,6 +169,7 @@ export default class DashboardHeader extends React.Component {
                   onToggle={this.onAppLauncherToggle}
                   isOpen={isAppLauncherOpen}
                   items={appLauncherItems}
+                  toggleId="dashboard-header-app-launcher"
                 />
               </ToolbarItem>
               <ToolbarItem>
@@ -177,7 +180,7 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
             </ToolbarGroup>
             <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position="right"
                 onSelect={this.onKebabDropdownSelect}
@@ -187,7 +190,7 @@ export default class DashboardHeader extends React.Component {
               />
             </ToolbarItem>
             <ToolbarItem visibility={{ md: 'hidden' }}>
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position="right"
                 onSelect={this.onFullKebabSelect}
@@ -198,7 +201,7 @@ export default class DashboardHeader extends React.Component {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-            <Dropdown
+            <DropdownDeprecated
               isFullHeight
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
index 1f67a596722..c2552ed6d5a 100644
--- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
+import { CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
 import {
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   DropdownToggle,
-  DropdownItem,
-  CalendarMonth,
-  InputGroup,
-  TextInput,
-  Button,
-  Popover
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
@@ -47,16 +43,16 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsTimeOpen(!isTimeOpen);
   };
 
-  const timeOptions = times.map(time => (
-    <DropdownItem key={time} component="button" value={`${time}:00`}>
+  const timeOptions = times.map((time) => (
+    <DropdownItemDeprecated key={time} component="button" value={`${time}:00`}>
       {`${time}:00`}
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ));
 
   const calendar = <CalendarMonth date={new Date(valueDate)} onChange={onSelectCalendar} />;
 
   const time = (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelectTime}
       toggle={
         <DropdownToggle
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 30ecfa9651c..81b1748bae5 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -39,6 +34,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -108,39 +110,39 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -170,6 +172,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -180,7 +183,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -190,7 +193,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -201,7 +204,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 27629cca3b9..e340f0ef342 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -39,6 +34,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -108,39 +110,39 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -170,6 +172,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -180,7 +183,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -190,7 +193,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -201,7 +204,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 78cf1b2432a..7b46030dd24 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -39,6 +34,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -108,39 +110,39 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -170,6 +172,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -180,7 +183,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -190,7 +193,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -201,7 +204,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 64e7cc80076..e3b06f5ab1f 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -41,6 +36,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -99,39 +101,39 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
   };
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const appLauncherItems = [
@@ -161,6 +163,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -171,7 +174,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -181,7 +184,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -192,7 +195,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx
index a872b2a4371..1db39ca902b 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx
@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -33,6 +28,13 @@ import {
   Text,
   TextContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -101,39 +103,39 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -186,6 +188,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
               onToggle={onAppLauncherToggle}
               isOpen={isAppLauncherOpen}
               items={appLauncherItems}
+              toggleId="dashboard-header-app-launcher"
             />
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
@@ -196,7 +199,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
         <PageHeaderToolsItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-          <Dropdown
+          <DropdownDeprecated
             isPlain
             position="right"
             onSelect={onKebabDropdownSelect}
@@ -206,7 +209,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
           />
         </PageHeaderToolsItem>
         <PageHeaderToolsItem visibility={{ md: 'hidden' }}>
-          <Dropdown
+          <DropdownDeprecated
             isPlain
             position="right"
             onSelect={onFullKebabDropdownSelect}
@@ -224,7 +227,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
       <PageHeaderToolsItem
         visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
       >
-        <Dropdown
+        <DropdownDeprecated
           isPlain
           position="right"
           onSelect={onDropdownSelect}
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index e53fbb7946f..c7d582dd8b3 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -11,9 +11,10 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
+  Dropdown,
+  DropdownList,
   Flex,
   FlexItem,
-  KebabToggle,
   Label,
   LabelGroup,
   MenuToggle,
@@ -37,7 +38,7 @@ import {
   Toolbar,
   ToolbarItem,
   ToolbarContent,
-  ToolbarToggleGroup,
+  ToolbarToggleGroup
 } from '@patternfly/react-core';
 import {
   TableComposable,
@@ -50,7 +51,7 @@ import {
   ActionsColumn,
   CustomActionsToggleProps
 } from '@patternfly/react-table';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import { KebabToggle } from '@patternfly/react-core/deprecated';
 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';
@@ -96,13 +97,13 @@ export const TablesAndTabs = () => {
 
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (event: React.FormEvent<HTMLInputElement>, repo: Repository, isSelecting = true) => {
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
     event.stopPropagation();
   };
-  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map(r => r.name) : []);
+  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map((r) => r.name) : []);
   const allRowsSelected = selectedRepoNames.length === repositories.length;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
@@ -112,14 +113,14 @@ export const TablesAndTabs = () => {
   const defaultActions: IAction[] = [
     {
       title: 'Some action',
-      onClick: event => {
+      onClick: (event) => {
         event.stopPropagation();
         console.log('clicked on Some action');
       }
     },
     {
       title: <a href="https://www.patternfly.org">Link action</a>,
-      onClick: event => {
+      onClick: (event) => {
         event.stopPropagation();
         console.log('clicked on Link action');
       }
@@ -129,7 +130,7 @@ export const TablesAndTabs = () => {
     },
     {
       title: 'Third action',
-      onClick: event => {
+      onClick: (event) => {
         event.stopPropagation();
         console.log('clicked on Third action');
       }
@@ -185,9 +186,9 @@ export const TablesAndTabs = () => {
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl hasAdditionalOptions>
-            <DropdownNext
+            <Dropdown
               onSelect={() => {}}
-              toggle={toggleRef => (
+              toggle={(toggleRef) => (
                 <MenuToggle
                   ref={toggleRef}
                   aria-label="overflow menu"
@@ -201,7 +202,7 @@ export const TablesAndTabs = () => {
               isOpen={false}
             >
               <DropdownList>{[]}</DropdownList>
-            </DropdownNext>
+            </Dropdown>
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarContent>
@@ -229,7 +230,7 @@ export const TablesAndTabs = () => {
         {repositories.map((repo, rowIndex) => (
           <Tr
             key={repo.name}
-            onRowClick={event => {
+            onRowClick={(event) => {
               if ((event?.target as HTMLInputElement).type !== 'checkbox') {
                 setRowClicked(rowClicked === repo.name ? '' : repo.name);
                 setIsExpanded(!isRowClicked(repo));
@@ -349,7 +350,7 @@ export const TablesAndTabs = () => {
                 </FlexItem>
                 <FlexItem>
                   <LabelGroup>
-                    {[1, 2, 3, 4, 5].map(labelNumber => (
+                    {[1, 2, 3, 4, 5].map((labelNumber) => (
                       <Label variant="outline" key={`label-${labelNumber}`}>{`Tag ${labelNumber}`}</Label>
                     ))}
                   </LabelGroup>
diff --git a/packages/react-core/src/components/Dropdown/BadgeToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/BadgeToggle.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/BadgeToggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/BadgeToggle.tsx
index bc390661706..6d81a3c16aa 100644
--- a/packages/react-core/src/components/Dropdown/BadgeToggle.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/BadgeToggle.tsx
@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownToggleProps } from './DropdownToggle';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { Toggle } from './Toggle';
-import { Badge, BadgeProps } from '../Badge';
+import { Badge, BadgeProps } from '../../../components/Badge';
 
 export interface BadgeToggleProps extends DropdownToggleProps {
   /** HTML ID of dropdown toggle */
diff --git a/packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx b/packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx
new file mode 100644
index 00000000000..fb4c8f4c45a
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
+import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
+import { DropdownWithContext } from './DropdownWithContext';
+import { OUIAProps, useOUIAId } from '../../../helpers';
+
+export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** Anything which can be rendered in a dropdown */
+  children?: React.ReactNode;
+  /** Classes applied to root element of dropdown */
+  className?: string;
+  /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */
+  dropdownItems?: any[];
+  /** Flag to indicate if menu is opened */
+  isOpen?: boolean;
+  /** Display the toggle with no border or background */
+  isPlain?: boolean;
+  /** Display the toggle in text only mode */
+  isText?: boolean;
+  /** Flag indicating that the dropdown should expand to full height */
+  isFullHeight?: boolean;
+  /** Indicates where menu will be aligned horizontally */
+  position?: DropdownPosition | 'right' | 'left';
+  /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */
+  alignments?: {
+    sm?: 'right' | 'left';
+    md?: 'right' | 'left';
+    lg?: 'right' | 'left';
+    xl?: 'right' | 'left';
+    '2xl'?: 'right' | 'left';
+  };
+  /** Display menu above or below dropdown toggle */
+  direction?: DropdownDirection | 'up' | 'down';
+  /** Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
+  /** The container to append the menu to. Defaults to 'inline'.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * menuAppendTo="parent"
+   * menuAppendTo={() => document.body}
+   * menuAppendTo={document.getElementById('target')}
+   */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
+  /** Flag to indicate if dropdown has groups */
+  isGrouped?: boolean;
+  /** Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> */
+  toggle: React.ReactElement<any>;
+  /** Function callback called when user selects item */
+  onSelect?: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
+  /** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
+   * a specific auto-focus item (like a current selection) otherwise leave as true
+   */
+  autoFocus?: boolean;
+  /** Props for extreme customization of dropdown */
+  contextProps?: typeof DropdownContext;
+  /** Flag for indicating that the dropdown menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the dropdown component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
+  /** z-index of the dropdown when menuAppendTo is not inline. */
+  zIndex?: number;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export const Dropdown: React.FunctionComponent<DropdownProps> = ({
+  onSelect,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
+  ouiaId,
+  ouiaSafe,
+  alignments,
+  contextProps,
+  minWidth,
+  menuAppendTo = 'inline',
+  isFlipEnabled = true,
+  zIndex = 9999,
+  ...props
+}: DropdownProps) => (
+  <DropdownContext.Provider
+    value={{
+      onSelect: (event) => onSelect && onSelect(event),
+      toggleTextClass: styles.dropdownToggleText,
+      toggleIconClass: styles.dropdownToggleImage,
+      toggleIndicatorClass: styles.dropdownToggleIcon,
+      menuClass: styles.dropdownMenu,
+      itemClass: styles.dropdownMenuItem,
+      toggleClass: styles.dropdownToggle,
+      baseClass: styles.dropdown,
+      baseComponent: 'div',
+      sectionClass: styles.dropdownGroup,
+      sectionTitleClass: styles.dropdownGroupTitle,
+      sectionComponent: 'section',
+      disabledClass: styles.modifiers.disabled,
+      plainTextClass: styles.modifiers.text,
+      ouiaId: useOUIAId(Dropdown.displayName, ouiaId),
+      ouiaSafe,
+      ouiaComponentType: Dropdown.displayName,
+      alignments,
+      ...contextProps
+    }}
+  >
+    <DropdownWithContext
+      menuAppendTo={menuAppendTo}
+      isFlipEnabled={isFlipEnabled}
+      zIndex={zIndex}
+      minWidth={minWidth}
+      {...props}
+    />
+  </DropdownContext.Provider>
+);
+Dropdown.displayName = 'Dropdown';
diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx
new file mode 100644
index 00000000000..f6ca197a297
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { DropdownContext } from './dropdownConstants';
+
+export interface DropdownGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+  /** Checkboxes within group */
+  children?: React.ReactNode;
+  /** Additional classes added to the DropdownGroup control */
+  className?: string;
+  /** Group label */
+  label?: React.ReactNode;
+}
+
+export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
+  children = null,
+  className = '',
+  label = '',
+  ...props
+}: DropdownGroupProps) => (
+  <DropdownContext.Consumer>
+    {({ sectionClass, sectionTitleClass, sectionComponent }) => {
+      const SectionComponent = sectionComponent as any;
+      return (
+        <SectionComponent className={css(sectionClass, className)} {...props}>
+          {label && (
+            <h1 className={css(sectionTitleClass)} aria-hidden>
+              {label}
+            </h1>
+          )}
+          <ul role="none">{children}</ul>
+        </SectionComponent>
+      );
+    }}
+  </DropdownContext.Consumer>
+);
+DropdownGroup.displayName = 'DropdownGroup';
diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx
new file mode 100644
index 00000000000..27919fc2663
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { InternalDropdownItemProps, InternalDropdownItem } from './InternalDropdownItem';
+import { DropdownArrowContext } from './dropdownConstants';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
+
+export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabIndex'>, OUIAProps {
+  /** Anything which can be rendered as dropdown item */
+  children?: React.ReactNode;
+  /** Classes applied to root element of dropdown item */
+  className?: string;
+  /** Class to be applied to list item */
+  listItemClassName?: string;
+  /**
+   * A ReactElement to render, or a string to use as the component tag.
+   * Example: component={<Link to="/components/alert/">Alert</Link>}
+   * Example: component="button"
+   * If React.isValidElement(component) the className prop will be injected unless styleChildren="false"
+   */
+  component?: React.ReactNode;
+  /** ID for the component element */
+  componentID?: string;
+  /** Whether to set className on component when React.isValidElement(component) */
+  styleChildren?: boolean;
+  /** Render dropdown item as disabled option */
+  isDisabled?: boolean;
+  /** Render dropdown item as aria-disabled option */
+  isAriaDisabled?: boolean;
+  /** Render dropdown item as non-interactive item */
+  isPlainText?: boolean;
+  /** Default hyperlink location */
+  href?: string;
+  /** Tooltip to display when hovered over the item */
+  tooltip?: React.ReactNode;
+  /** Additional tooltip props forwarded to the Tooltip component */
+  tooltipProps?: any;
+  /** Additional node to include alongside item within the <li> */
+  additionalChild?: React.ReactNode;
+  /** Custom item rendering that receives the DropdownContext */
+  customChild?: React.ReactNode;
+  /** tabIndex to use, null to unset it */
+  tabIndex?: number | null;
+  /** An image to display within the DropdownItem, appearing before any component children */
+  icon?: React.ReactNode;
+  /** Initial focus on the item when the menu is opened (Note: Only applicable to one of the items) */
+  autoFocus?: boolean;
+  /** A short description of the dropdown item, displayed under the dropdown item content */
+  description?: React.ReactNode;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
+  children,
+  className,
+  component = 'a',
+  isDisabled = false,
+  isAriaDisabled = false,
+  isPlainText = false,
+  href,
+  tooltip,
+  tooltipProps = {},
+  listItemClassName,
+  onClick,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
+  additionalChild,
+  customChild,
+  tabIndex = -1,
+  icon = null,
+  autoFocus,
+  description = null,
+  styleChildren,
+  ouiaId,
+  ouiaSafe,
+  ...props
+}: DropdownItemProps) => {
+  const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
+  return (
+    <DropdownArrowContext.Consumer>
+      {(context) => (
+        <InternalDropdownItem
+          context={context}
+          role="menuitem"
+          tabIndex={tabIndex}
+          className={className}
+          component={component}
+          isDisabled={isDisabled}
+          isAriaDisabled={isAriaDisabled}
+          isPlainText={isPlainText}
+          href={href}
+          tooltip={tooltip}
+          tooltipProps={tooltipProps}
+          listItemClassName={listItemClassName}
+          onClick={onClick}
+          additionalChild={additionalChild}
+          customChild={customChild}
+          icon={icon}
+          autoFocus={autoFocus}
+          styleChildren={styleChildren}
+          description={description}
+          {...ouiaProps}
+          {...props}
+        >
+          {children}
+        </InternalDropdownItem>
+      )}
+    </DropdownArrowContext.Consumer>
+  );
+};
+
+DropdownItem.displayName = 'DropdownItem';
diff --git a/packages/react-core/src/components/Dropdown/DropdownMenu.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownMenu.tsx
similarity index 91%
rename from packages/react-core/src/components/Dropdown/DropdownMenu.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/DropdownMenu.tsx
index 233363be2fc..c5aa1aa7d84 100644
--- a/packages/react-core/src/components/Dropdown/DropdownMenu.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownMenu.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
-import { keyHandler, formatBreakpointMods } from '../../helpers/util';
+import { keyHandler, formatBreakpointMods } from '../../../helpers/util';
 import { DropdownPosition, DropdownArrowContext, DropdownContext } from './dropdownConstants';
 
 export interface DropdownMenuProps {
@@ -62,7 +62,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
 
     if (autoFocus) {
       // Focus first non-disabled element
-      const focusTargetCollection = this.refsCollection.find(ref => ref && ref[0] && !ref[0].hasAttribute('disabled'));
+      const focusTargetCollection = this.refsCollection.find(
+        (ref) => ref && ref[0] && !ref[0].hasAttribute('disabled')
+      );
       const focusTarget = focusTargetCollection && focusTargetCollection[0];
       if (focusTarget && focusTarget.focus) {
         setTimeout(() => focusTarget.focus());
@@ -84,7 +86,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
   onKeyDown = (event: any) => {
     if (
       !this.props.isOpen ||
-      !Array.from(document.activeElement.classList).find(className =>
+      !Array.from(document.activeElement.classList).find((className) =>
         DropdownMenu.validToggleClasses.concat(this.context.toggleClass).includes(className)
       )
     ) {
@@ -92,7 +94,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
     }
     const refs = this.refsCollection;
     if (event.key === 'ArrowDown') {
-      const firstFocusTargetCollection = refs.find(ref => ref && ref[0] && !ref[0].hasAttribute('disabled'));
+      const firstFocusTargetCollection = refs.find((ref) => ref && ref[0] && !ref[0].hasAttribute('disabled'));
       DropdownMenu.focusFirstRef(firstFocusTargetCollection);
       event.stopPropagation();
     } else if (event.key === 'ArrowUp') {
@@ -141,12 +143,12 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
     const { children, isGrouped } = this.props;
     if (isGrouped) {
       let index = 0;
-      return React.Children.map(children, groupedChildren => {
+      return React.Children.map(children, (groupedChildren) => {
         const group = groupedChildren as React.ReactElement;
         const props: { children?: React.ReactNode } = {};
         if (group.props && group.props.children) {
           if (Array.isArray(group.props.children)) {
-            props.children = React.Children.map(group.props.children, option =>
+            props.children = React.Children.map(group.props.children, (option) =>
               React.cloneElement(option as React.ReactElement, {
                 index: index++
               })
@@ -168,17 +170,8 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
   }
 
   render() {
-    const {
-      className,
-      isOpen,
-      position,
-      children,
-      component,
-      isGrouped,
-      setMenuComponentRef,
-      alignments,
-      ...props
-    } = this.props;
+    const { className, isOpen, position, children, component, isGrouped, setMenuComponentRef, alignments, ...props } =
+      this.props;
     return (
       <DropdownArrowContext.Provider
         value={{
@@ -197,7 +190,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
                   className
                 )}
                 hidden={!isOpen}
-                onClick={event => onSelect && onSelect(event)}
+                onClick={(event) => onSelect && onSelect(event)}
                 ref={setMenuComponentRef}
               >
                 {children}
diff --git a/packages/react-core/src/components/Dropdown/DropdownSeparator.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownSeparator.tsx
similarity index 91%
rename from packages/react-core/src/components/Dropdown/DropdownSeparator.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/DropdownSeparator.tsx
index 6485ef08ccd..ae6320e4723 100644
--- a/packages/react-core/src/components/Dropdown/DropdownSeparator.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownSeparator.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { DropdownArrowContext } from './dropdownConstants';
 import { InternalDropdownItem } from './InternalDropdownItem';
-import { Divider, DividerVariant } from '../Divider';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { Divider, DividerVariant } from '../../../components/Divider';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
 export interface SeparatorProps extends React.HTMLProps<HTMLAnchorElement>, OUIAProps {
   /** Classes applied to root element of dropdown item */
@@ -26,7 +26,7 @@ export const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({
   const ouiaProps = useOUIAProps(DropdownSeparator.displayName, ouiaId, ouiaSafe);
   return (
     <DropdownArrowContext.Consumer>
-      {context => (
+      {(context) => (
         <InternalDropdownItem
           {...props}
           context={context}
diff --git a/packages/react-core/src/components/Dropdown/DropdownToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggle.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/DropdownToggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/DropdownToggle.tsx
index 419cf5810cf..aab7067f67e 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggle.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggle.tsx
@@ -4,7 +4,7 @@ import { Toggle } from './Toggle';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
 export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>, OUIAProps {
   /** HTML ID of dropdown toggle */
diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleAction.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleAction.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/DropdownToggleAction.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/DropdownToggleAction.tsx
diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx
index 6a9c8e14d79..55b27d54bbd 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
-import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import { Spinner } from '../Spinner';
+import { PickOptional } from '../../../helpers/typeUtils';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
+import { Spinner } from '../../../components/Spinner';
 
 export interface DropdownToggleCheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
diff --git a/packages/react-core/src/components/Dropdown/DropdownWithContext.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/DropdownWithContext.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx
index a3a149d7042..763213afea9 100644
--- a/packages/react-core/src/components/Dropdown/DropdownWithContext.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx
@@ -4,9 +4,9 @@ import { css } from '@patternfly/react-styles';
 import { DropdownMenu } from './DropdownMenu';
 import { DropdownProps } from './Dropdown';
 import { DropdownContext, DropdownDirection, DropdownPosition } from './dropdownConstants';
-import { getOUIAProps, OUIAProps } from '../../helpers';
-import { PickOptional } from '../../helpers/typeUtils';
-import { Popper } from '../../helpers/Popper/Popper';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+import { PickOptional } from '../../../helpers/typeUtils';
+import { Popper } from '../../../helpers/Popper/Popper';
 
 export class DropdownWithContext extends React.Component<DropdownProps & OUIAProps> {
   static displayName = 'DropdownWithContext';
diff --git a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx b/packages/react-core/src/deprecated/components/Dropdown/InternalDropdownItem.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/InternalDropdownItem.tsx
index 4c70aa49d4f..c81c3616ade 100644
--- a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/InternalDropdownItem.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { DropdownContext } from './dropdownConstants';
-import { KEYHANDLER_DIRECTION } from '../../helpers/constants';
-import { preventedEvents } from '../../helpers/util';
-import { Tooltip } from '../Tooltip';
+import { KEYHANDLER_DIRECTION } from '../../../helpers/constants';
+import { preventedEvents } from '../../../helpers/util';
+import { Tooltip } from '../../../components/Tooltip';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 
 export interface InternalDropdownItemProps extends React.HTMLProps<HTMLAnchorElement> {
diff --git a/packages/react-core/src/components/Dropdown/KebabToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/KebabToggle.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/KebabToggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/KebabToggle.tsx
diff --git a/packages/react-core/src/components/Dropdown/Toggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/Toggle.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/Toggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/Toggle.tsx
index 2fb3ac384b1..6112c28d738 100644
--- a/packages/react-core/src/components/Dropdown/Toggle.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/Toggle.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
-import { KeyTypes } from '../../helpers/constants';
-import { PickOptional } from '../../helpers/typeUtils';
+import { KeyTypes } from '../../../helpers/constants';
+import { PickOptional } from '../../../helpers/typeUtils';
 
 export interface ToggleProps {
   /** HTML ID of dropdown toggle */
@@ -166,10 +166,10 @@ export class Toggle extends React.Component<ToggleProps> {
               className
             )}
             type={type || 'button'}
-            onClick={event => onToggle?.(event, !isOpen)}
+            onClick={(event) => onToggle?.(event, !isOpen)}
             aria-expanded={isOpen}
             aria-haspopup={ariaHasPopup}
-            onKeyDown={event => this.onKeyDown(event)}
+            onKeyDown={(event) => this.onKeyDown(event)}
             disabled={isDisabled}
           >
             {children}
diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx
new file mode 100644
index 00000000000..77e6fd7abc0
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -0,0 +1,278 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Dropdown } from '../Dropdown';
+import { DropdownPosition, DropdownDirection } from '../dropdownConstants';
+import { InternalDropdownItem } from '../InternalDropdownItem';
+import { DropdownSeparator } from '../DropdownSeparator';
+import { DropdownToggle } from '../DropdownToggle';
+import { KebabToggle } from '../KebabToggle';
+
+const dropdownItems = [
+  <InternalDropdownItem key="link">Link</InternalDropdownItem>,
+  <InternalDropdownItem key="action" component="button">
+    Action
+  </InternalDropdownItem>,
+  <InternalDropdownItem key="disabled link" isDisabled>
+    Disabled Link
+  </InternalDropdownItem>,
+  <InternalDropdownItem key="disabled action" isDisabled component="button">
+    Disabled Action
+  </InternalDropdownItem>,
+  <DropdownSeparator key="separator" />,
+  <InternalDropdownItem key="separated link">Separated Link</InternalDropdownItem>,
+  <InternalDropdownItem key="separated action" component="button">
+    Separated Action
+  </InternalDropdownItem>
+];
+
+describe('Dropdown', () => {
+  test('regular', () => {
+    const { asFragment } = render(
+      <Dropdown dropdownItems={dropdownItems} toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('right aligned', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        position={DropdownPosition.right}
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('alignment breakpoints', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        alignments={{
+          sm: 'left',
+          md: 'right',
+          lg: 'left',
+          xl: 'right',
+          '2xl': 'left'
+        }}
+        aria-label="Dropdown button"
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+        isOpen
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('dropup', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        direction={DropdownDirection.up}
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('dropup + right aligned', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        direction={DropdownDirection.up}
+        position={DropdownPosition.right}
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('expanded', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        isOpen
+        aria-label="Dropdown button"
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('primary', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        toggle={
+          <DropdownToggle id="Dropdown Toggle" toggleVariant="primary">
+            Dropdown
+          </DropdownToggle>
+        }
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic', () => {
+    const { asFragment } = render(
+      <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
+        <div>BASIC</div>
+      </Dropdown>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Renders in strict mode', () => {
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(
+      <React.StrictMode>
+        <Dropdown
+          isOpen
+          dropdownItems={dropdownItems}
+          toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+        />
+      </React.StrictMode>
+    );
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('KebabToggle', () => {
+  test('regular', () => {
+    const { asFragment } = render(
+      <Dropdown
+        aria-label="Dropdown button"
+        dropdownItems={dropdownItems}
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('right aligned', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        position={DropdownPosition.right}
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('dropup', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        direction={DropdownDirection.up}
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('dropup + right aligned', () => {
+    const { asFragment } = render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        direction={DropdownDirection.up}
+        position={DropdownPosition.right}
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('expanded', () => {
+    const { asFragment } = render(
+      <Dropdown
+        aria-label="Dropdown button"
+        dropdownItems={dropdownItems}
+        isOpen
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('plain', () => {
+    const { asFragment } = render(
+      <Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic', () => {
+    const { asFragment } = render(
+      <Dropdown isOpen toggle={<KebabToggle id="Dropdown Toggle" />}>
+        <div>BASIC</div>
+      </Dropdown>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('API', () => {
+  test('click on item', async () => {
+    const mockToggle = jest.fn();
+    const mockSelect = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        onSelect={mockSelect}
+        isOpen
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      />
+    );
+
+    await user.click(screen.getByText('Link')); // "Link" is the text of the first item
+    expect(mockToggle.mock.calls).toHaveLength(0);
+    expect(mockSelect.mock.calls).toHaveLength(1);
+  });
+
+  test('dropdownItems and children console error ', () => {
+    const myMock = jest.fn();
+    global.console = { error: myMock } as any;
+    render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        isOpen
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      >
+        <div>Children items</div>
+      </Dropdown>
+    );
+    expect(myMock).toHaveBeenCalledWith(
+      'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered'
+    );
+  });
+
+  test('dropdownItems only, no console error ', () => {
+    const myMock = jest.fn();
+    global.console = { error: myMock } as any;
+    render(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        isOpen
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      />
+    );
+    expect(myMock).not.toHaveBeenCalled();
+  });
+
+  test('children only, no console ', () => {
+    const myMock = jest.fn();
+    global.console = { error: myMock } as any;
+    render(
+      <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
+        <div>Children items</div>
+      </Dropdown>
+    );
+    expect(myMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx
new file mode 100644
index 00000000000..6fe525cbd09
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DropdownGroup } from '../DropdownGroup';
+
+describe('dropdown groups', () => {
+  test('basic render', () => {
+    const { asFragment } = render(<DropdownGroup label="Group 1">Something</DropdownGroup>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggle.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/DropdownToggle.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleAction.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleAction.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Toggle.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Toggle.test.tsx
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/Toggle.test.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/Toggle.test.tsx
diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
new file mode 100644
index 00000000000..ba14c21f220
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -0,0 +1,978 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown Renders in strict mode 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-10"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown alignment breakpoints 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-3"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu pf-m-align-left-on-sm pf-m-align-right-on-md pf-m-align-left-on-lg pf-m-align-right-on-xl pf-m-align-left-on-2xl"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-8"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="false"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="pf-c-dropdown__menu"
+    >
+      <div>
+        BASIC
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown dropup + right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-5"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown dropup 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top"
+    data-ouia-component-id="OUIA-Generated-Dropdown-4"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown expanded 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-6"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown primary 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-7"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown regular 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-1"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Dropdown right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-2"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-17"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="false"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+    <div
+      class="pf-c-dropdown__menu"
+    >
+      <div>
+        BASIC
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle dropup + right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-14"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle dropup 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top"
+    data-ouia-component-id="OUIA-Generated-Dropdown-13"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle expanded 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-15"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+          role="none"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          role="none"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle plain 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-16"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle pf-m-plain"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle regular 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-11"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KebabToggle right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-12"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
new file mode 100644
index 00000000000..f165c5963bc
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dropdown groups basic render 1`] = `
+<DocumentFragment>
+  <section
+    class=""
+  >
+    <h1
+      aria-hidden="true"
+      class=""
+    >
+      Group 1
+    </h1>
+    <ul
+      role="none"
+    >
+      Something
+    </ul>
+  </section>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap
diff --git a/packages/react-core/src/components/Dropdown/dropdownConstants.tsx b/packages/react-core/src/deprecated/components/Dropdown/dropdownConstants.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/dropdownConstants.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/dropdownConstants.tsx
index 7fef954b781..465101677ff 100644
--- a/packages/react-core/src/components/Dropdown/dropdownConstants.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/dropdownConstants.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OUIAProps } from '../../helpers';
+import { OUIAProps } from '../../../helpers';
 
 export enum DropdownPosition {
   right = 'right',
diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md
new file mode 100644
index 00000000000..659e0d2ad5f
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md
@@ -0,0 +1,211 @@
+---
+id: Dropdown
+section: components
+cssPrefix: pf-c-dropdown
+propComponents:
+  [
+    'Dropdown',
+    'DropdownGroup',
+    'DropdownItem',
+    'DropdownToggle',
+    'DropdownToggleCheckbox',
+    'DropdownToggleAction',
+    DropdownSeparator
+  ]
+ouia: true
+---
+
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import { Link } from '@reach/router';
+import avatarImg from '../../../../components/Avatar/examples/avatarImg.svg';
+
+## Examples
+
+### Basic dropdowns
+
+Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The `isOpen` property is used to determine whether the menu is opened or not.
+
+All of the items in a dropdown list are created as `<DropdownItem>` components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
+
+- Use the `tooltip` property to enable tooltip support.
+- Use the `isDisabled` property to disable an item.
+- Use the `isAriaDisabled` property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
+
+This example also uses a `<DropdownSeparator>`, which adds a horizontal line that splits the menu into 2 sections.
+
+```ts file='./DropdownBasic.tsx'
+
+```
+
+### Autofocus on dropdown expansion
+
+A `<DropdownItem>` may use the `autoFocus` property so that it automatically receives focus when the menu is expanded. `autoFocus` cannot be applied to disabled dropdown items.
+
+```ts file="./DropdownInitialSelection.tsx"
+
+```
+
+### With groups of items
+
+Use the `<DropdownGroup>` component to group sets of related dropdown items together. Use the `isGrouped` property on the `Dropdown` component to indicate that a dropdown contains grouped items.
+
+```ts file="./DropdownGroups.tsx"
+
+```
+
+### With item descriptions
+
+A `<DropdownItem>` may use the `description` property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
+
+```ts file="./DropdownDescriptions.tsx"
+
+```
+
+### With custom content
+
+You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
+
+```ts file="./DropdownBasicPanel.tsx"
+
+```
+
+### With router link items
+
+`<DropdownItem>` may use the `component` property to include router links.
+
+```ts file="./DropdownRouterLink.tsx"
+
+```
+
+### Toggle styling
+
+You can adjust the styling of a `<DropdownToggle>` using the `toggleVariant` property. `toggleVariant` may be set to 'primary', 'secondary', or 'default'.
+
+```ts file="./DropdownPrimaryToggle.tsx"
+
+```
+
+### Plain text toggle
+
+A toggle may be styled as plain text using the `isText` and `isPlain`properties. The following example applies these properties to a `<Dropdown>` component.
+
+```ts file="./DropdownPlainTextToggle.tsx"
+
+```
+
+### Disabled toggles
+
+A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
+
+```ts file="./DropdownDisabled.tsx"
+
+```
+
+### Icon toggle
+
+`<DropdownToggle>` may use a recognizable icon instead of a text label if text would take up too much room. Set the `toggleIndicator` property to `{null}` to remove the default dropdown toggle caret.
+
+```ts file="./DropdownIconOnly.tsx"
+
+```
+
+### Kebab toggle
+
+Use `<KebabToggle>` to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
+
+```ts file="./DropdownKebab.tsx"
+
+```
+
+### Toggle with image
+
+The `icon` property can be used to display an image in the `DropdownToggle` and can be used alongside a text label.
+
+```ts file="./DropdownImageAndText.tsx"
+
+```
+
+### Toggle with badge
+
+You may use a `<BadgeToggle>` to display the number of dropdown menu items.
+
+```ts file="./DropdownBadge.tsx"
+
+```
+
+### Split button (checkbox)
+
+To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
+
+The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets.
+
+```ts file="./DropdownSplitButton.tsx"
+
+```
+
+### Split button (checkbox with toggle text)
+
+Text labels may optionally be used alongside actions within split buttons.
+
+```ts file="./DropdownSplitButtonText.tsx"
+
+```
+
+### Split button (progress checkbox)
+
+The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
+
+```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+
+```
+
+### Split button toggle variants
+
+Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles.
+
+The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
+
+```ts file="./DropdownSplitButtonActionPrimary.tsx"
+
+```
+
+### Dropdown alignment
+
+The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A `<Dropdown>` may use the `alignments` property to indicate how the menu will align at different screen sizes.
+
+```ts file="./DropdownAlignmentOnBreakpoints.tsx"
+
+```
+
+### Right-positioned menu
+
+The following example demonstrates a `<Dropdown>` with a `position` equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
+
+```ts file="./DropdownPositionRight.tsx"
+
+```
+
+### Upwards directional menu
+
+The following example demonstrates a `<Dropdown>` with a `direction` equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
+
+```ts file="./DropdownDirectionUp.tsx"
+
+```
+
+### Using document parent element
+
+Avoid passing in `document.body` to a `<Dropdown>` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `<Dropdown>` options using keyboards or screen readers.
+
+Instead, append to ‘parent’ to avoid sacrificing accessibility.
+
+The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective `<Dropdown>`, but the options for the `document.body` variant cannot be navigated via Voice Over.
+
+```ts file="./DropdownAppendBodyVsParent.tsx"
+
+```
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx
index d4a7afb7c17..ab7f3942220 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx
index c8cf6daa601..52bd44dc291 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, Flex } from '@patternfly/react-core';
+import { Flex } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownAppendBodyVsParent: React.FunctionComponent = () => {
   const [isBodyOpen, setIsBodyOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBadge.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBadge.tsx
index ca74d2abb47..29e5a47b6d6 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 export const DropdownBadge: React.FunctionComponent = () => {
diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx
new file mode 100644
index 00000000000..0629cc0c7e0
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
+
+export const DropdownBasic: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (_event: any, isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-basic');
+    element?.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link" tooltip="Tooltip for enabled link">
+      Link
+    </DropdownItem>,
+    <DropdownItem key="action" component="button" tooltip="Tooltip for enabled button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-basic" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx
index f7920cc8325..4c1eea1dec1 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated';
 
 export const DropdownBasicPanel: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx
index b57071c8fa5..32619222822 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownDirectionUp.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx
similarity index 91%
rename from packages/react-core/src/components/Dropdown/examples/DropdownDirectionUp.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx
index 00cf75ea7e9..1d3fe0051fd 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownDirectionUp.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownDirection
+} from '@patternfly/react-core/deprecated';
 
 export const DropdownDirectionUp: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownDisabled.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDisabled.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownDisabled.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDisabled.tsx
index e16ca7a91fc..ed1e7050ba9 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownDisabled.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDisabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownDisabled: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownGroups.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownGroups.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownGroups.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownGroups.tsx
index 20639755584..3470739e1fe 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownGroups.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownGroups.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core/deprecated';
 
 export const DropdownGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownIconOnly.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownIconOnly.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx
index d3f35a2b9e5..7a0ccdeda5a 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownIconOnly.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 
 export const DropdownIconOnly: React.FunctionComponent = () => {
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownImageAndText.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx
similarity index 89%
rename from packages/react-core/src/components/Dropdown/examples/DropdownImageAndText.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx
index 1ea5edf75f7..4f9e9e1aa91 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownImageAndText.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
+import { Avatar } from '@patternfly/react-core';
 import {
-  Avatar,
   Dropdown,
   DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator
-} from '@patternfly/react-core';
-import avatarImg from '../../Avatar/examples/avatarImg.svg';
+} from '@patternfly/react-core/deprecated';
+import avatarImg from '../../../../components/Avatar/examples/avatarImg.svg';
 
 export const DropdownImageAndText: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownInitialSelection.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownInitialSelection.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx
index ffa2d3c07c3..9033d69e54b 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownInitialSelection.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownInitialSelection: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownKebab.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownKebab.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownKebab.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownKebab.tsx
index 61a1d36488e..ad079ccaa3a 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownKebab.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownKebab.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core/deprecated';
 
 export const DropdownKebab: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx
index 85f30c18ac6..021326c75bc 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownPlainTextToggle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownPositionRight.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx
similarity index 91%
rename from packages/react-core/src/components/Dropdown/examples/DropdownPositionRight.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx
index f5695e40ccd..68dec5254ec 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownPositionRight.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 export const DropdownPositionRight: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx
index cf69da01151..8d227c611db 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownPrimaryToggle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownRouterLink.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownRouterLink.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx
index 5510fef366a..e6c817954ba 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownRouterLink.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated';
 import { Link } from '@reach/router';
 
 export const DropdownRouterLink: React.FunctionComponent = () => {
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx
similarity index 96%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx
index 5eaa4e2de7c..5ffb4d0b7a6 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
 
 export const DropdownPrimaryToggle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx
index cf544d6483b..9949061f2e9 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx
@@ -5,7 +5,7 @@ import {
   DropdownToggleCheckbox,
   DropdownItem,
   DropdownSeparator
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const DropdownSplitButton: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx
index 6998a4172c5..c598f25e3e0 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx
index 2abb8e3f614..5e8bf6925f9 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx
index 28024bca586..6a8a5a00c09 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx
index a3782c3b4a2..4ee70da91ea 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx
@@ -5,7 +5,7 @@ import {
   DropdownToggleCheckbox,
   DropdownItem,
   DropdownSeparator
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const DropdownSplitButtonDisabled: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
similarity index 98%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
index 83f34d6561e..7597a0bc8a3 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -5,7 +5,7 @@ import {
   DropdownToggleCheckbox,
   DropdownItem,
   DropdownSeparator
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonText.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonText.tsx
similarity index 97%
rename from packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonText.tsx
rename to packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonText.tsx
index 22de9fc6263..e1755a6cb4b 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonText.tsx
+++ b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonText.tsx
@@ -5,7 +5,7 @@ import {
   DropdownToggleCheckbox,
   DropdownItem,
   DropdownSeparator
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const DropdownSplitButtonText: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/packages/react-core/src/deprecated/components/Dropdown/index.ts b/packages/react-core/src/deprecated/components/Dropdown/index.ts
new file mode 100644
index 00000000000..b7ec6230d01
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Dropdown/index.ts
@@ -0,0 +1,12 @@
+export * from './Dropdown';
+export * from './DropdownMenu';
+export * from './DropdownWithContext';
+export * from './dropdownConstants';
+export * from './DropdownGroup';
+export * from './DropdownItem';
+export * from './DropdownSeparator';
+export * from './BadgeToggle';
+export * from './KebabToggle';
+export * from './DropdownToggle';
+export * from './DropdownToggleCheckbox';
+export * from './DropdownToggleAction';
diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx
index 53b0d664dd7..d3b7e8d921f 100644
--- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx
+++ b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
-import { DropdownContext } from '../../../components/Dropdown';
-import { DropdownWithContext } from '../../../components/Dropdown/DropdownWithContext';
+import { DropdownContext } from '../Dropdown';
+import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
 import { OUIAProps, useOUIAId } from '../../../helpers';
 
 export enum OptionsMenuPosition {
diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx
index 7273f283e77..a9b99d985a4 100644
--- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx
+++ b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
-import { DropdownItem } from '../../../components/Dropdown';
+import { DropdownItem } from '../Dropdown';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 export interface OptionsMenuItemProps
diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx
index 8871725a978..9465c0da3da 100644
--- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx
+++ b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownToggle, DropdownContext } from '../../../components/Dropdown';
+import { DropdownToggle, DropdownContext } from '../Dropdown';
 
 export interface OptionsMenuToggleProps extends React.HTMLProps<HTMLButtonElement> {
   /** Id of the parent options menu component */
diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx
index 0c66f9a1664..cd5727f58d3 100644
--- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx
+++ b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { KeyTypes } from '../../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
-import { DropdownContext } from '../../../components/Dropdown';
+import { DropdownContext } from '../Dropdown';
 
 export interface OptionsMenuToggleWithTextProps extends React.HTMLProps<HTMLDivElement> {
   /** Id of the parent options menu component */
@@ -133,7 +133,7 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
             aria-expanded={isOpen}
             ref={buttonRef}
             disabled={isDisabled}
-            onClick={event => onToggle(event, !isOpen)}
+            onClick={(event) => onToggle(event, !isOpen)}
             onKeyDown={onKeyDown}
           >
             <span className={css(styles.optionsMenuToggleButtonIcon)}>{toggleButtonContents}</span>
diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx
index b7f03895110..2fa3f5c71e2 100644
--- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx
+++ b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { OptionsMenuItem } from '../../OptionsMenuItem';
-import { DropdownArrowContext } from '../../../../../components/Dropdown';
+import { DropdownArrowContext } from '../../../Dropdown';
 
 describe('OptionsMenuItem', () => {
   it('should match snapshot', () => {
diff --git a/packages/react-core/src/deprecated/components/index.ts b/packages/react-core/src/deprecated/components/index.ts
index 1ea7dae9829..4219c035bee 100644
--- a/packages/react-core/src/deprecated/components/index.ts
+++ b/packages/react-core/src/deprecated/components/index.ts
@@ -1,2 +1,3 @@
+export * from './Dropdown';
 export * from './OptionsMenu';
 export * from './ContextSelector';
\ No newline at end of file
diff --git a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx
deleted file mode 100644
index 6b5813feb46..00000000000
--- a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import { css } from '@patternfly/react-styles';
-import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
-import { Popper, PopperProps } from '../../../helpers/Popper/Popper';
-import { useOUIAProps, OUIAProps } from '../../../helpers';
-
-export interface DropdownProps extends MenuProps, OUIAProps {
-  /** Anything which can be rendered in a dropdown. */
-  children?: React.ReactNode;
-  /** Classes applied to root element of dropdown. */
-  className?: string;
-  /** Renderer for a custom dropdown toggle. Forwards a ref to the toggle. */
-  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
-  /** Flag to indicate if menu is opened.*/
-  isOpen?: boolean;
-  /** Function callback called when user selects item. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
-  /** Callback to allow the dropdown component to change the open state of the menu.
-   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
-  onOpenChange?: (isOpen: boolean) => void;
-  /** Indicates if the menu should be without the outer box-shadow. */
-  isPlain?: boolean;
-  /** Indicates if the menu should be scrollable. */
-  isScrollable?: boolean;
-  /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
-  ouiaSafe?: boolean;
-  /** z-index of the dropdown menu */
-  zIndex?: number;
-  /** Additional properties to pass to the Popper */
-  popperProps?: Partial<PopperProps>;
-}
-
-const DropdownBase: React.FunctionComponent<DropdownProps> = ({
-  children,
-  className,
-  onSelect,
-  isOpen,
-  toggle,
-  onOpenChange,
-  isPlain,
-  isScrollable,
-  innerRef,
-  ouiaId,
-  ouiaSafe = true,
-  zIndex = 9999,
-  popperProps,
-  ...props
-}: DropdownProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
-  const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
-
-  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
-  React.useEffect(() => {
-    const handleMenuKeys = (event: KeyboardEvent) => {
-      // Close the menu on tab or escape if onOpenChange is provided
-      if (
-        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
-        toggleRef.current?.contains(event.target as Node)
-      ) {
-        if (event.key === 'Escape' || event.key === 'Tab') {
-          onOpenChange(false);
-          toggleRef.current?.focus();
-        }
-      }
-    };
-
-    const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
-          firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
-      }
-
-      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
-      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
-        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-          onOpenChange(false);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClick);
-
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClick);
-    };
-  }, [isOpen, menuRef, onOpenChange]);
-
-  const menu = (
-    <Menu
-      className={css(className)}
-      ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
-      isPlain={isPlain}
-      isScrollable={isScrollable}
-      {...props}
-    >
-      <MenuContent>{children}</MenuContent>
-    </Menu>
-  );
-  return (
-    <div ref={containerRef} {...ouiaProps}>
-      <Popper
-        trigger={toggle(toggleRef)}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        zIndex={zIndex}
-        {...popperProps}
-      />
-    </div>
-  );
-};
-
-export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref<any>) => (
-  <DropdownBase innerRef={ref} {...props} />
-));
-Dropdown.displayName = 'Dropdown';
diff --git a/packages/react-core/src/next/components/Dropdown/DropdownGroup.tsx b/packages/react-core/src/next/components/Dropdown/DropdownGroup.tsx
deleted file mode 100644
index e39e60cb925..00000000000
--- a/packages/react-core/src/next/components/Dropdown/DropdownGroup.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { css } from '@patternfly/react-styles';
-import { MenuGroupProps, MenuGroup } from '../../../components/Menu';
-
-export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
-  /** Anything which can be rendered in a dropdown group. */
-  children: React.ReactNode;
-  /** Classes applied to root element of dropdown group */
-  className?: string;
-  /** Label of the dropdown group */
-  label?: string;
-}
-
-export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
-  children,
-  className,
-  label,
-  labelHeadingLevel = 'h1',
-  ...props
-}: DropdownGroupProps) => (
-  <MenuGroup className={css(className)} label={label} labelHeadingLevel={labelHeadingLevel} {...props}>
-    {children}
-  </MenuGroup>
-);
-DropdownGroup.displayName = 'DropdownGroup';
diff --git a/packages/react-core/src/next/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/next/components/Dropdown/DropdownItem.tsx
deleted file mode 100644
index 100a6290034..00000000000
--- a/packages/react-core/src/next/components/Dropdown/DropdownItem.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { css } from '@patternfly/react-styles';
-import { MenuItemProps, MenuItem } from '../../../components/Menu';
-import { useOUIAProps, OUIAProps } from '../../../helpers';
-
-export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
-  /** Anything which can be rendered in a dropdown item */
-  children?: React.ReactNode;
-  /** Classes applied to root element of dropdown item */
-  className?: string;
-  /** Description of the dropdown item */
-  description?: React.ReactNode;
-  /** Identifies the component in the dropdown onSelect callback */
-  itemId?: any;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
-  ouiaSafe?: boolean;
-}
-
-export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
-  children,
-  className,
-  description,
-  itemId,
-  ouiaId,
-  ouiaSafe,
-  ...props
-}: DropdownItemProps) => {
-  const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
-  return (
-    <MenuItem className={css(className)} description={description} itemId={itemId} {...ouiaProps} {...props}>
-      {children}
-    </MenuItem>
-  );
-};
-DropdownItem.displayName = 'DropdownItem';
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx
deleted file mode 100644
index cc4e236638b..00000000000
--- a/packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React from 'react';
-import { Dropdown } from '../../Dropdown';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-jest.mock('../../../../components/Menu');
-
-jest.mock('../../../../helpers/Popper/Popper');
-
-const toggle = (ref: React.RefObject<any>) => <button ref={ref}>Dropdown</button>;
-
-const dropdownChildren = <div>Dropdown children</div>;
-
-test('renders dropdown', () => {
-  render(
-    <div data-testid="dropdown">
-      <Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
-    </div>
-  );
-
-  expect(screen.getByTestId('dropdown').children[0]).toBeVisible();
-});
-
-test('passes children', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
-
-  expect(screen.getByText('Dropdown children')).toBeVisible();
-});
-
-test('renders passed toggle element', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
-
-  expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible();
-});
-
-test('passes no class name by default', () => {
-  render(
-    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByTestId('menu-mock')).not.toHaveClass();
-});
-
-test('passes custom class name', () => {
-  render(
-    <Dropdown className="custom-class" isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByTestId('menu-mock')).toHaveClass('custom-class');
-});
-
-test('does not pass isPlain to Menu by default', () => {
-  render(
-    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('isPlain: undefined')).toBeVisible();
-});
-
-test('passes isPlain to Menu', () => {
-  render(
-    <Dropdown isPlain isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('isPlain: true')).toBeVisible();
-});
-
-test('does not pass isScrollable to Menu by default', () => {
-  render(
-    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('isScrollable: undefined')).toBeVisible();
-});
-
-test('passes isScrollable to Menu', () => {
-  render(
-    <Dropdown isScrollable isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('isScrollable: true')).toBeVisible();
-});
-
-test('passes default zIndex to popper', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
-
-  expect(screen.getByText('zIndex: 9999')).toBeVisible();
-});
-
-test('passes zIndex to popper', () => {
-  render(
-    <Dropdown zIndex={100} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('zIndex: 100')).toBeVisible();
-});
-
-test('does not pass isOpen to popper by default', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
-
-  expect(screen.getByText('isOpen: undefined')).toBeVisible();
-});
-
-test('passes isOpen to popper', () => {
-  render(
-    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('isOpen: true')).toBeVisible();
-});
-
-/* no default tests for callback props
-since there is no way to test that the 
-function doesn`t get passed */
-
-test('passes onSelect callback', async () => {
-  const user = userEvent.setup();
-
-  const onSelect = jest.fn();
-  render(
-    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  const trigger = await screen.findByText('Mock item');
-  await user.click(trigger);
-
-  expect(onSelect).toBeCalledTimes(1);
-});
-
-test('onOpenChange is called when passed and user clicks outside of dropdown', async () => {
-  const user = userEvent.setup();
-  const onOpenChange = jest.fn();
-
-  render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
-  await user.click(dropdown);
-  await user.click(document.body);
-
-  expect(onOpenChange).toBeCalledTimes(1);
-});
-
-test('onOpenChange is called when passed and user presses tab key', async () => {
-  const user = userEvent.setup();
-  const onOpenChange = jest.fn();
-
-  render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  //focus dropdown
-  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
-  await user.click(dropdown);
-  await user.keyboard('{Tab}');
-
-  expect(onOpenChange).toBeCalledTimes(1);
-});
-
-test('onOpenChange is called when passed and user presses esc key', async () => {
-  const user = userEvent.setup();
-  const onOpenChange = jest.fn();
-
-  render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  //focus dropdown
-  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
-  await user.click(dropdown);
-  await user.keyboard('{Escape}');
-
-  expect(onOpenChange).toBeCalledTimes(1);
-});
-
-test('match snapshot', () => {
-  const { asFragment } = render(
-    <Dropdown
-      ouiaId={'dropdown'}
-      isOpen
-      isScrollable
-      isPlain
-      className={'customClass'}
-      toggle={(toggleRef) => toggle(toggleRef)}
-    >
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx b/packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx
deleted file mode 100644
index 4151c2a304c..00000000000
--- a/packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DropdownGroup } from '../../Dropdown';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-jest.mock('../../../../components/Menu');
-
-const dropdownGroupChildren = <div>Dropdown Group children</div>;
-
-test('renders dropdown group', () => {
-  render(
-    <div data-testid="dropdown-group">
-      <DropdownGroup>{dropdownGroupChildren}</DropdownGroup>
-    </div>
-  );
-
-  expect(screen.getByTestId('dropdown-group').children[0]).toBeVisible();
-});
-
-test('passes children', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('Dropdown Group children')).toBeVisible();
-});
-
-test('passes no class name by default', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByTestId('menu-group-mock')).not.toHaveClass();
-});
-
-test('passes custom class name to MenuGroup', () => {
-  render(<DropdownGroup className="custom-class">{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByTestId('menu-group-mock')).toHaveClass('custom-class');
-});
-
-test('passes no label by default', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('label: undefined')).toBeVisible();
-});
-
-test('passes custom label to MenuGroup', () => {
-  render(<DropdownGroup label="Test label">{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('label: Test label')).toBeVisible();
-});
-
-test('passes h1 as labelHeadingLevel to MenuGroup by default', () => {
-  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('labelHeadingLevel: h1')).toBeVisible();
-});
-
-test('passes custom labelHeadingLevel to MenuGroup', () => {
-  render(<DropdownGroup labelHeadingLevel="h2">{dropdownGroupChildren}</DropdownGroup>);
-
-  expect(screen.getByText('labelHeadingLevel: h2')).toBeVisible();
-});
-
-test('matches snapshot', () => {
-  const { asFragment } = render(
-    <DropdownGroup className="custom-class" label="Test label" labelHeadingLevel="h2">
-      {dropdownGroupChildren}
-    </DropdownGroup>
-  );
-
-  expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
deleted file mode 100644
index b6e17bbdd28..00000000000
--- a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`match snapshot 1`] = `
-<DocumentFragment>
-  <div
-    data-ouia-component-id="dropdown"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <div>
-      <div
-        class="customClass"
-        data-testid="menu-mock"
-      >
-        <div>
-          <div>
-            Dropdown children
-          </div>
-        </div>
-      </div>
-      <div>
-        Mock item
-      </div>
-      <p>
-        isPlain: true
-      </p>
-      <p>
-        isScrollable: true
-      </p>
-      <p>
-        minWidth: undefined
-      </p>
-    </div>
-    <p>
-      zIndex: 9999
-    </p>
-    <p>
-      isOpen: true
-    </p>
-    <div>
-      <button>
-        Dropdown
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap b/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
deleted file mode 100644
index 12277b3b888..00000000000
--- a/packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`matches snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="custom-class"
-    data-testid="menu-group-mock"
-  >
-    <div>
-      Dropdown Group children
-    </div>
-  </div>
-  <p>
-    label: Test label
-  </p>
-  <p>
-    labelHeadingLevel: h2
-  </p>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/next/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/next/components/Dropdown/examples/Dropdown.md
deleted file mode 100644
index a15daf557e5..00000000000
--- a/packages/react-core/src/next/components/Dropdown/examples/Dropdown.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-id: Dropdown
-section: components
-cssPrefix: pf-c-dropdown
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList']
-beta: true
----
-
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-## Examples
-
-### Basic dropdowns
-Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. 
-
-A `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback. 
-
-The following example shows a few different states of dropdown items. As shown in this example, dropdown items may: 
-- Use the `isDisabled` property to disable an item.
-- Use the `onClick` property to trigger a callback for an action.
-
-This example also uses a `<Divider>` which passes in `key=”separator”` to split the menu into 2 sections with a horizontal line.
-
-```ts file="./DropdownBasic.tsx"
-```
-
-### With kebab toggle
-
-To style a dropdown menu's toggle with a kebab icon, pass a "plain" `<MenuToggle>` to the `toggle` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.
-
-```ts file="./DropdownWithKebabToggle.tsx"
-```
-
-### With groups of items
-To group sets of related dropdown items together, use a `<DropdownGroup>`. When more than 1 `<DropdownGroup>` is created in a menu, use the `label` and `labelHeadingLevel` properties to assign a name and heading level to each group. 
-
-```ts file="./DropdownWithGroups.tsx"
-```
-
-### With item descriptions
-
-To provide users with more context about a `<DropdownItem>`, pass a short message to `description` property. As shown in the example below, an item's description will appear below its label. 
-
-```ts file="./DropdownWithDescriptions.tsx"
-```
\ No newline at end of file
diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx
deleted file mode 100644
index d0dac9e1567..00000000000
--- a/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { Divider, MenuToggle } from '@patternfly/react-core';
-
-export const DropdownBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
-    // eslint-disable-next-line no-console
-    console.log('selected', itemId);
-    setIsOpen(false);
-  };
-
-  return (
-    <Dropdown
-      isOpen={isOpen}
-      onSelect={onSelect}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
-        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-          Dropdown
-        </MenuToggle>
-      )}
-    >
-      <DropdownList>
-        <DropdownItem itemId={0} key="link">
-          Link
-        </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
-          Action
-        </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled link">
-          Disabled link
-        </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
-          Disabled action
-        </DropdownItem>
-        <Divider key="separator" />
-        <DropdownItem itemId={4} key="separated link">
-          Separated link
-        </DropdownItem>
-        <DropdownItem itemId={5} key="separated action">
-          Separated action
-        </DropdownItem>
-      </DropdownList>
-    </Dropdown>
-  );
-};
diff --git a/packages/react-core/src/next/components/Dropdown/index.ts b/packages/react-core/src/next/components/Dropdown/index.ts
deleted file mode 100644
index 0edc20d91ad..00000000000
--- a/packages/react-core/src/next/components/Dropdown/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './Dropdown';
-export * from './DropdownGroup';
-export * from './DropdownItem';
-export * from './DropdownList';
diff --git a/packages/react-core/src/next/components/index.ts b/packages/react-core/src/next/components/index.ts
index 144eadb6ee1..f54f73d5f4d 100644
--- a/packages/react-core/src/next/components/index.ts
+++ b/packages/react-core/src/next/components/index.ts
@@ -1,3 +1,2 @@
-export * from './Dropdown';
 export * from './Select';
 export * from './Wizard';
diff --git a/packages/react-integration/cypress/integration/dropdown.spec.ts b/packages/react-integration/cypress/integration/dropdown.spec.ts
index 90ad8d9ad7e..18b0dc0a38f 100644
--- a/packages/react-integration/cypress/integration/dropdown.spec.ts
+++ b/packages/react-integration/cypress/integration/dropdown.spec.ts
@@ -1,451 +1,45 @@
-describe('Dropdown Demo Test', () => {
-  it('Navigate to demo section', () => {
+describe('Dropdown demo test', () => {
+  it('navigate to demo section', () => {
     cy.visit('http://localhost:3000/dropdown-demo-nav-link');
   });
 
-  // Accessibility Tests:
-  // Mouse click opens panel
-  it('Verify dropdown menu expanded', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
-    cy.get('#toggle-id').click();
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  // mouse interactions
+  it('opens/closes dropdown menu when clicked', () => {
+    cy.get('[data-cy="toggle"]').click();
+    cy.get('[data-cy="toggle"]').should('have.class', 'pf-m-expanded');
+    cy.get('[data-cy="toggle"]').click();
+    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
-  it('Verify dropdown menu has alignment breakpoints', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
-    const menu = cy.get('#dropdown .pf-c-dropdown__menu');
-    menu.should('have.class', 'pf-m-align-left-on-sm');
-    menu.should('have.class', 'pf-m-align-right-on-md');
-    menu.should('have.class', 'pf-m-align-left-on-lg');
-    menu.should('have.class', 'pf-m-align-right-on-xl');
-    menu.should('have.class', 'pf-m-align-left-on-2xl');
-    cy.get('#toggle-id').click();
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  it('closes dropdown when clicked outside', () => {
+    cy.get('[data-cy="toggle"]').click();
+    cy.get('main').click(0, 0);
+    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
-  // When toggle is collapsed:
-  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.clock();
-    cy.get('#dropdown > button').trigger('keydown', { key: 'Enter' });
-    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
-    cy.tick(1);
-    cy.focused().contains('Link');
-    // When toggle is expanded, enter closes panel
-    cy.get('#toggle-id').trigger('keydown', { key: 'Enter' });
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  it('closes dropdown when dropdown item clicked', () => {
+    cy.get('[data-cy="toggle"]').click();
+    cy.get('[data-cy="dropdown-item"]').click();
+    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
-  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.get('#dropdown > button').trigger('keydown', { key: ' ' });
-    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
-    cy.focused().contains('Link');
-    // When toggle is expanded, space closes panel and focus stays on the toggle
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: ' ' });
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
+  // keyboard interactions
+  it('closes dropdown on pressing esc, focus stays on the toggle', () => {
+    cy.get('[data-cy="toggle"]').click();
+    cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' });
+    cy.get('[data-cy="toggle"]').should('be.focused');
+    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
-  // Panel - Escape User action
-  it('Esc closes planel, places focus on the toggle', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('#toggle-id').type('{esc}');
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
+  it('closes dropdown on pressing tab, focus stays on the toggle', () => {
+    cy.get('[data-cy="toggle"]').click();
+    cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Tab' });
+    cy.get('[data-cy="toggle"]').should('be.focused');
+    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
-  it('Mouse click outside panel closes panel', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('main').click(0, 0, { force: true });
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // Panel > Menu - Single-selection variant
-  it('Mouse click closes panel', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('#dropdown')
-      .find('button')
-      .first()
-      .click();
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Enter closes the panel', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Enter' });
-    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('When focus is in panel, space places focus on toggle', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
-    cy.focused().should('have.class', 'pf-c-dropdown__toggle');
-  });
-
-  // Panel > Menu > Menu Item - Managing focus
-  it('Tab closes panel, focus stays on toggle', () => {
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
-  });
-
-  it('Shift + Tab closes panel, focus stays on toggle', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { shiftKey: true, key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
-  });
-});
-
-describe('Action Dropdown Demo Test', () => {
-  it('Navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dropdown-demo-nav-link');
-  });
-
-  it('Verify toggle dropdown', () => {
-    cy.get('#action-toggle-id').should('have.class', 'pf-c-dropdown__toggle-button');
-  });
-
-  // Accessibility Tests:
-  // Mouse click opens panel
-  it('Verify dropdown menu expanded', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .click();
-    cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
-    cy.get('#action-toggle-id').click();
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // When toggle is collapsed:
-  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.clock();
-    cy.get('#action-dropdown button')
-      .last()
-      .trigger('keydown', { key: 'Enter' });
-    cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
-    cy.tick(1);
-    cy.focused().contains('Action');
-    // When toggle is expanded, enter closes panel
-    cy.get('#action-toggle-id').trigger('keydown', { key: 'Enter' });
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .trigger('keydown', { key: ' ' });
-    cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
-    cy.focused().contains('Action');
-    // When toggle is expanded, space closes panel and focus stays on the toggle
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: ' ' });
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // Panel - Escape User action
-  it('Esc closes planel, places focus on the toggle', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .click();
-    cy.get('#action-toggle-id').type('{esc}');
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Mouse click outside panel closes panel', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .click();
-    cy.get('main').click(0, 0, { force: true });
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // Panel > Menu - Single-selection variant
-  it('Mouse click closes panel', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .click();
-    cy.get('#action-dropdown')
-      .find('button')
-      .last()
-      .click();
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Enter closes the panel', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Enter' });
-    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('When focus is in panel, space places focus on toggle', () => {
-    cy.get('#action-dropdown button')
-      .last()
-      .click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
-    cy.focused().should('have.class', 'pf-c-dropdown__toggle-button');
-  });
-
-  // Panel > Menu > Menu Item - Managing focus
-  it('Tab closes panel, focus stays on toggle', () => {
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Shift + Tab closes panel, focus stays on toggle', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { shiftKey: true, key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-  });
-});
-
-describe('Cog Dropdown Demo Test', () => {
-  it('Navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dropdown-demo-nav-link');
-  });
-
-  it('Verify toggle dropdown', () => {
-    cy.get('#cog-toggle-id').should('have.class', 'pf-c-dropdown__toggle-button');
-  });
-
-  // Accessibility Tests:
-  // Mouse click opens panel
-  it('Verify dropdown menu expanded', () => {
-    cy.get('#cog-dropdown button')
-      .eq(1)
-      .click();
-    cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
-    cy.get('#cog-toggle-id').click();
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // When toggle is collapsed:
-  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.clock();
-    cy.get('#cog-dropdown button')
-      .last()
-      .trigger('keydown', { key: 'Enter' });
-    cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
-    cy.tick(1);
-    cy.focused().contains('Action');
-    // When toggle is expanded, enter closes panel
-    cy.get('#cog-toggle-id').trigger('keydown', { key: 'Enter' });
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.get('#cog-dropdown button')
-      .last()
-      .trigger('keydown', { key: ' ' });
-    cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
-    cy.focused().contains('Action');
-    // When toggle is expanded, space closes panel and focus stays on the toggle
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: ' ' });
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // Panel - Escape User action
-  it('Esc closes planel, places focus on the toggle', () => {
-    cy.get('#cog-dropdown button')
-      .last()
-      .click();
-    cy.get('#cog-toggle-id').type('{esc}');
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Mouse click outside panel closes panel', () => {
-    cy.get('#cog-dropdown button')
-      .last()
-      .click();
-    cy.get('main').click(0, 0, { force: true });
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // Panel > Menu - Single-selection variant
-  it('Mouse click closes panel', () => {
-    cy.get('#cog-dropdown button')
-      .last()
-      .click();
-    cy.get('#cog-dropdown')
-      .find('button')
-      .last()
-      .click();
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Enter closes the panel', () => {
-    cy.get('#cog-dropdown button')
-      .last()
-      .click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Enter' });
-    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('When focus is in panel, space places focus on toggle', () => {
-    cy.get('#cog-dropdown button')
-      .last()
-      .click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
-    cy.focused().should('have.class', 'pf-c-dropdown__toggle-button');
-  });
-
-  // Panel > Menu > Menu Item - Managing focus
-  it('Tab closes panel, focus stays on toggle', () => {
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Shift + Tab closes panel, focus stays on toggle', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { shiftKey: true, key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-  });
-});
-
-describe('Dropdown with menu on document body demo test', () => {
-  it('Navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dropdown-demo-nav-link');
-  });
-
-  it('Verify toggle dropdown', () => {
-    cy.get('#dropdown-document-body > button').should('have.class', 'pf-c-dropdown__toggle');
-  });
-
-  // Accessibility Tests:
-  // Mouse click opens panel
-  it('Verify dropdown menu expanded', () => {
-    cy.get('#dropdown-document-body > button').click();
-    cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
-  });
-
-  it('Verify dropdown menu is on document.body', () => {
-    cy.get('body .pf-c-dropdown').should('exist');
-  });
-
-  it('Verify dropdown menu closed', () => {
-    cy.get('#toggle-id-document-body').click();
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // When toggle is collapsed:
-  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.clock();
-    cy.get('#dropdown-document-body > button').trigger('keydown', { key: 'Enter' });
-    cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
-    cy.tick(1);
-    cy.focused().contains('Link');
-    // When toggle is expanded, enter closes panel
-    cy.get('#toggle-id-document-body').trigger('keydown', { key: 'Enter' });
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.get('#dropdown-document-body > button').trigger('keydown', { key: ' ' });
-    cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
-    cy.focused().contains('Link');
-    // When toggle is expanded, space closes panel and focus stays on the toggle
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: ' ' });
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
-  });
-
-  // Panel - Escape User action
-  it('Esc closes planel, places focus on the toggle', () => {
-    cy.get('#dropdown-document-body > button').click();
-    cy.get('#toggle-id-document-body').type('{esc}');
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
-  });
-
-  it('Mouse click outside panel closes panel', () => {
-    cy.get('#dropdown-document-body > button').click();
-    cy.get('main').click(0, 0, { force: true });
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // Panel > Menu - Single-selection variant
-  it('Mouse click closes panel', () => {
-    cy.get('#dropdown-document-body > button').click();
-    cy.get('#dropdown-document-body')
-      .find('button')
-      .first()
-      .click();
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('Enter closes the panel', () => {
-    cy.get('#dropdown-document-body > button').click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Enter' });
-    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('When focus is in panel, space places focus on toggle', () => {
-    cy.get('#dropdown-document-body > button').click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
-    cy.focused().should('have.class', 'pf-c-dropdown__toggle');
-  });
-
-  // Panel > Menu > Menu Item - Managing focus
-  it('Tab closes panel, focus stays on toggle', () => {
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
-  });
-
-  it('Shift + Tab closes panel, focus stays on toggle', () => {
-    cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu-item')
-      .last()
-      .trigger('keydown', { shiftKey: true, key: 'Tab' });
-    cy.get('.pf-c-dropdown__toggle')
-      .last()
-      .should('not.have.class', 'pf-m-expanded');
-    cy.focused().contains('Dropdown');
-  });
+  /* 
+    pressing enter or space key on a button calls a click event internally
+    so testing for a button click should be sufficient
+  */
 });
diff --git a/packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts b/packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts
new file mode 100644
index 00000000000..12863ca6e58
--- /dev/null
+++ b/packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts
@@ -0,0 +1,359 @@
+describe('Dropdown Deprecated Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link');
+  });
+
+  // Accessibility Tests:
+  // Mouse click opens panel
+  it('Verify dropdown menu expanded', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
+    cy.get('#toggle-id').click();
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Verify dropdown menu has alignment breakpoints', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
+    const menu = cy.get('#dropdown .pf-c-dropdown__menu');
+    menu.should('have.class', 'pf-m-align-left-on-sm');
+    menu.should('have.class', 'pf-m-align-right-on-md');
+    menu.should('have.class', 'pf-m-align-left-on-lg');
+    menu.should('have.class', 'pf-m-align-right-on-xl');
+    menu.should('have.class', 'pf-m-align-left-on-2xl');
+    cy.get('#toggle-id').click();
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // When toggle is collapsed:
+  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.clock();
+    cy.get('#dropdown > button').trigger('keydown', { key: 'Enter' });
+    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
+    cy.tick(1);
+    cy.focused().contains('Link');
+    // When toggle is expanded, enter closes panel
+    cy.get('#toggle-id').trigger('keydown', { key: 'Enter' });
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.get('#dropdown > button').trigger('keydown', { key: ' ' });
+    cy.get('#dropdown').should('have.class', 'pf-m-expanded');
+    cy.focused().contains('Link');
+    // When toggle is expanded, space closes panel and focus stays on the toggle
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' });
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+
+  // Panel - Escape User action
+  it('Esc closes planel, places focus on the toggle', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('#toggle-id').type('{esc}');
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+
+  it('Mouse click outside panel closes panel', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('main').click(0, 0, { force: true });
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // Panel > Menu - Single-selection variant
+  it('Mouse click closes panel', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('#dropdown').find('button').first().click();
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Enter closes the panel', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' });
+    cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('When focus is in panel, space places focus on toggle', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
+    cy.focused().should('have.class', 'pf-c-dropdown__toggle');
+  });
+
+  // Panel > Menu > Menu Item - Managing focus
+  it('Tab closes panel, focus stays on toggle', () => {
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+
+  it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+});
+
+describe('Action Dropdown Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link');
+  });
+
+  it('Verify toggle dropdown', () => {
+    cy.get('#action-toggle-id').should('have.class', 'pf-c-dropdown__toggle-button');
+  });
+
+  // Accessibility Tests:
+  // Mouse click opens panel
+  it('Verify dropdown menu expanded', () => {
+    cy.get('#action-dropdown button').last().click();
+    cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
+    cy.get('#action-toggle-id').click();
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // When toggle is collapsed:
+  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.clock();
+    cy.get('#action-dropdown button').last().trigger('keydown', { key: 'Enter' });
+    cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
+    cy.tick(1);
+    cy.focused().contains('Action');
+    // When toggle is expanded, enter closes panel
+    cy.get('#action-toggle-id').trigger('keydown', { key: 'Enter' });
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.get('#action-dropdown button').last().trigger('keydown', { key: ' ' });
+    cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
+    cy.focused().contains('Action');
+    // When toggle is expanded, space closes panel and focus stays on the toggle
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' });
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // Panel - Escape User action
+  it('Esc closes planel, places focus on the toggle', () => {
+    cy.get('#action-dropdown button').last().click();
+    cy.get('#action-toggle-id').type('{esc}');
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Mouse click outside panel closes panel', () => {
+    cy.get('#action-dropdown button').last().click();
+    cy.get('main').click(0, 0, { force: true });
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // Panel > Menu - Single-selection variant
+  it('Mouse click closes panel', () => {
+    cy.get('#action-dropdown button').last().click();
+    cy.get('#action-dropdown').find('button').last().click();
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Enter closes the panel', () => {
+    cy.get('#action-dropdown button').last().click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' });
+    cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('When focus is in panel, space places focus on toggle', () => {
+    cy.get('#action-dropdown button').last().click();
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
+    cy.focused().should('have.class', 'pf-c-dropdown__toggle-button');
+  });
+
+  // Panel > Menu > Menu Item - Managing focus
+  it('Tab closes panel, focus stays on toggle', () => {
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+  });
+});
+
+describe('Cog Dropdown Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link');
+  });
+
+  it('Verify toggle dropdown', () => {
+    cy.get('#cog-toggle-id').should('have.class', 'pf-c-dropdown__toggle-button');
+  });
+
+  // Accessibility Tests:
+  // Mouse click opens panel
+  it('Verify dropdown menu expanded', () => {
+    cy.get('#cog-dropdown button').eq(1).click();
+    cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
+    cy.get('#cog-toggle-id').click();
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // When toggle is collapsed:
+  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.clock();
+    cy.get('#cog-dropdown button').last().trigger('keydown', { key: 'Enter' });
+    cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
+    cy.tick(1);
+    cy.focused().contains('Action');
+    // When toggle is expanded, enter closes panel
+    cy.get('#cog-toggle-id').trigger('keydown', { key: 'Enter' });
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.get('#cog-dropdown button').last().trigger('keydown', { key: ' ' });
+    cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
+    cy.focused().contains('Action');
+    // When toggle is expanded, space closes panel and focus stays on the toggle
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' });
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // Panel - Escape User action
+  it('Esc closes planel, places focus on the toggle', () => {
+    cy.get('#cog-dropdown button').last().click();
+    cy.get('#cog-toggle-id').type('{esc}');
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Mouse click outside panel closes panel', () => {
+    cy.get('#cog-dropdown button').last().click();
+    cy.get('main').click(0, 0, { force: true });
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // Panel > Menu - Single-selection variant
+  it('Mouse click closes panel', () => {
+    cy.get('#cog-dropdown button').last().click();
+    cy.get('#cog-dropdown').find('button').last().click();
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Enter closes the panel', () => {
+    cy.get('#cog-dropdown button').last().click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' });
+    cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('When focus is in panel, space places focus on toggle', () => {
+    cy.get('#cog-dropdown button').last().click();
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
+    cy.focused().should('have.class', 'pf-c-dropdown__toggle-button');
+  });
+
+  // Panel > Menu > Menu Item - Managing focus
+  it('Tab closes panel, focus stays on toggle', () => {
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+  });
+});
+
+describe('Dropdown with menu on document body demo test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link');
+  });
+
+  it('Verify toggle dropdown', () => {
+    cy.get('#dropdown-document-body > button').should('have.class', 'pf-c-dropdown__toggle');
+  });
+
+  // Accessibility Tests:
+  // Mouse click opens panel
+  it('Verify dropdown menu expanded', () => {
+    cy.get('#dropdown-document-body > button').click();
+    cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
+  });
+
+  it('Verify dropdown menu is on document.body', () => {
+    cy.get('body .pf-c-dropdown').should('exist');
+  });
+
+  it('Verify dropdown menu closed', () => {
+    cy.get('#toggle-id-document-body').click();
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // When toggle is collapsed:
+  it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.clock();
+    cy.get('#dropdown-document-body > button').trigger('keydown', { key: 'Enter' });
+    cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
+    cy.tick(1);
+    cy.focused().contains('Link');
+    // When toggle is expanded, enter closes panel
+    cy.get('#toggle-id-document-body').trigger('keydown', { key: 'Enter' });
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Space opens panel, places focus on first element in panel that can receive focus', () => {
+    cy.get('#dropdown-document-body > button').trigger('keydown', { key: ' ' });
+    cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
+    cy.focused().contains('Link');
+    // When toggle is expanded, space closes panel and focus stays on the toggle
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' });
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+
+  // Panel - Escape User action
+  it('Esc closes planel, places focus on the toggle', () => {
+    cy.get('#dropdown-document-body > button').click();
+    cy.get('#toggle-id-document-body').type('{esc}');
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+
+  it('Mouse click outside panel closes panel', () => {
+    cy.get('#dropdown-document-body > button').click();
+    cy.get('main').click(0, 0, { force: true });
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+  });
+
+  // Panel > Menu - Single-selection variant
+  it('Mouse click closes panel', () => {
+    cy.get('#dropdown-document-body > button').click();
+    cy.get('#dropdown-document-body').find('button').first().click();
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Enter closes the panel', () => {
+    cy.get('#dropdown-document-body > button').click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' });
+    cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('When focus is in panel, space places focus on toggle', () => {
+    cy.get('#dropdown-document-body > button').click();
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
+    cy.focused().should('have.class', 'pf-c-dropdown__toggle');
+  });
+
+  // Panel > Menu > Menu Item - Managing focus
+  it('Tab closes panel, focus stays on toggle', () => {
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+
+  it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
+    cy.get('.pf-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' });
+    cy.get('.pf-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded');
+    cy.focused().contains('Dropdown');
+  });
+});
diff --git a/packages/react-integration/cypress/integration/dropdownnext.spec.ts b/packages/react-integration/cypress/integration/dropdownnext.spec.ts
deleted file mode 100644
index b34861418cd..00000000000
--- a/packages/react-integration/cypress/integration/dropdownnext.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-describe('Dropdown next demo test', () => {
-  it('navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dropdown-next-demo-nav-link');
-  });
-
-  // mouse interactions
-  it('opens/closes dropdown menu when clicked', () => {
-    cy.get('[data-cy="toggle"]').click();
-    cy.get('[data-cy="toggle"]').should('have.class', 'pf-m-expanded');
-    cy.get('[data-cy="toggle"]').click();
-    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('closes dropdown when clicked outside', () => {
-    cy.get('[data-cy="toggle"]').click();
-    cy.get('main').click(0, 0);
-    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('closes dropdown when dropdown item clicked', () => {
-    cy.get('[data-cy="toggle"]').click();
-    cy.get('[data-cy="dropdown-item"]').click();
-    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
-  });
-
-  // keyboard interactions
-  it('closes dropdown on pressing esc, focus stays on the toggle', () => {
-    cy.get('[data-cy="toggle"]').click();
-    cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' });
-    cy.get('[data-cy="toggle"]').should('be.focused');
-    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
-  });
-
-  it('closes dropdown on pressing tab, focus stays on the toggle', () => {
-    cy.get('[data-cy="toggle"]').click();
-    cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Tab' });
-    cy.get('[data-cy="toggle"]').should('be.focused');
-    cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
-  });
-
-  /* 
-    pressing enter or space key on a button calls a click event internally
-    so testing for a button click should be sufficient
-  */
-});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index bce8cab8bd5..c3094dc1090 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -142,16 +142,16 @@ export const Demos: DemoInterface[] = [
     name: 'Drawer Resize Demo',
     componentType: Examples.DrawerResizeDemo
   },
+  {
+    id: 'dropdown-deprecated-demo',
+    name: 'Dropdown Deprecated Demo',
+    componentType: Examples.DropdownDeprecatedDemo
+  },
   {
     id: 'dropdown-demo',
     name: 'Dropdown Demo',
     componentType: Examples.DropdownDemo
   },
-  {
-    id: 'dropdown-next-demo',
-    name: 'Dropdown Next Demo',
-    componentType: Examples.DropdownNextDemo
-  },
   {
     id: 'dual-list-selector-basic-demo',
     name: 'DualListSelector basic Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
index 278c64420dd..2b2e2ca3c07 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading, BreadcrumbItemRenderArgs } from '@patternfly/react-core';
 import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbHeading,
-  BreadcrumbItemRenderArgs,
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   BadgeToggle,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 export class BreadcrumbDemo extends React.Component {
@@ -34,15 +31,15 @@ export class BreadcrumbDemo extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+      <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
         Edit
-      </DropdownItem>,
-      <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
         Deployment
-      </DropdownItem>,
-      <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
         Applications
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
@@ -63,7 +60,7 @@ export class BreadcrumbDemo extends React.Component {
         />
         <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
         <BreadcrumbItem isDropdown id="badge-dropdown">
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <BadgeToggle id="toggle-id" onToggle={this.onToggle}>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
index 3222af28386..40369616464 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -6,12 +6,14 @@ import {
   CardBody,
   CardFooter,
   CardExpandableContent,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Checkbox,
   Brand
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 const pfLogo = './images/pfLogo.svg';
 interface CardDemoState {
   selected: string;
@@ -73,25 +75,25 @@ export class CardDemo extends React.Component {
 
   render() {
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
         Disabled Action
-      </DropdownItem>,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button">
         Separated Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const actions = (
       <>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={this.onSelect}
           toggle={<KebabToggle onToggle={this.onToggle} />}
           isOpen={this.state.isOpen}
@@ -198,7 +200,7 @@ export class CardDemo extends React.Component {
         </Card>
         <br></br>
         <Card id="hasNoOffset-card">
-          <CardHeader actions={{actions, hasNoOffset: true}}>
+          <CardHeader actions={{ actions, hasNoOffset: true }}>
             <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
           </CardHeader>
           <CardTitle>Header</CardTitle>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
index b8606f9c486..81196ec26f8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
@@ -7,12 +7,14 @@ import {
   DataListItemCells,
   DataListCell,
   DataListAction,
-  DataListWrapModifier,
-  Dropdown,
-  DropdownItem,
+  DataListWrapModifier
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownPosition,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 interface DataListState {
   selectedDataListItemId: string;
@@ -68,20 +70,20 @@ export class DataListDemo extends React.Component<DataListProps, DataListState>
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={this.state.isOpen}
                 onSelect={this.onSelect}
                 toggle={<KebabToggle id="toggle-id" onToggle={this.onToggle} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
                 id="dropdown"
               />
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
index 8e0bf411098..16ed1d9f258 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
@@ -1,380 +1,60 @@
-import * as React from 'react';
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownToggleAction,
-  Stack,
-  StackItem,
-  BadgeToggle,
-  Title
-} from '@patternfly/react-core';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-
-interface DropdownState {
-  isOpen: boolean;
-  isBadgeOpen: boolean;
-  isActionOpen: boolean;
-  isCogOpen: boolean;
-  isMenuOnDocumentBodyOpen: boolean;
-  counter: number;
-}
-
-export class DropdownDemo extends React.Component<{}, DropdownState> {
-  static displayName = 'DropdownDemo';
-  onToggle: (event: any, isOpen: boolean) => void;
-  onBadgeToggle: (event: any, isBadgeOpen: boolean) => void;
-  onSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
-  onFocus: () => void;
-  onActionToggle: (event: any, isOpen: boolean) => void;
-  onActionSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
-  onActionClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  onActionFocus: () => void;
-  onCogToggle: (event: any, isOpen: boolean) => void;
-  onCogSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
-  onCogClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  onCogFocus: () => void;
-  onMenuDocumentBodyToggle: (event: any, isOpen: boolean) => void;
-  onMenuDocumentBodySelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
-  onMenuDocumentBodyFocus: () => void;
-  incrementCounter: () => void;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      isBadgeOpen: false,
-      isActionOpen: false,
-      isCogOpen: false,
-      isMenuOnDocumentBodyOpen: false,
-      counter: 0
-    };
-    this.onToggle = (_event, isOpen) => {
-      this.setState({
-        isOpen
-      });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onSelect = _event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-      this.onFocus();
-    };
-    this.onFocus = () => {
-      const element = document.getElementById('toggle-id');
-      if (element) {
-        element.focus();
-      }
-    };
-
-    this.onBadgeToggle = (_event, isBadgeOpen) => {
-      this.setState({
-        isBadgeOpen
-      });
-    };
-
-    this.onActionToggle = (_event, isActionOpen) => {
-      this.setState({
-        isActionOpen
-      });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onActionSelect = _event => {
-      this.setState({
-        isActionOpen: !this.state.isActionOpen
-      });
-      this.onActionFocus();
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onActionClick = _event => {
-      // eslint-disable-next-line no-console
-      console.log('Action clicked!');
-    };
-    this.onActionFocus = () => {
-      const element = document.getElementById('action-toggle-id');
-      if (element) {
-        element.focus();
-      }
-    };
-
-    this.onCogToggle = (_event, isCogOpen) => {
-      this.setState({
-        isCogOpen
-      });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onCogSelect = _event => {
-      this.setState({
-        isCogOpen: !this.state.isCogOpen
-      });
-      this.onCogFocus();
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onCogClick = _event => {
-      // eslint-disable-next-line no-console
-      console.log('Cog clicked!');
-    };
-    this.onCogFocus = () => {
-      const element = document.getElementById('cog-toggle-id');
-      if (element) {
-        element.focus();
-      }
-    };
-
-    this.onMenuDocumentBodyToggle = (_event, isMenuOnDocumentBodyOpen) => {
-      this.setState({
-        isMenuOnDocumentBodyOpen
-      });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onMenuDocumentBodySelect = _event => {
-      this.setState({
-        isMenuOnDocumentBodyOpen: !this.state.isMenuOnDocumentBodyOpen
-      });
-      this.onMenuDocumentBodyFocus();
-    };
-    this.onMenuDocumentBodyFocus = () => {
-      const element = document.getElementById('toggle-id-document-body');
-      if (element) {
-        element.focus();
-      }
-    };
-    this.incrementCounter = () => {
-      this.setState(prevState => ({
-        counter: prevState.counter + 1
-      }));
-    };
-  }
-
-  renderDropdown() {
-    const { isOpen } = this.state;
-
-    const dropdownItems = [
-      <DropdownItem key="link" href="https://www.google.com">
-        Link
-      </DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled href="www.google.com" id="disabled-link">
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem
-        key="disabled action"
-        isAriaDisabled
-        component="button"
-        onClick={this.incrementCounter}
-        onKeyPress={this.incrementCounter}
-        id="disabled-button"
-        tooltip="Tooltip for disabled item"
-        tooltipProps={{ position: 'top' }}
-      >
-        Disabled Action
-        {this.state.counter}
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link" description="Separated Link's description">
-        Separated Link
-      </DropdownItem>,
-      <DropdownItem key="separated action" component="button" description="Separated action's description">
-        Separated Action
-      </DropdownItem>
-    ];
-
-    return (
-      <StackItem isFilled={false}>
-        <Title size="2xl" headingLevel="h2">
+import React from 'react';
+import { Dropdown, DropdownList, DropdownItem, Divider, MenuToggle } from '@patternfly/react-core';
+
+const dropDownItems = (
+  <DropdownList>
+    <DropdownItem itemId={0} key="link">
+      Link
+    </DropdownItem>
+    <DropdownItem
+      data-cy="dropdown-item"
+      itemId={1}
+      key="action"
+      to="#default-link2"
+      onClick={(ev) => ev.preventDefault()}
+    >
+      Action
+    </DropdownItem>
+    <DropdownItem itemId={2} isDisabled key="disabled link">
+      Disabled link
+    </DropdownItem>
+    <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
+      Disabled action
+    </DropdownItem>
+    <Divider key="separator" />
+    <DropdownItem itemId={4} key="separated link">
+      Separated link
+    </DropdownItem>
+    <DropdownItem itemId={5} key="separated action">
+      Separated action
+    </DropdownItem>
+  </DropdownList>
+);
+
+export const DropdownDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined) => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onSelect={onSelect}
+      toggle={(toggleRef) => (
+        <MenuToggle data-cy="toggle" onClick={onToggleClick} isExpanded={isOpen} ref={toggleRef}>
           Dropdown
-        </Title>
-        <Dropdown
-          id="dropdown"
-          onSelect={this.onSelect}
-          toggle={
-            <DropdownToggle id="toggle-id" onToggle={this.onToggle} toggleIndicator={CaretDownIcon} icon={<UserIcon />}>
-              Dropdown
-            </DropdownToggle>
-          }
-          alignments={{
-            sm: 'left',
-            md: 'right',
-            lg: 'left',
-            xl: 'right',
-            '2xl': 'left'
-          }}
-          isOpen={isOpen}
-          dropdownItems={dropdownItems}
-        />
-      </StackItem>
-    );
-  }
-
-  renderActionDropdown() {
-    const { isActionOpen, isCogOpen } = this.state;
-
-    const dropdownItems = [
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" component="button" isDisabled>
-        Disabled action
-      </DropdownItem>,
-      <DropdownItem key="other action" component="button">
-        Other action
-      </DropdownItem>
-    ];
-    const dropdownIconItems = [
-      <DropdownItem key="action" component="button" icon={<CogIcon />}>
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled>
-        Disabled action
-      </DropdownItem>,
-      <DropdownItem key="other action" component="button" icon={<CubesIcon />}>
-        Other action
-      </DropdownItem>
-    ];
-
-    return (
-      <StackItem isFilled={false}>
-        <Title size="2xl" headingLevel="h2">
-          Action Dropdown
-        </Title>
-        <Dropdown
-          id="action-dropdown"
-          onSelect={this.onActionSelect}
-          toggle={
-            <DropdownToggle
-              id="action-toggle-id"
-              splitButtonItems={[
-                <DropdownToggleAction id="example-action-text" key="action" onClick={this.onActionClick}>
-                  Action
-                </DropdownToggleAction>
-              ]}
-              splitButtonVariant="action"
-              onToggle={this.onActionToggle}
-            />
-          }
-          isOpen={isActionOpen}
-          dropdownItems={dropdownItems}
-        />{' '}
-        <Dropdown
-          id="cog-dropdown"
-          onSelect={this.onCogSelect}
-          toggle={
-            <DropdownToggle
-              id="cog-toggle-id"
-              splitButtonItems={[
-                <DropdownToggleAction
-                  id="example-action-icon"
-                  key="cog-action"
-                  aria-label="Action"
-                  onClick={this.onCogClick}
-                >
-                  <CogIcon />
-                </DropdownToggleAction>
-              ]}
-              splitButtonVariant="action"
-              onToggle={this.onCogToggle}
-            />
-          }
-          isOpen={isCogOpen}
-          dropdownItems={dropdownIconItems}
-        />
-      </StackItem>
-    );
-  }
-
-  renderMenuOnDocumentBodyDropdown() {
-    const { isMenuOnDocumentBodyOpen } = this.state;
-
-    const dropdownItems = [
-      <DropdownItem key="link" href="https://www.google.com">
-        Link
-      </DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem 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">
-        Separated Action
-      </DropdownItem>
-    ];
-
-    return (
-      <StackItem isFilled={false}>
-        <Title size="2xl" headingLevel="h2">
-          Dropdown with menu on document body
-        </Title>
-        <Dropdown
-          id="dropdown-document-body"
-          onSelect={this.onMenuDocumentBodySelect}
-          toggle={
-            <DropdownToggle
-              id="toggle-id-document-body"
-              onToggle={this.onMenuDocumentBodyToggle}
-              toggleIndicator={CaretDownIcon}
-              icon={<UserIcon />}
-            >
-              Dropdown
-            </DropdownToggle>
-          }
-          isOpen={isMenuOnDocumentBodyOpen}
-          dropdownItems={dropdownItems}
-          menuAppendTo={() => document.body}
-        />
-      </StackItem>
-    );
-  }
-
-  renderBadgeDropdown() {
-    const { isBadgeOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
-        Edit
-      </DropdownItem>,
-      <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
-        Deployment
-      </DropdownItem>,
-      <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
-        Applications
-      </DropdownItem>
-    ];
-    return (
-      <Dropdown
-        id="badge-dropdown"
-        toggle={
-          <BadgeToggle id="toggle-id" onToggle={this.onBadgeToggle}>
-            {dropdownItems.length}
-          </BadgeToggle>
-        }
-        isOpen={isBadgeOpen}
-        dropdownItems={dropdownItems}
-      />
-    );
-  }
-
-  render() {
-    return (
-      <Stack hasGutter>
-        {this.renderDropdown()}
-        {this.renderActionDropdown()}
-        {this.renderMenuOnDocumentBodyDropdown()}
-        {this.renderBadgeDropdown()}
-      </Stack>
-    );
-  }
-}
+        </MenuToggle>
+      )}
+    >
+      {dropDownItems}
+    </Dropdown>
+  );
+};
+DropdownDemo.displayName = 'DropdownDemo';
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx
new file mode 100644
index 00000000000..8b33d8c433b
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx
@@ -0,0 +1,378 @@
+import * as React from 'react';
+import { Stack, StackItem, Title } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  DropdownToggleAction,
+  BadgeToggle
+} from '@patternfly/react-core/deprecated';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+
+interface DropdownState {
+  isOpen: boolean;
+  isBadgeOpen: boolean;
+  isActionOpen: boolean;
+  isCogOpen: boolean;
+  isMenuOnDocumentBodyOpen: boolean;
+  counter: number;
+}
+
+export class DropdownDeprecatedDemo extends React.Component<{}, DropdownState> {
+  static displayName = 'DropdownDeprecatedDemo';
+  onToggle: (event: any, isOpen: boolean) => void;
+  onBadgeToggle: (event: any, isBadgeOpen: boolean) => void;
+  onSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
+  onFocus: () => void;
+  onActionToggle: (event: any, isOpen: boolean) => void;
+  onActionSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
+  onActionClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  onActionFocus: () => void;
+  onCogToggle: (event: any, isOpen: boolean) => void;
+  onCogSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
+  onCogClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  onCogFocus: () => void;
+  onMenuDocumentBodyToggle: (event: any, isOpen: boolean) => void;
+  onMenuDocumentBodySelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
+  onMenuDocumentBodyFocus: () => void;
+  incrementCounter: () => void;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      isBadgeOpen: false,
+      isActionOpen: false,
+      isCogOpen: false,
+      isMenuOnDocumentBodyOpen: false,
+      counter: 0
+    };
+    this.onToggle = (_event, isOpen) => {
+      this.setState({
+        isOpen
+      });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.onSelect = (_event) => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+      this.onFocus();
+    };
+    this.onFocus = () => {
+      const element = document.getElementById('toggle-id');
+      if (element) {
+        element.focus();
+      }
+    };
+
+    this.onBadgeToggle = (_event, isBadgeOpen) => {
+      this.setState({
+        isBadgeOpen
+      });
+    };
+
+    this.onActionToggle = (_event, isActionOpen) => {
+      this.setState({
+        isActionOpen
+      });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.onActionSelect = (_event) => {
+      this.setState({
+        isActionOpen: !this.state.isActionOpen
+      });
+      this.onActionFocus();
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.onActionClick = (_event) => {
+      // eslint-disable-next-line no-console
+      console.log('Action clicked!');
+    };
+    this.onActionFocus = () => {
+      const element = document.getElementById('action-toggle-id');
+      if (element) {
+        element.focus();
+      }
+    };
+
+    this.onCogToggle = (_event, isCogOpen) => {
+      this.setState({
+        isCogOpen
+      });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.onCogSelect = (_event) => {
+      this.setState({
+        isCogOpen: !this.state.isCogOpen
+      });
+      this.onCogFocus();
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.onCogClick = (_event) => {
+      // eslint-disable-next-line no-console
+      console.log('Cog clicked!');
+    };
+    this.onCogFocus = () => {
+      const element = document.getElementById('cog-toggle-id');
+      if (element) {
+        element.focus();
+      }
+    };
+
+    this.onMenuDocumentBodyToggle = (_event, isMenuOnDocumentBodyOpen) => {
+      this.setState({
+        isMenuOnDocumentBodyOpen
+      });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.onMenuDocumentBodySelect = (_event) => {
+      this.setState({
+        isMenuOnDocumentBodyOpen: !this.state.isMenuOnDocumentBodyOpen
+      });
+      this.onMenuDocumentBodyFocus();
+    };
+    this.onMenuDocumentBodyFocus = () => {
+      const element = document.getElementById('toggle-id-document-body');
+      if (element) {
+        element.focus();
+      }
+    };
+    this.incrementCounter = () => {
+      this.setState((prevState) => ({
+        counter: prevState.counter + 1
+      }));
+    };
+  }
+
+  renderDropdown() {
+    const { isOpen } = this.state;
+
+    const dropdownItems = [
+      <DropdownItemDeprecated key="link" href="https://www.google.com">
+        Link
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
+        Action
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled href="www.google.com" id="disabled-link">
+        Disabled Link
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated
+        key="disabled action"
+        isAriaDisabled
+        component="button"
+        onClick={this.incrementCounter}
+        onKeyPress={this.incrementCounter}
+        id="disabled-button"
+        tooltip="Tooltip for disabled item"
+        tooltipProps={{ position: 'top' }}
+      >
+        Disabled Action
+        {this.state.counter}
+      </DropdownItemDeprecated>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItemDeprecated key="separated link" description="Separated Link's description">
+        Separated Link
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button" description="Separated action's description">
+        Separated Action
+      </DropdownItemDeprecated>
+    ];
+
+    return (
+      <StackItem isFilled={false}>
+        <Title size="2xl" headingLevel="h2">
+          Dropdown
+        </Title>
+        <DropdownDeprecated
+          id="dropdown"
+          onSelect={this.onSelect}
+          toggle={
+            <DropdownToggle id="toggle-id" onToggle={this.onToggle} toggleIndicator={CaretDownIcon} icon={<UserIcon />}>
+              Dropdown
+            </DropdownToggle>
+          }
+          alignments={{
+            sm: 'left',
+            md: 'right',
+            lg: 'left',
+            xl: 'right',
+            '2xl': 'left'
+          }}
+          isOpen={isOpen}
+          dropdownItems={dropdownItems}
+        />
+      </StackItem>
+    );
+  }
+
+  renderActionDropdown() {
+    const { isActionOpen, isCogOpen } = this.state;
+
+    const dropdownItems = [
+      <DropdownItemDeprecated key="action" component="button">
+        Action
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" component="button" isDisabled>
+        Disabled action
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="other action" component="button">
+        Other action
+      </DropdownItemDeprecated>
+    ];
+    const dropdownIconItems = [
+      <DropdownItemDeprecated key="action" component="button" icon={<CogIcon />}>
+        Action
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" component="button" icon={<BellIcon />} isDisabled>
+        Disabled action
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="other action" component="button" icon={<CubesIcon />}>
+        Other action
+      </DropdownItemDeprecated>
+    ];
+
+    return (
+      <StackItem isFilled={false}>
+        <Title size="2xl" headingLevel="h2">
+          Action Dropdown
+        </Title>
+        <DropdownDeprecated
+          id="action-dropdown"
+          onSelect={this.onActionSelect}
+          toggle={
+            <DropdownToggle
+              id="action-toggle-id"
+              splitButtonItems={[
+                <DropdownToggleAction id="example-action-text" key="action" onClick={this.onActionClick}>
+                  Action
+                </DropdownToggleAction>
+              ]}
+              splitButtonVariant="action"
+              onToggle={this.onActionToggle}
+            />
+          }
+          isOpen={isActionOpen}
+          dropdownItems={dropdownItems}
+        />{' '}
+        <DropdownDeprecated
+          id="cog-dropdown"
+          onSelect={this.onCogSelect}
+          toggle={
+            <DropdownToggle
+              id="cog-toggle-id"
+              splitButtonItems={[
+                <DropdownToggleAction
+                  id="example-action-icon"
+                  key="cog-action"
+                  aria-label="Action"
+                  onClick={this.onCogClick}
+                >
+                  <CogIcon />
+                </DropdownToggleAction>
+              ]}
+              splitButtonVariant="action"
+              onToggle={this.onCogToggle}
+            />
+          }
+          isOpen={isCogOpen}
+          dropdownItems={dropdownIconItems}
+        />
+      </StackItem>
+    );
+  }
+
+  renderMenuOnDocumentBodyDropdown() {
+    const { isMenuOnDocumentBodyOpen } = this.state;
+
+    const dropdownItems = [
+      <DropdownItemDeprecated key="link" href="https://www.google.com">
+        Link
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
+        Action
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
+        Disabled Action
+      </DropdownItemDeprecated>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button">
+        Separated Action
+      </DropdownItemDeprecated>
+    ];
+
+    return (
+      <StackItem isFilled={false}>
+        <Title size="2xl" headingLevel="h2">
+          Dropdown with menu on document body
+        </Title>
+        <DropdownDeprecated
+          id="dropdown-document-body"
+          onSelect={this.onMenuDocumentBodySelect}
+          toggle={
+            <DropdownToggle
+              id="toggle-id-document-body"
+              onToggle={this.onMenuDocumentBodyToggle}
+              toggleIndicator={CaretDownIcon}
+              icon={<UserIcon />}
+            >
+              Dropdown
+            </DropdownToggle>
+          }
+          isOpen={isMenuOnDocumentBodyOpen}
+          dropdownItems={dropdownItems}
+          menuAppendTo={() => document.body}
+        />
+      </StackItem>
+    );
+  }
+
+  renderBadgeDropdown() {
+    const { isBadgeOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
+        Edit
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
+        Deployment
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
+        Applications
+      </DropdownItemDeprecated>
+    ];
+    return (
+      <DropdownDeprecated
+        id="badge-dropdown"
+        toggle={
+          <BadgeToggle id="toggle-id" onToggle={this.onBadgeToggle}>
+            {dropdownItems.length}
+          </BadgeToggle>
+        }
+        isOpen={isBadgeOpen}
+        dropdownItems={dropdownItems}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <Stack hasGutter>
+        {this.renderDropdown()}
+        {this.renderActionDropdown()}
+        {this.renderMenuOnDocumentBodyDropdown()}
+        {this.renderBadgeDropdown()}
+      </Stack>
+    );
+  }
+}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx
deleted file mode 100644
index 07ba7a24afc..00000000000
--- a/packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownList, DropdownItem } from '@patternfly/react-core/dist/esm/next';
-import { Divider, MenuToggle } from '@patternfly/react-core';
-
-const dropDownItems = (
-  <DropdownList>
-    <DropdownItem itemId={0} key="link">
-      Link
-    </DropdownItem>
-    <DropdownItem
-      data-cy="dropdown-item"
-      itemId={1}
-      key="action"
-      to="#default-link2"
-      onClick={ev => ev.preventDefault()}
-    >
-      Action
-    </DropdownItem>
-    <DropdownItem itemId={2} isDisabled key="disabled link">
-      Disabled link
-    </DropdownItem>
-    <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
-      Disabled action
-    </DropdownItem>
-    <Divider key="separator" />
-    <DropdownItem itemId={4} key="separated link">
-      Separated link
-    </DropdownItem>
-    <DropdownItem itemId={5} key="separated action">
-      Separated action
-    </DropdownItem>
-  </DropdownList>
-);
-
-export const DropdownNextDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined) => {
-    setIsOpen(false);
-  };
-
-  return (
-    <Dropdown
-      isOpen={isOpen}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      onSelect={onSelect}
-      toggle={toggleRef => (
-        <MenuToggle data-cy="toggle" onClick={onToggleClick} isExpanded={isOpen} ref={toggleRef}>
-          Dropdown
-        </MenuToggle>
-      )}
-    >
-      {dropDownItems}
-    </Dropdown>
-  );
-};
-DropdownNextDemo.displayName = 'DropdownNextDemo';
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
index 582398234e6..8444081997d 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
+import { Button, ButtonVariant, DualListSelector, DualListSelectorProps } from '@patternfly/react-core';
 import {
-  Button,
-  ButtonVariant,
-  Dropdown,
-  DropdownItem,
-  DualListSelector,
-  DualListSelectorProps,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import PficonSortCommonDescIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-desc-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 
@@ -118,13 +115,13 @@ export class DualListSelectorWithActionsDemo extends React.Component<DualListSel
 
   render() {
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="second action" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="second action" component="button">
         Second Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const availableOptionsActions = [
@@ -136,7 +133,7 @@ export class DualListSelectorWithActionsDemo extends React.Component<DualListSel
       >
         {this.state.availableDescending ? <PficonSortCommonDescIcon /> : <PficonSortCommonAscIcon />}
       </Button>,
-      <Dropdown
+      <DropdownDeprecated
         toggle={<KebabToggle onToggle={(_event: any, isOpen) => this.onToggle(isOpen, 'available')} id="toggle-id-6" />}
         isOpen={this.state.isAvailableKebabOpen}
         isPlain
@@ -154,7 +151,7 @@ export class DualListSelectorWithActionsDemo extends React.Component<DualListSel
       >
         {this.state.chosenDescending ? <PficonSortCommonDescIcon /> : <PficonSortCommonAscIcon />}
       </Button>,
-      <Dropdown
+      <DropdownDeprecated
         toggle={<KebabToggle onToggle={(_event: any, isOpen) => this.onToggle(isOpen, 'chosen')} id="toggle-id-6" />}
         isOpen={this.state.isChosenKebabOpen}
         isPlain
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
index 4af398ddcf4..bc9cc8777dc 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
@@ -12,13 +12,15 @@ import {
   InputGroupText,
   InputGroupTextVariant,
   TextInput,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
   Popover,
   PopoverPosition,
   ValidatedOptions
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 
 interface InputGroupState {
   isOpen: boolean;
@@ -40,7 +42,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
         isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: false,
         selected: event.currentTarget.value
@@ -79,7 +81,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
         <br />
         <br />
         <InputGroup>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <DropdownToggle onToggle={this.onToggle}>
@@ -88,17 +90,17 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
             }
             isOpen={this.state.isOpen}
             dropdownItems={[
-              <DropdownItem key="opt-1" value="Option 1" component="button">
+              <DropdownItemDeprecated key="opt-1" value="Option 1" component="button">
                 Option 1
-              </DropdownItem>,
-              <DropdownItem key="opt-2" value="Option 2" component="button">
+              </DropdownItemDeprecated>,
+              <DropdownItemDeprecated key="opt-2" value="Option 2" component="button">
                 Option 2
-              </DropdownItem>,
-              <DropdownItem key="opt-3" value="Option 3" component="button">
+              </DropdownItemDeprecated>,
+              <DropdownItemDeprecated key="opt-3" value="Option 3" component="button">
                 Option 3
-              </DropdownItem>
+              </DropdownItemDeprecated>
             ]}
-          ></Dropdown>
+          ></DropdownDeprecated>
           <TextInput id="textInput3" aria-label="input with dropdown and button" />
           <Button id="inputDropdownButton1" variant={ButtonVariant.control}>
             Button
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index c9050f1f33a..57bd6f83995 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -11,13 +11,15 @@ import {
   ToolbarGroup,
   ToolbarItem,
   ContextSelector,
-  ContextSelectorItem,
-  Dropdown,
+  ContextSelectorItem
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
   DropdownToggle,
   KebabToggle,
   DropdownSeparator,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
@@ -91,7 +93,7 @@ export class MastheadDemo extends React.Component {
     const filtered =
       this.state.searchValue === ''
         ? this.items
-        : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
+        : this.items.filter((str) => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
 
     this.setState({ filteredItems: filtered || [] });
   };
@@ -100,14 +102,14 @@ export class MastheadDemo extends React.Component {
     const { isOpen, isDropdownOpen, isKebabOpen, selected, searchValue, filteredItems } = this.state;
 
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled href="www.google.com">
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated
         key="disabled action"
         isAriaDisabled
         component="button"
@@ -115,12 +117,12 @@ export class MastheadDemo extends React.Component {
         tooltipProps={{ position: 'top' }}
       >
         Disabled Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
+      <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button">
         Separated Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
@@ -157,7 +159,7 @@ export class MastheadDemo extends React.Component {
               </ToolbarItem>
               <ToolbarGroup align={{ default: 'alignRight' }}>
                 <ToolbarItem visibility={{ default: 'hidden', lg: 'visible' }}>
-                  <Dropdown
+                  <DropdownDeprecated
                     onSelect={this.onDropdownSelect}
                     toggle={
                       <DropdownToggle id="toggle-id" onToggle={this.onDropdownToggle} toggleIndicator={CaretDownIcon}>
@@ -170,7 +172,7 @@ export class MastheadDemo extends React.Component {
                   />
                 </ToolbarItem>
                 <ToolbarItem>
-                  <Dropdown
+                  <DropdownDeprecated
                     onSelect={this.onKebabSelect}
                     toggle={<KebabToggle onToggle={this.onKebabToggle} id="toggle-id-kebab" />}
                     isOpen={isKebabOpen}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
index 3406e9326d9..7a52b7e6b35 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownDirection,
-  DropdownPosition,
-  DropdownSeparator,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerProps,
   NotificationDrawerBody,
@@ -15,6 +9,14 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownDirection,
+  DropdownPosition,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 interface BasicNotificationDrawerDemoState {
   isDrawerOpen: boolean;
@@ -50,19 +52,19 @@ export class BasicNotificationDrawerDemo extends React.Component<
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="disabled link" isDisabled>
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     return (
       <NotificationDrawer>
         <NotificationDrawerHeader count={2} onClose={this.onDrawerClose}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={<KebabToggle onToggle={this.onToggle(0)} id="toggle-id-0" />}
             isOpen={isOpen[0]}
@@ -82,7 +84,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                 srTitle="Info notification:"
                 truncateTitle={10}
               >
-                <Dropdown
+                <DropdownDeprecated
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
                   toggle={<KebabToggle onToggle={this.onToggle(1)} id="toggle-id-1" />}
@@ -102,7 +104,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                 title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                 srTitle="Danger notification:"
               >
-                <Dropdown
+                <DropdownDeprecated
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
                   toggle={<KebabToggle onToggle={this.onToggle(2)} id="toggle-id-2" />}
@@ -123,7 +125,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                 title="Read warning notification title"
                 srTitle="Warning notification:"
               >
-                <Dropdown
+                <DropdownDeprecated
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
                   toggle={<KebabToggle onToggle={this.onToggle(3)} id="toggle-id-3" />}
@@ -146,7 +148,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                 truncateTitle={1}
                 tooltipPosition="bottom"
               >
-                <Dropdown
+                <DropdownDeprecated
                   position={DropdownPosition.right}
                   direction={DropdownDirection.up}
                   onSelect={this.onSelect}
@@ -163,7 +165,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
             </NotificationDrawerListItem>
             <NotificationDrawerListItem isRead>
               <NotificationDrawerListItemHeader title="Read default notification title" srTitle="Default notification:">
-                <Dropdown
+                <DropdownDeprecated
                   position={DropdownPosition.right}
                   direction={DropdownDirection.up}
                   onSelect={this.onSelect}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
index b028f5538b9..15a90e664f4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
@@ -1,17 +1,11 @@
 import React from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownDirection,
-  DropdownPosition,
-  DropdownSeparator,
   EmptyState,
   EmptyStateHeader,
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerProps,
   NotificationDrawerBody,
@@ -22,10 +16,17 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  Title,
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownDirection,
+  DropdownPosition,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface GroupsNotificationDrawerDemoState {
@@ -87,19 +88,19 @@ export class GroupsNotificationDrawerDemo extends React.Component<
   render() {
     const { isOpenMap, firstGroupExpanded, secondGroupExpanded, thirdGroupExpanded } = this.state;
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="disabled link" isDisabled>
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     return (
       <NotificationDrawer>
         <NotificationDrawerHeader count={4} onClose={this.onDrawerClose}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <KebabToggle
@@ -131,7 +132,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Unread info notification title"
                     srTitle="Info notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
@@ -156,7 +157,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                     srTitle="Danger notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
@@ -182,7 +183,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Read warning notification title"
                     srTitle="Warning notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
@@ -207,7 +208,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Read success notification title"
                     srTitle="Success notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       direction={DropdownDirection.up}
                       onSelect={this.onSelect}
@@ -245,7 +246,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Unread info notification title"
                     srTitle="Info notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
@@ -270,7 +271,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                     srTitle="Danger notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
@@ -296,7 +297,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Read warning notification title"
                     srTitle="Warning notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
@@ -321,7 +322,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
                     title="Read success notification title"
                     srTitle="Success notification:"
                   >
-                    <Dropdown
+                    <DropdownDeprecated
                       position={DropdownPosition.right}
                       direction={DropdownDirection.up}
                       onSelect={this.onSelect}
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 b48f317a184..386777e0d33 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
@@ -7,9 +7,10 @@ import {
   OverflowMenuItem,
   OverflowMenuDropdownItem,
   MenuToggle,
-  Button
+  Button,
+  Dropdown,
+  DropdownList
 } 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';
@@ -80,7 +81,7 @@ export class OverflowMenuDemo extends React.Component {
         <OverflowMenuControl>
           <Dropdown
             onSelect={this.onSimpleSelect}
-            toggle={toggleRef => (
+            toggle={(toggleRef) => (
               <MenuToggle
                 ref={toggleRef}
                 aria-label="Simple example overflow menu"
@@ -173,7 +174,7 @@ export class OverflowMenuDemo extends React.Component {
         <OverflowMenuControl hasAdditionalOptions>
           <Dropdown
             onSelect={this.onAdditionalOptionsSelect}
-            toggle={toggleRef => (
+            toggle={(toggleRef) => (
               <MenuToggle
                 ref={toggleRef}
                 aria-label="Simple example overflow menu"
@@ -240,7 +241,7 @@ export class OverflowMenuDemo extends React.Component {
         <OverflowMenuControl hasAdditionalOptions>
           <Dropdown
             onSelect={this.onPersistSelect}
-            toggle={toggleRef => (
+            toggle={(toggleRef) => (
               <MenuToggle
                 ref={toggleRef}
                 aria-label="Additional options overflow menu"
@@ -315,7 +316,7 @@ export class OverflowMenuDemo extends React.Component {
           <OverflowMenuControl>
             <Dropdown
               onSelect={this.onContainerBreakpointSelect}
-              toggle={toggleRef => (
+              toggle={(toggleRef) => (
                 <MenuToggle
                   ref={toggleRef}
                   aria-label="Additional options overflow menu"
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
index 56a02bb61a0..61324433c3f 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Avatar,
   Button,
-  Dropdown,
   Page,
   PageHeader,
   PageHeaderTools,
@@ -11,12 +10,15 @@ import {
   PageSidebar,
   PageSection,
   PageSectionVariants,
-  SkipToContent,
+  SkipToContent
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
   KebabToggle,
   DropdownToggle,
-  DropdownGroup,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -76,22 +78,22 @@ export class PageDemo extends React.Component {
     };
 
     const kebabDropdownItems = [
-      <DropdownItem key="group 1 settings">
+      <DropdownItemDeprecated key="group 1 settings">
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="group 1 help">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="group 1 help">
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
 
     const headerTools = (
@@ -121,7 +123,7 @@ export class PageDemo extends React.Component {
             id="kebab-dropdown"
             /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onKebabDropdownSelect}
@@ -140,7 +142,7 @@ export class PageDemo extends React.Component {
               '2xl': 'visible'
             }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
index 8be9a4746e9..dddb377a57a 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
@@ -16,12 +16,14 @@ import {
   SelectOption,
   SelectOptionObject,
   SelectVariant,
-  Dropdown,
-  DropdownItem,
-  DropdownSeparator,
-  KebabToggle,
   TextInput
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
@@ -62,7 +64,7 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
   }
 
   toggleisOpen = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isOpen: !prevState.isOpen
     }));
   };
@@ -84,7 +86,7 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
   ) => {
     const selectedTarget = event.target as HTMLInputElement;
     const checked = selectedTarget.checked;
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const prevSelections = prevState.filters[type];
       return {
         filters: {
@@ -108,7 +110,7 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
   onDelete = (type: string | ToolbarChipGroup = '', id: ToolbarChip | string = '') => {
     if (type) {
       const lowerCaseType = typeof type === 'string' ? type.toLowerCase() : type.name.toLowerCase();
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const newState = Object.assign(prevState);
         newState.filters[lowerCaseType] = newState.filters[lowerCaseType].filter((s: string) => s !== id);
         return {
@@ -128,7 +130,7 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
 
   onDeleteGroup = (category: string) => {
     if (category) {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         prevState.filters[category.toLowerCase() as 'risk' | 'key' | 'status'] = [];
         return {
           filters: prevState.filters
@@ -229,21 +231,21 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
     );
 
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
         Disabled Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
+      <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button">
         Separated Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const widths = {
@@ -284,7 +286,7 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem>
-          <Dropdown
+          <DropdownDeprecated
             toggle={<KebabToggle onToggle={this.onKebabToggle} />}
             isOpen={kebabIsOpen}
             isPlain
@@ -421,7 +423,7 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
           clearAllFilters={this.onDelete}
           className="pf-m-toggle-group-container"
           clearFiltersButtonText="Clear filters"
-          numberOfFiltersText={numOfFilters => `Applied filters: ${numOfFilters}`}
+          numberOfFiltersText={(numOfFilters) => `Applied filters: ${numOfFilters}`}
         >
           <ToolbarContent>{toolbarItems}</ToolbarContent>
         </Toolbar>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index dc05ebbee68..3b710119afc 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -25,8 +25,8 @@ export * from './DescriptionListDemo/DescriptionListBreakpointsDemo';
 export * from './ToolbarDemo/ToolbarVisibilityDemo';
 export * from './DrawerDemo/DrawerDemo';
 export * from './DrawerDemo/DrawerResizeDemo';
+export * from './DropdownDeprecatedDemo/DropdownDeprecatedDemo';
 export * from './DropdownDemo/DropdownDemo';
-export * from './DropdownNextDemo/DropdownNextDemo';
 export * from './DualListSelectorDemo/DualListSelectorBasicDemo';
 export * from './DualListSelectorDemo/DualListSelectorTreeDemo';
 export * from './DualListSelectorDemo/DualListSelectorWithActionsDemo';
diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx
index 8090e831423..27130789aba 100644
--- a/packages/react-table/src/components/Table/ActionsColumn.tsx
+++ b/packages/react-table/src/components/Table/ActionsColumn.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/esm/next/components';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
 import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
@@ -115,7 +115,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               }
               const item = (
                 <DropdownItem
-                  onClick={(event) => {
+                  onClick={(event: any) => {
                     onActionClick(event, onClick);
                     onToggle();
                   }}
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index fe84564856e..c286abe0b3f 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core';
-import {
-  DropdownDirection,
-  DropdownPosition
-} from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
+import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 import { Provider } from './base';
@@ -177,7 +174,7 @@ export class Table extends React.Component<TableProps, {}> {
       return false;
     }
     return rows.every(
-      row => this.isSelected(row) || row.disableSelection || (row.hasOwnProperty('parent') && !row.showSelect)
+      (row) => this.isSelected(row) || row.disableSelection || (row.hasOwnProperty('parent') && !row.showSelect)
     );
   };
 
@@ -185,7 +182,7 @@ export class Table extends React.Component<TableProps, {}> {
     if (rows === undefined || rows.length === 0) {
       return false;
     }
-    return rows.every(row => row.isOpen === undefined || row.isOpen);
+    return rows.every((row) => row.isOpen === undefined || row.isOpen);
   };
 
   render() {
@@ -259,7 +256,7 @@ export class Table extends React.Component<TableProps, {}> {
       onFavorite,
       canSortFavorites,
       // order of columns: Collapsible | Selectable | Favoritable
-      firstUserColumnIndex: [onCollapse, onSelect, onFavorite].filter(callback => callback).length
+      firstUserColumnIndex: [onCollapse, onSelect, onFavorite].filter((callback) => callback).length
     });
 
     const table = (
diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx
index 9317e91e39d..b9a9f093b74 100644
--- a/packages/react-table/src/components/Table/TableTypes.tsx
+++ b/packages/react-table/src/components/Table/TableTypes.tsx
@@ -1,10 +1,7 @@
-import { DropdownItemProps } from '@patternfly/react-core/next';
+import { DropdownItemProps } from '@patternfly/react-core';
 import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base';
 import { SortByDirection } from './SortColumn';
-import {
-  DropdownDirection,
-  DropdownPosition
-} from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
+import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
 import * as React from 'react';
 import { CustomActionsToggleProps } from './ActionsColumn';
 import { ButtonProps } from '@patternfly/react-core';
diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx
index ffff3647fd5..83644a30487 100644
--- a/packages/react-table/src/components/Table/base/types.tsx
+++ b/packages/react-table/src/components/Table/base/types.tsx
@@ -6,14 +6,8 @@
  */
 
 import * as React from 'react';
-import {
-  TooltipProps,
-  PopoverProps,
-  DropdownPosition,
-  DropdownDirection,
-  SelectOptionObject,
-  SelectProps
-} from '@patternfly/react-core';
+import { TooltipProps, PopoverProps, SelectOptionObject, SelectProps } from '@patternfly/react-core';
+import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components';
 import { TableComposable } from '../../TableComposable/TableComposable';
 import { Thead } from '../../TableComposable/Thead';
 import { Tbody } from '../../TableComposable/Tbody';
diff --git a/packages/react-table/src/components/Table/utils/transformers.test.tsx b/packages/react-table/src/components/Table/utils/transformers.test.tsx
index 0c550fab72d..bd8652aea13 100644
--- a/packages/react-table/src/components/Table/utils/transformers.test.tsx
+++ b/packages/react-table/src/components/Table/utils/transformers.test.tsx
@@ -18,7 +18,7 @@ import {
   textCenter,
   cellActions
 } from './';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core';
+import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/deprecated';
 import {
   IAction,
   IActions,
@@ -210,7 +210,7 @@ describe('Transformer functions', () => {
 
   describe('cellWidth', () => {
     const widths = [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100];
-    widths.forEach(width =>
+    widths.forEach((width) =>
       test(`${width}`, () => {
         expect(cellWidth(width as widthType)()).toEqual({ className: `pf-m-width-${width}` });
       })
@@ -336,7 +336,7 @@ describe('Transformer functions', () => {
   });
 
   describe('visibility classNames', () => {
-    Object.keys(Visibility).forEach(className => {
+    Object.keys(Visibility).forEach((className) => {
       test(`${className} is defined`, () => {
         expect(Visibility[className]).not.toBe(undefined);
       });
diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md
index 4e9f5bb2071..9eb6315e79f 100644
--- a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md
+++ b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md
@@ -31,7 +31,7 @@ propComponents:
     'ThSortType',
     'ISortBy',
     'InnerScrollContainer',
-    'OuterScrollContainer',
+    'OuterScrollContainer'
   ]
 ouia: true
 ---
@@ -57,8 +57,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 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
 
@@ -73,6 +71,7 @@ Some general notes:
 ### Composable: Basic
 
 ```ts file="ComposableTableBasic.tsx"
+
 ```
 
 ### Composable: Custom row wrapper, header tooltips & popovers
@@ -84,6 +83,7 @@ Some general notes:
 To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop.
 
 ```ts file="ComposableTableMisc.tsx"
+
 ```
 
 ### Composable: Sortable & wrapping headers
@@ -105,6 +105,7 @@ type OnSort = (
 The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `Sortable - responsive` demo in the `React demos` tab.
 
 ```ts file="ComposableTableSortable.tsx"
+
 ```
 
 ### Composable: Sortable - custom control
@@ -112,6 +113,7 @@ The built in display for sorting is not fully responsive, as the column headers
 Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `Sortable - responsive` demo in the `React demos` tab.
 
 ```ts file="ComposableTableSortableCustom.tsx"
+
 ```
 
 ### Composable: Selectable with checkbox
@@ -142,6 +144,7 @@ type OnSelect = (
 checking checkboxes will check intermediate rows' checkboxes.
 
 ```ts file="ComposableTableSelectable.tsx"
+
 ```
 
 ### Composable: Selectable radio input
@@ -149,6 +152,7 @@ checking checkboxes will check intermediate rows' checkboxes.
 Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.
 
 ```ts file="ComposableTableSelectableRadio.tsx"
+
 ```
 
 ### Composable: Row click handler, hoverable & selected rows
@@ -156,6 +160,7 @@ Similarly to the selectable example above, the radio buttons use the first colum
 This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
 
 ```ts file="ComposableTableHoverable.tsx"
+
 ```
 
 ### Composable: Actions
@@ -167,6 +172,7 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row'
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended.
 
 ```ts file="ComposableTableActions.tsx"
+
 ```
 
 ### Composable: Actions Overflow
@@ -174,6 +180,7 @@ If actions menus are getting clipped by other items on the page, such as sticky
 Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
 
 ```ts file="ComposableTableActionsOverflow.tsx"
+
 ```
 
 ### Composable: Expandable
@@ -199,6 +206,7 @@ type OnCollapse = (
 Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.
 
 ```ts file="ComposableTableExpandable.tsx"
+
 ```
 
 ### Composable: Compound expandable
@@ -223,26 +231,31 @@ export type OnExpand = (
 ```
 
 ```ts file="ComposableTableCompoundExpandable.tsx"
+
 ```
 
 ### Composable: Cell width, breakpoint modifiers
 
 ```ts file="ComposableTableCellWidth.tsx"
+
 ```
 
 ### Composable: Controlling text
 
 ```ts file="ComposableTableControllingText.tsx"
+
 ```
 
 ### Composable: Modifiers with table text
 
 ```ts file="ComposableTableTextModifiers.tsx"
+
 ```
 
 ### Composable: Empty state
 
 ```ts file="ComposableTableEmptyState.tsx"
+
 ```
 
 ### Composable: Favoritable (implemented with sortable)
@@ -265,6 +278,7 @@ type OnFavorite = (
 To make a favoritable column sortable, pass a `ThSortType` object to the favoritable column's `Th` with `isFavorites` set to true.
 
 ```ts file="ComposableTableFavoritable.tsx"
+
 ```
 
 ### Composable: Tree table
@@ -298,6 +312,7 @@ aria-posinset, and aria-setsize as violations. This is an intentional choice at
 the voice over technologies will recognize the flat table structure as a tree.
 
 ```ts file="ComposableTableTree.tsx"
+
 ```
 
 ### Composable: Draggable row table
@@ -311,6 +326,7 @@ To make a row draggable:
 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop.
 
 ```ts isBeta file="ComposableTableDraggable.tsx"
+
 ```
 
 ## Sticky table modifiers
@@ -330,6 +346,7 @@ There are a few ways this can be handled:
 To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property.
 
 ```ts file="ComposableTableStickyColumn.tsx"
+
 ```
 
 ### Composable: Multiple sticky columns
@@ -337,6 +354,7 @@ To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and
 To make multiple columns sticky, wrap `TableComposable` with `InnerScrollContainer` and add `isStickyColumn` to all columns that should be sticky. The rightmost column should also have the `hasRightBorder` property, and each sticky column after the first must define a `stickyLeftOffset` property that equals the combined width of the previous sticky columns - set by `stickyMinWidth`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property.
 
 ```ts file="ComposableTableMultipleStickyColumns.tsx"
+
 ```
 
 ### Composable: Sticky columns and header
@@ -344,6 +362,7 @@ To make multiple columns sticky, wrap `TableComposable` with `InnerScrollContain
 To maintain proper sticky behavior across sticky columns and header, `TableComposable` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.
 
 ```ts file="ComposableTableStickyColumnsAndHeader.tsx"
+
 ```
 
 ## Nested column headers
@@ -362,21 +381,25 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 ### Composable: Nested column headers
 
 ```ts file="ComposableTableNestedHeaders.tsx"
+
 ```
 
 ### Composable: Nested column headers and expandable rows
 
 ```ts file="ComposableTableNestedExpandable.tsx"
+
 ```
 
 ### Composable: Expandable with nested table
 
 ```ts file="ComposableTableNestedTableExpandable.tsx"
+
 ```
 
 ### Composable: Nested sticky header
 
 ```ts file="ComposableTableNestedStickyHeader.tsx"
+
 ```
 
 ## Striped
@@ -386,6 +409,7 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 To apply striping to a basic table, add the `isStriped` property to `TableComposable`.
 
 ```ts file="ComposableTableStriped.tsx"
+
 ```
 
 ### Composable: Striped expandable
@@ -393,6 +417,7 @@ To apply striping to a basic table, add the `isStriped` property to `TableCompos
 To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `TableComposable`.
 
 ```ts file="ComposableTableStripedExpandable.tsx"
+
 ```
 
 ### Composable: Striped multiple tobdy
@@ -400,6 +425,7 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable`
 When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively.
 
 ```ts file="ComposableTableStripedMultipleTbody.tsx"
+
 ```
 
 ### Composable: Striped tr
@@ -407,4 +433,5 @@ When there are multiple `Tbody` components within a table, a more granular appli
 To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `TableComposable`.
 
 ```ts file="ComposableTableStripedTr.tsx"
+
 ```
diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx b/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx
index c3298d18b5b..83b11678e06 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,
-  MenuToggle
+  MenuToggle,
+  Dropdown,
+  DropdownList
 } 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 {
@@ -92,7 +93,7 @@ export const ComposableTableActions: React.FunctionComponent = () => {
                     </OverflowMenuGroup>
                   </OverflowMenuContent>
                   <OverflowMenuControl>
-                    <DropdownNext
+                    <Dropdown
                       onSelect={() =>
                         setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                       }
@@ -115,7 +116,7 @@ export const ComposableTableActions: React.FunctionComponent = () => {
                       }
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
-                    </DropdownNext>
+                    </Dropdown>
                   </OverflowMenuControl>
                 </OverflowMenu>
               </Td>
diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 9aa294e1fb6..3d2123c0f3e 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -24,6 +24,14 @@ PageSectionVariants,
 TextContent,
 Text,
 Divider } from '@patternfly/react-core';
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+DropdownToggle,
+DropdownToggleCheckbox,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -47,6 +55,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { rows, columns } from '../examples/Data.jsx';
 
 ## Demos
@@ -56,11 +65,6 @@ import { rows, columns } from '../examples/Data.jsx';
 ```js isFullscreen
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownToggle,
-  DropdownToggleCheckbox,
   PageSection,
   Pagination,
   Title,
@@ -69,6 +73,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownToggle,
+  DropdownToggleCheckbox
+} from '@patternfly/react-core/deprecated';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -207,19 +218,19 @@ class BulkSelectTableDemo extends React.Component {
     const isChecked = allSelected ? true : someChecked;
 
     const items = [
-      <DropdownItem key="item-1" onClick={() => this.handleSelectClick('none')}>
+      <DropdownItemDeprecated key="item-1" onClick={() => this.handleSelectClick('none')}>
         Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={() => this.handleSelectClick('page')}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-2" onClick={() => this.handleSelectClick('page')}>
         Select page ({this.state.perPage} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={() => this.handleSelectClick('all')}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-3" onClick={() => this.handleSelectClick('all')}>
         Select all (100 items)
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
-      <Dropdown
+      <DropdownDeprecated
         onSelect={this.onDropDownSelect}
         position={DropdownPosition.left}
         toggle={
@@ -1757,11 +1768,7 @@ class LoadingStateDemo extends React.Component {
             title: (
               <Bullseye>
                 <EmptyState>
-                  <EmptyStateHeader
-                    titleText="Loading"
-                    headingLevel="h2"
-                    icon={<EmptyStateIcon icon={Spinner} />}
-                  />
+                  <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
                 </EmptyState>
               </Bullseye>
             )
diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
index d5c2fd8912c..551f0e23533 100644
--- a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
@@ -2,8 +2,11 @@ import React from 'react';
 import {
   Button,
   Card,
+  Dropdown,
+  DropdownList,
   Flex,
   FlexItem,
+  MenuToggle,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -11,8 +14,6 @@ import {
   Pagination,
   Text,
   TextContent,
-  Dropdown,
-  KebabToggle,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
@@ -30,6 +31,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ComposableTableSortable = () => {
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
@@ -86,7 +88,7 @@ export const ComposableTableSortable = () => {
     setPerPage(newPerPage);
   };
 
-  renderPagination = variant => (
+  renderPagination = (variant) => (
     <Pagination
       isCompact
       itemCount={rows.length}
@@ -107,7 +109,7 @@ export const ComposableTableSortable = () => {
     />
   );
 
-  const renderLabel = labelText => {
+  const renderLabel = (labelText) => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
@@ -187,14 +189,23 @@ export const ComposableTableSortable = () => {
           </OverflowMenuContent>
           <OverflowMenuControl hasAdditionalOptions>
             <Dropdown
-              isPlain
               onSelect={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
-              toggle={<KebabToggle onToggle={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)} />}
+              onOpenChange={(isKebabDropdownOpen) => setIsKebabDropdownOpen(isKebabDropdownOpen)}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="overflow menu"
+                  variant="plain"
+                  onClick={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
+                  isExpanded={false}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-              isFlipEnabled
-              menuAppendTo="parent"
-            />
+            >
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </OverflowMenuControl>
         </OverflowMenu>
         <ToolbarGroup variant="icon-button-group">