diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
index ab373867..ee3014a0 100755
--- a/packages/demo-app-ts/src/App.tsx
+++ b/packages/demo-app-ts/src/App.tsx
@@ -10,25 +10,24 @@ import {
   Avatar,
   Brand,
   Radio,
-  Masthead,
-  MastheadMain,
-  MastheadToggle,
-  MastheadBrand,
   NavExpandable,
   PageSidebarBody,
-  MastheadContent,
-  PageToggleButton,
   Toolbar,
-  ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  Masthead,
+  MastheadToggle,
+  PageToggleButton,
+  MastheadContent,
+  MastheadBrand,
+  MastheadMain,
+  ToolbarContent
 } from '@patternfly/react-core';
+import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgBrand from './assets/images/imgBrand.svg';
 import imgAvatar from './assets/images/imgAvatar.svg';
 import Demos from './Demos';
 import './App.css';
-import { BarsIcon } from '@patternfly/react-icons';
-
 interface AppState {
   activeItem: number | string;
   isNavOpen: boolean;
@@ -153,13 +152,18 @@ class App extends React.Component<{}, AppState> {
     const AppHeader = (
       <Masthead>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isNavOpen}
+            onSidebarToggle={() => this.setState({ isNavOpen: !isNavOpen })}
+          >
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadMain>
-          <MastheadBrand>
-            <Brand src={imgBrand} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadBrand component="a">
+            <Brand src={imgBrand} alt="Patternfly Logo" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{AppToolbar}</MastheadContent>
diff --git a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
index 503d0108..6b4d3625 100644
--- a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
+++ b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
@@ -22,7 +22,7 @@ import CustomPathNode from './CustomPathNode';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   if (label.includes('->')) {
     const parent = label.slice(0, label.indexOf('->'));
diff --git a/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx b/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx
index 7d029799..a33ef892 100644
--- a/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx
+++ b/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx
@@ -25,7 +25,7 @@ export const GROUPED_EDGE_TYPE = 'GROUPED_EDGE';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   return (
     // eslint-disable-next-line no-alert
diff --git a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx
index 084d0b90..abc1ef7d 100644
--- a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx
+++ b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx
@@ -41,7 +41,7 @@ interface EdgeProps {
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   return (
     // eslint-disable-next-line no-alert
diff --git a/packages/demo-app-ts/src/demos/ContextMenus.tsx b/packages/demo-app-ts/src/demos/ContextMenus.tsx
index 6c55ff05..ec9c58f5 100644
--- a/packages/demo-app-ts/src/demos/ContextMenus.tsx
+++ b/packages/demo-app-ts/src/demos/ContextMenus.tsx
@@ -20,7 +20,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   return (
     // eslint-disable-next-line no-alert
diff --git a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx
index 7b3f36ce..851761e9 100644
--- a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx
+++ b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx
@@ -1,31 +1,24 @@
 import React from 'react';
 import * as _ from 'lodash';
 import {
-	Button,
-	Flex,
-	Split,
-	SplitItem,
-	TextInput,
-	ToolbarItem,
-	Tooltip
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Split,
+  SplitItem,
+  TextInput,
+  ToolbarItem,
+  Tooltip
 } from '@patternfly/react-core';
-import {
-	Dropdown as DropdownDeprecated,
-	DropdownItem as DropdownItemDeprecated,
-	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated,
-	Select,
-	SelectOption,
-	SelectVariant
-} from '@patternfly/react-core/deprecated';
 import { DefaultEdgeOptions, DefaultNodeOptions, GeneratorEdgeOptions, GeneratorNodeOptions } from '../data/generator';
-import {
-  EDGE_ANIMATION_SPEEDS,
-  EDGE_STYLES,
-  EDGE_TERMINAL_TYPES,
-  NODE_SHAPES,
-  NODE_STATUSES
-} from './styleUtils';
+import { EDGE_ANIMATION_SPEEDS, EDGE_STYLES, EDGE_TERMINAL_TYPES, NODE_SHAPES, NODE_STATUSES } from './styleUtils';
 import { Controller, Model, NodeShape } from '@patternfly/react-topology';
 
 const GRAPH_LAYOUT_OPTIONS = ['x', 'y', 'visible', 'style', 'layout', 'scale', 'scaleExtent', 'layers'];
@@ -74,115 +67,156 @@ export const useTopologyOptions = (
         <label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout</label>
       </SplitItem>
       <SplitItem>
-        <DropdownDeprecated
-          position={DropdownPositionDeprecated.right}
-          toggle={<DropdownToggleDeprecated onToggle={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>{layout}</DropdownToggleDeprecated>}
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
+              {layout}
+            </MenuToggle>
+          )}
           isOpen={layoutDropdownOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated key={1} onClick={() => updateLayout('Force')}>
+          onOpenChange={(isOpen) => setLayoutDropdownOpen(isOpen)}
+        >
+          <DropdownList>
+            <DropdownItem key={1} onClick={() => updateLayout('Force')}>
               Force
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={2} onClick={() => updateLayout('Dagre')}>
+            </DropdownItem>
+            <DropdownItem key={2} onClick={() => updateLayout('Dagre')}>
               Dagre
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={3} onClick={() => updateLayout('Cola')}>
+            </DropdownItem>
+            <DropdownItem key={3} onClick={() => updateLayout('Cola')}>
               Cola
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={8} onClick={() => updateLayout('ColaGroups')}>
+            </DropdownItem>
+            <DropdownItem key={8} onClick={() => updateLayout('ColaGroups')}>
               ColaGroups
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={4} onClick={() => updateLayout('ColaNoForce')}>
+            </DropdownItem>
+            <DropdownItem key={4} onClick={() => updateLayout('ColaNoForce')}>
               ColaNoForce
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={5} onClick={() => updateLayout('Grid')}>
+            </DropdownItem>
+            <DropdownItem key={5} onClick={() => updateLayout('Grid')}>
               Grid
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={6} onClick={() => updateLayout('Concentric')}>
+            </DropdownItem>
+            <DropdownItem key={6} onClick={() => updateLayout('Concentric')}>
               Concentric
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={7} onClick={() => updateLayout('BreadthFirst')}>
+            </DropdownItem>
+            <DropdownItem key={7} onClick={() => updateLayout('BreadthFirst')}>
               BreadthFirst
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </SplitItem>
     </Split>
   );
 
   const renderNodeOptionsDropdown = () => {
     const selectContent = (
-      <div>
+      <SelectList>
         <SelectOption
+          hasCheckbox
           value="Labels"
-          isChecked={nodeOptions.nodeLabels}
-          onClick={() => setNodeOptions(prev => ({ ...prev, nodeLabels: !prev.nodeLabels }))}
-        />
+          isSelected={nodeOptions.nodeLabels}
+          onClick={() => setNodeOptions((prev) => ({ ...prev, nodeLabels: !prev.nodeLabels }))}
+        >
+          Labels
+        </SelectOption>
         <SelectOption
+          hasCheckbox
           value="Secondary Labels"
-          isChecked={nodeOptions.nodeSecondaryLabels}
-          onClick={() => setNodeOptions(prev => ({ ...prev, nodeSecondaryLabels: !prev.nodeSecondaryLabels }))}
-        />
+          isSelected={nodeOptions.nodeSecondaryLabels}
+          onClick={() => setNodeOptions((prev) => ({ ...prev, nodeSecondaryLabels: !prev.nodeSecondaryLabels }))}
+        >
+          Secondary Labels
+        </SelectOption>
         <SelectOption
+          hasCheckbox
           value="Status"
-          isChecked={nodeOptions.statuses.length > 1}
+          isSelected={nodeOptions.statuses.length > 1}
           onClick={() =>
-            setNodeOptions(prev => ({
+            setNodeOptions((prev) => ({
               ...prev,
               statuses: prev.statuses.length > 1 ? DefaultNodeOptions.statuses : NODE_STATUSES
             }))
           }
-        />
+        >
+          Status
+        </SelectOption>
         <SelectOption
+          hasCheckbox
           value="Decorators"
-          isChecked={nodeOptions.statusDecorators}
+          isSelected={nodeOptions.statusDecorators}
           onClick={() =>
-            setNodeOptions(prev => ({
+            setNodeOptions((prev) => ({
               ...prev,
               statusDecorators: !prev.statusDecorators,
               showDecorators: !prev.showDecorators
             }))
           }
-        />
+        >
+          Decorators
+        </SelectOption>
         <SelectOption
+          hasCheckbox
           value="Badges"
-          isChecked={nodeOptions.nodeBadges}
-          onClick={() => setNodeOptions(prev => ({ ...prev, nodeBadges: !prev.nodeBadges }))}
-        />
+          isSelected={nodeOptions.nodeBadges}
+          onClick={() => setNodeOptions((prev) => ({ ...prev, nodeBadges: !prev.nodeBadges }))}
+        >
+          Badges
+        </SelectOption>
         <SelectOption
+          hasCheckbox
           value="Icons"
-          isChecked={nodeOptions.nodeIcons}
-          onClick={() => setNodeOptions(prev => ({ ...prev, nodeIcons: !prev.nodeIcons }))}
-        />
+          isSelected={nodeOptions.nodeIcons}
+          onClick={() => setNodeOptions((prev) => ({ ...prev, nodeIcons: !prev.nodeIcons }))}
+        >
+          Icons
+        </SelectOption>
         <SelectOption
+          hasCheckbox
           value="Context Menus"
-          isChecked={nodeOptions.contextMenus}
-          onClick={() => setNodeOptions(prev => ({ ...prev, contextMenus: !prev.contextMenus }))}
-        />
-      </div>
+          isSelected={nodeOptions.contextMenus}
+          onClick={() => setNodeOptions((prev) => ({ ...prev, contextMenus: !prev.contextMenus }))}
+        >
+          Context Menus
+        </SelectOption>
+      </SelectList>
+    );
+
+    const nodeOptionsToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle
+        ref={toggleRef}
+        onClick={() => setNodeOptionsOpen((prev) => !prev)}
+        isExpanded={nodeOptionsOpen}
+        style={
+          {
+            width: '250px'
+          } as React.CSSProperties
+        }
+      >
+        Node options
+      </MenuToggle>
     );
 
     return (
       <Select
-        variant={SelectVariant.checkbox}
-        customContent={selectContent}
-        onToggle={() => setNodeOptionsOpen(prev => !prev)}
+        onOpenChange={(isOpen) => setNodeOptionsOpen(isOpen)}
         onSelect={() => {}}
-        isCheckboxSelectionBadgeHidden
         isOpen={nodeOptionsOpen}
-        placeholderText="Node options"
-      />
+        placeholder="Node options"
+        toggle={nodeOptionsToggle}
+      >
+        {selectContent}
+      </Select>
     );
   };
 
   const toggleNodeShape = (shape: NodeShape): void => {
     const index = nodeOptions.shapes.indexOf(shape);
     if (index >= 0) {
-      setNodeOptions(prev => ({
+      setNodeOptions((prev) => ({
         ...prev,
         shapes: [...prev.shapes.slice(0, index), ...prev.shapes.slice(index + 1)]
       }));
     } else {
-      setNodeOptions(prev => ({
+      setNodeOptions((prev) => ({
         ...prev,
         shapes: [...prev.shapes, shape]
       }));
@@ -191,92 +225,137 @@ export const useTopologyOptions = (
 
   const renderNodeShapesDropdown = () => {
     const selectContent = (
-      <div>
-        {NODE_SHAPES.map(shape => (
+      <SelectList>
+        {NODE_SHAPES.map((shape) => (
           <SelectOption
             key={shape}
             value={shape}
-            isChecked={nodeOptions.shapes.includes(shape)}
+            hasCheckbox
+            isSelected={nodeOptions.shapes.includes(shape)}
             onClick={() => toggleNodeShape(shape)}
-          />
+          >
+            {shape}
+          </SelectOption>
         ))}
-      </div>
+      </SelectList>
+    );
+
+    const nodeShapesToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle
+        ref={toggleRef}
+        onClick={() => setNodeShapesOpen((prev) => !prev)}
+        isExpanded={nodeShapesOpen}
+        style={
+          {
+            width: '250px'
+          } as React.CSSProperties
+        }
+      >
+        Node shapes
+      </MenuToggle>
     );
 
     return (
       <Select
-        variant={SelectVariant.checkbox}
-        customContent={selectContent}
-        onToggle={() => setNodeShapesOpen(prev => !prev)}
+        onOpenChange={(isOpen) => setNodeShapesOpen(isOpen)}
         onSelect={() => {}}
-        isCheckboxSelectionBadgeHidden
         isOpen={nodeShapesOpen}
-        placeholderText="Node shapes"
-      />
+        toggle={nodeShapesToggle}
+      >
+        {selectContent}
+      </Select>
     );
   };
 
   const renderEdgeOptionsDropdown = () => {
     const selectContent = (
-      <div>
+      <SelectList>
         <SelectOption
           value="Status"
-          isChecked={edgeOptions.edgeStatuses.length > 1}
+          hasCheckbox
+          isSelected={edgeOptions.edgeStatuses.length > 1}
           onClick={() =>
-            setEdgeOptions(prev => ({
+            setEdgeOptions((prev) => ({
               ...prev,
               edgeStatuses: prev.edgeStatuses.length > 1 ? DefaultEdgeOptions.edgeStatuses : NODE_STATUSES
             }))
           }
-        />
+        >
+          Status
+        </SelectOption>
         <SelectOption
           value="Styles"
-          isChecked={edgeOptions.edgeStyles.length > 1}
+          hasCheckbox
+          isSelected={edgeOptions.edgeStyles.length > 1}
           onClick={() =>
-            setEdgeOptions(prev => ({
+            setEdgeOptions((prev) => ({
               ...prev,
               edgeStyles: prev.edgeStyles.length > 1 ? DefaultEdgeOptions.edgeStyles : EDGE_STYLES
             }))
           }
-        />
+        >
+          Styles
+        </SelectOption>
         <SelectOption
           value="Animations"
-          isChecked={edgeOptions.edgeAnimations.length > 1}
+          hasCheckbox
+          isSelected={edgeOptions.edgeAnimations.length > 1}
           onClick={() =>
-            setEdgeOptions(prev => ({
+            setEdgeOptions((prev) => ({
               ...prev,
               edgeAnimations: prev.edgeAnimations.length > 1 ? DefaultEdgeOptions.edgeAnimations : EDGE_ANIMATION_SPEEDS
             }))
           }
-        />
+        >
+          Animations
+        </SelectOption>
         <SelectOption
           value="Terminal types"
-          isChecked={edgeOptions.terminalTypes.length > 1}
+          hasCheckbox
+          isSelected={edgeOptions.terminalTypes.length > 1}
           onClick={() =>
-            setEdgeOptions(prev => ({
+            setEdgeOptions((prev) => ({
               ...prev,
               terminalTypes: prev.terminalTypes.length > 1 ? DefaultEdgeOptions.terminalTypes : EDGE_TERMINAL_TYPES
             }))
           }
-        />
+        >
+          Terminal type
+        </SelectOption>
         <SelectOption
           value="Tags"
-          isChecked={edgeOptions.edgeTags}
-          onClick={() => setEdgeOptions(prev => ({ ...prev, edgeTags: !prev.edgeTags }))}
-        />
-      </div>
+          hasCheckbox
+          isSelected={edgeOptions.edgeTags}
+          onClick={() => setEdgeOptions((prev) => ({ ...prev, edgeTags: !prev.edgeTags }))}
+        >
+          Tags
+        </SelectOption>
+      </SelectList>
+    );
+    const edgeOptionsToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle
+        ref={toggleRef}
+        onClick={() => setEdgeOptionsOpen((prev) => !prev)}
+        isExpanded={edgeOptionsOpen}
+        style={
+          {
+            width: '250px'
+          } as React.CSSProperties
+        }
+      >
+        Edge options
+      </MenuToggle>
     );
 
     return (
       <Select
-        variant={SelectVariant.checkbox}
-        customContent={selectContent}
-        onToggle={() => setEdgeOptionsOpen(prev => !prev)}
+        onOpenChange={(isOpen) => setEdgeOptionsOpen(isOpen)}
         onSelect={() => {}}
-        isCheckboxSelectionBadgeHidden
         isOpen={edgeOptionsOpen}
-        placeholderText="Edge options"
-      />
+        toggle={edgeOptionsToggle}
+      >
+        {selectContent}
+      </Select>
     );
   };
 
@@ -295,8 +374,8 @@ export const useTopologyOptions = (
         ...currentModel.graph,
         ..._.pick(savedModel.graph, GRAPH_LAYOUT_OPTIONS)
       };
-      currentModel.nodes = currentModel.nodes.map(n => {
-        const savedNode = savedModel.nodes.find(sn => sn.id === n.id);
+      currentModel.nodes = currentModel.nodes.map((n) => {
+        const savedNode = savedModel.nodes.find((sn) => sn.id === n.id);
         if (!savedNode) {
           return n;
         }
@@ -341,28 +420,36 @@ export const useTopologyOptions = (
             aria-label="nodes"
             type="number"
             value={numNodes || ''}
-            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null))}
+            onChange={(_event, val: string) =>
+              val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
+            }
           />
           <span>Edges:</span>
           <TextInput
             aria-label="edges"
             type="number"
             value={numEdges === null ? '' : numEdges}
-            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null))}
+            onChange={(_event, val: string) =>
+              val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
+            }
           />
           <span>Groups:</span>
           <TextInput
             aria-label="groups"
             type="number"
             value={numGroups === null ? '' : numGroups}
-            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null))}
+            onChange={(_event, val: string) =>
+              val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
+            }
           />
           <span>Nesting Depth:</span>
           <TextInput
             aria-label="nesting depth"
             type="number"
             value={nestedLevel === null ? '' : nestedLevel}
-            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null))}
+            onChange={(_event, val: string) =>
+              val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
+            }
           />
           <Button
             variant="link"
diff --git a/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
index be6c8bc9..b1326066 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyContextMenuDemo.tsx
@@ -56,7 +56,7 @@ const customLayoutFactory: LayoutFactory = (type: string, graph: Graph): Layout
 const customComponentFactory: ComponentFactory = (kind: ModelKind, type: string) => {
   const contextMenuItem = (label: string, i: number): React.ReactElement => {
     if (label === '-') {
-      return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+      return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
     }
     return (
       // eslint-disable-next-line no-alert
diff --git a/packages/module/src/components/contextmenu/ContextMenu.tsx b/packages/module/src/components/contextmenu/ContextMenu.tsx
index 17a83e32..e4d59e1a 100644
--- a/packages/module/src/components/contextmenu/ContextMenu.tsx
+++ b/packages/module/src/components/contextmenu/ContextMenu.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-	DropdownMenu as DropdownMenuDeprecated,
-	DropdownContext as DropdownContextDeprecated
-} from '@patternfly/react-core/deprecated';
+import { Dropdown } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import topologyStyles from '../../css/topology-components';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
@@ -31,30 +28,15 @@ const ContextMenu: React.FunctionComponent<ContextMenuProps> = ({
 
   return (
     <Popper {...other} closeOnEsc closeOnOutsideClick open={isOpen} onRequestClose={handleOnRequestClose}>
-      <DropdownContextDeprecated.Provider
-        value={{
-          onSelect: handleOnRequestClose,
-          toggleTextClass: styles.dropdownToggleText,
-          toggleIconClass: 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
-          // hoverClass: styles.modifiers.hover,
-          // separatorClass: styles.dropdownSeparator,
-        }}
-      >
-        <div className={css(styles.dropdown, styles.modifiers.expanded)}>
-          <DropdownMenuDeprecated className={css(topologyStyles.topologyContextMenuCDropdownMenu)} autoFocus>
-            {children}
-          </DropdownMenuDeprecated>
-        </div>
-      </DropdownContextDeprecated.Provider>
+      <div className={css(styles.dropdown, styles.modifiers.expanded)}>
+        <Dropdown
+          onSelect={handleOnRequestClose}
+          toggle={() => <></>}
+          className={css(topologyStyles.topologyContextMenuCDropdownMenu)}
+        >
+          {children}
+        </Dropdown>
+      </div>
     </Popper>
   );
 };
diff --git a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
index 2f5736ba..d6c97544 100644
--- a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
+++ b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-	DropdownMenu as DropdownMenuDeprecated,
-	DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownItem } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import topologyStyles from '../../css/topology-components';
 // FIXME fully qualified due to the effect of long build times on storybook
@@ -22,42 +19,37 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
 
   return (
     <>
-      <DropdownItemDeprecated
+      <DropdownItem
         {...other}
         className={css(topologyStyles.topologyContextSubMenu)}
-        component={
-          <button
-            ref={nodeRef}
-            type="button"
-            // prevent this DropdownItem from executing like a normal action item
-            onClick={e => e.stopPropagation()}
-            // mouse enter will open the sub menu
-            onMouseEnter={() => setOpen(true)}
-            onMouseLeave={e => {
-              // if the mouse leaves this item, close the sub menu only if the mouse did not enter the sub menu itself
-              if (!subMenuRef.current || !subMenuRef.current.contains(e.relatedTarget as Node)) {
-                setOpen(false);
-              }
-            }}
-            onKeyDown={e => {
-              // open the sub menu on enter or right arrow
-              if (e.key === 'ArrowRight' || e.key === 'Enter') {
-                setOpen(true);
-                e.stopPropagation();
-              }
-            }}
-          >
-            {label}
-            <AngleRightIcon className={css(topologyStyles.topologyContextSubMenuArrow)} />
-          </button>
-        }
-      />
+        ref={nodeRef}
+        // prevent this DropdownItem from executing like a normal action item
+        onClick={(e) => e.stopPropagation()}
+        // mouse enter will open the sub menu
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={(e) => {
+          // if the mouse leaves this item, close the sub menu only if the mouse did not enter the sub menu itself
+          if (!subMenuRef.current || !subMenuRef.current.contains(e.relatedTarget as Node)) {
+            setOpen(false);
+          }
+        }}
+        onKeyDown={(e) => {
+          // open the sub menu on enter or right arrow
+          if (e.key === 'ArrowRight' || e.key === 'Enter') {
+            setOpen(true);
+            e.stopPropagation();
+          }
+        }}
+      >
+        {label}
+        <AngleRightIcon className={css(topologyStyles.topologyContextSubMenuArrow)} />
+      </DropdownItem>
       <Popper
         open={open}
         placement="right-start"
         closeOnEsc
         closeOnOutsideClick
-        onRequestClose={e => {
+        onRequestClose={(e) => {
           // only close the sub menu if clicking anywhere outside the menu item that owns the sub menu
           if (!e || !nodeRef.current || !nodeRef.current.contains(e.target as Node)) {
             setOpen(false);
@@ -72,13 +64,13 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
           ref={subMenuRef}
           role="presentation"
           className="pf-v5-c-dropdown pf-m-expanded"
-          onMouseLeave={e => {
+          onMouseLeave={(e) => {
             // only close the sub menu if the mouse does not enter the item
             if (!nodeRef.current || !nodeRef.current.contains(e.relatedTarget as Node)) {
               setOpen(false);
             }
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             // close the sub menu on left arrow
             if (e.key === 'ArrowLeft') {
               setOpen(false);
@@ -86,9 +78,9 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
             }
           }}
         >
-          <DropdownMenuDeprecated className={css(topologyStyles.topologyContextMenuCDropdownMenu)} autoFocus>
+          <Dropdown toggle={() => <></>} className={css(topologyStyles.topologyContextMenuCDropdownMenu)}>
             {children}
-          </DropdownMenuDeprecated>
+          </Dropdown>
         </div>
       </Popper>
     </>
diff --git a/packages/module/src/components/contextmenu/index.ts b/packages/module/src/components/contextmenu/index.ts
index 9b863a60..5489acdf 100644
--- a/packages/module/src/components/contextmenu/index.ts
+++ b/packages/module/src/components/contextmenu/index.ts
@@ -2,4 +2,4 @@ export { default as ContextMenu } from './ContextMenu';
 export { default as ContextSubMenuItem } from './ContextSubMenuItem';
 
 // re-export dropdown components as context menu components
-export { DropdownItem as ContextMenuItem, DropdownSeparator as ContextMenuSeparator } from '@patternfly/react-core/deprecated';
+export { DropdownItem as ContextMenuItem, Divider as ContextMenuSeparator } from '@patternfly/react-core';