diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
index d988a5bd4811eb..1328ea14e985a7 100644
--- a/packages/components/src/dropdown-menu-v2/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -6,7 +6,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
/**
* WordPress dependencies
*/
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, createContext, useContext } from '@wordpress/element';
import { isRTL } from '@wordpress/i18n';
import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
import { SVG, Circle } from '@wordpress/primitives';
@@ -35,6 +35,12 @@ const SUB_MENU_OFFSET_SIDE = 12;
// Opposite amount of the top padding of the menu item
const SUB_MENU_OFFSET_ALIGN = -8;
+const DropdownMenuPrivateContext = createContext< {
+ portalContainer: HTMLElement | null;
+} >( {
+ portalContainer: null,
+} );
+
/**
* `DropdownMenu` displays a menu to the user (such as a set of actions
* or functions) triggered by a button.
@@ -77,7 +83,11 @@ export const DropdownMenu = ( {
alignOffset={ alignOffset }
loop={ true }
>
- { children }
+
+ { children }
+
@@ -123,6 +133,8 @@ export const DropdownSubMenu = ( {
children,
trigger,
}: DropdownSubMenuProps ) => {
+ const { portalContainer } = useContext( DropdownMenuPrivateContext );
+
return (
{ trigger }
-
+