diff --git a/packages/components/src/dropdown-menu-v2/checkbox-item.tsx b/packages/components/src/dropdown-menu-v2/checkbox-item.tsx
index bcbc920cbb7205..476c63437902b8 100644
--- a/packages/components/src/dropdown-menu-v2/checkbox-item.tsx
+++ b/packages/components/src/dropdown-menu-v2/checkbox-item.tsx
@@ -29,6 +29,12 @@ export const DropdownMenuCheckboxItem = forwardRef<
 	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const dropdownMenuContext = useContext( DropdownMenuContext );
 
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.CheckboxItem can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuCheckboxItem
 			ref={ ref }
diff --git a/packages/components/src/dropdown-menu-v2/group-label.tsx b/packages/components/src/dropdown-menu-v2/group-label.tsx
index 7d838ef9fa620a..07ae58037f7db7 100644
--- a/packages/components/src/dropdown-menu-v2/group-label.tsx
+++ b/packages/components/src/dropdown-menu-v2/group-label.tsx
@@ -17,6 +17,13 @@ export const DropdownMenuGroupLabel = forwardRef<
 	WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false >
 >( function DropdownMenuGroup( props, ref ) {
 	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.GroupLabel can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuGroupLabel
 			ref={ ref }
diff --git a/packages/components/src/dropdown-menu-v2/group.tsx b/packages/components/src/dropdown-menu-v2/group.tsx
index f2bf79015bc691..820b99b54b47c5 100644
--- a/packages/components/src/dropdown-menu-v2/group.tsx
+++ b/packages/components/src/dropdown-menu-v2/group.tsx
@@ -16,6 +16,13 @@ export const DropdownMenuGroup = forwardRef<
 	WordPressComponentProps< DropdownMenuGroupProps, 'div', false >
 >( function DropdownMenuGroup( props, ref ) {
 	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.Group can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuGroup
 			ref={ ref }
diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
index 50c4f3069d51b5..0b991494dfb14c 100644
--- a/packages/components/src/dropdown-menu-v2/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -2,31 +2,21 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useMemo,
-	cloneElement,
-	isValidElement,
-	useCallback,
-} from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-import { chevronRightSmall } from '@wordpress/icons';
+import { useContext, useMemo } from '@wordpress/element';
+import { isRTL as isRTLFn } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../context';
-import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnectWithoutRef } from '../context';
 import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
 } from './types';
-import * as Styled from './styles';
 import { DropdownMenuContext } from './context';
 import { DropdownMenuItem } from './item';
 import { DropdownMenuCheckboxItem } from './checkbox-item';
@@ -36,48 +26,37 @@ import { DropdownMenuGroupLabel } from './group-label';
 import { DropdownMenuSeparator } from './separator';
 import { DropdownMenuItemLabel } from './item-label';
 import { DropdownMenuItemHelpText } from './item-help-text';
+import { DropdownMenuTriggerButton } from './trigger-button';
+import { DropdownMenuSubmenuTriggerItem } from './submenu-trigger-item';
+import { DropdownMenuPopover } from './menu-popover';
 
-const UnconnectedDropdownMenu = (
-	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
-	ref: React.ForwardedRef< HTMLDivElement >
-) => {
+const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
 	const {
-		// Store props
 		open,
 		defaultOpen = false,
 		onOpenChange,
 		placement,
-
-		// Menu trigger props
-		trigger,
-
-		// Menu props
-		gutter,
 		children,
-		shift,
-		modal = true,
 
 		// From internal components context
 		variant,
-
-		// Rest
-		...otherProps
 	} = useContextSystem<
+		// @ts-expect-error TODO: missing 'className'
 		typeof props & Pick< DropdownMenuContextType, 'variant' >
 	>( props, 'DropdownMenu' );
 
 	const parentContext = useContext( DropdownMenuContext );
 
-	const computedDirection = isRTL() ? 'rtl' : 'ltr';
+	const rtl = isRTLFn();
 
 	// If an explicit value for the `placement` prop is not passed,
 	// apply a default placement of `bottom-start` for the root dropdown,
 	// and of `right-start` for nested dropdowns.
 	let computedPlacement =
-		props.placement ??
-		( parentContext?.store ? 'right-start' : 'bottom-start' );
+		placement ?? ( parentContext?.store ? 'right-start' : 'bottom-start' );
+
 	// Swap left/right in case of RTL direction
-	if ( computedDirection === 'rtl' ) {
+	if ( rtl ) {
 		if ( /right/.test( computedPlacement ) ) {
 			computedPlacement = computedPlacement.replace(
 				'right',
@@ -100,7 +79,7 @@ const UnconnectedDropdownMenu = (
 		setOpen( willBeOpen ) {
 			onOpenChange?.( willBeOpen );
 		},
-		rtl: computedDirection === 'rtl',
+		rtl,
 	} );
 
 	const contextValue = useMemo(
@@ -108,112 +87,28 @@ const UnconnectedDropdownMenu = (
 		[ dropdownMenuStore, variant ]
 	);
 
-	// Extract the side from the applied placement — useful for animations.
-	// Using `currentPlacement` instead of `placement` to make sure that we
-	// use the final computed placement (including "flips" etc).
-	const appliedPlacementSide = useStoreState(
-		dropdownMenuStore,
-		'currentPlacement'
-	).split( '-' )[ 0 ];
-
-	if (
-		dropdownMenuStore.parent &&
-		! ( isValidElement( trigger ) && DropdownMenuItem === trigger.type )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			'For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.'
-		);
-	}
-
-	const hideOnEscape = useCallback(
-		( event: React.KeyboardEvent< Element > ) => {
-			// Pressing Escape can cause unexpected consequences (ie. exiting
-			// full screen mode on MacOs, close parent modals...).
-			event.preventDefault();
-			// Returning `true` causes the menu to hide.
-			return true;
-		},
-		[]
-	);
-
-	const wrapperProps = useMemo(
-		() => ( {
-			dir: computedDirection,
-			style: {
-				direction:
-					computedDirection as React.CSSProperties[ 'direction' ],
-			},
-		} ),
-		[ computedDirection ]
-	);
-
 	return (
-		<>
-			{ /* Menu trigger */ }
-			<Ariakit.MenuButton
-				ref={ ref }
-				store={ dropdownMenuStore }
-				render={
-					dropdownMenuStore.parent
-						? cloneElement( trigger, {
-								// Add submenu arrow, unless a `suffix` is explicitly specified
-								suffix: (
-									<>
-										{ trigger.props.suffix }
-										<Styled.SubmenuChevronIcon
-											aria-hidden="true"
-											icon={ chevronRightSmall }
-											size={ 24 }
-											preserveAspectRatio="xMidYMid slice"
-										/>
-									</>
-								),
-						  } )
-						: trigger
-				}
-			/>
-
-			{ /* Menu popover */ }
-			<Ariakit.Menu
-				{ ...otherProps }
-				modal={ modal }
-				store={ dropdownMenuStore }
-				// Root menu has an 8px distance from its trigger,
-				// otherwise 0 (which causes the submenu to slightly overlap)
-				gutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }
-				// Align nested menu by the same (but opposite) amount
-				// as the menu container's padding.
-				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
-				hideOnHoverOutside={ false }
-				data-side={ appliedPlacementSide }
-				wrapperProps={ wrapperProps }
-				hideOnEscape={ hideOnEscape }
-				unmountOnHide
-				render={ ( renderProps ) => (
-					// Two wrappers are needed for the entry animation, where the menu
-					// container scales with a different factor than its contents.
-					// The {...renderProps} are passed to the inner wrapper, so that the
-					// menu element is the direct parent of the menu item elements.
-					<Styled.MenuPopoverOuterWrapper variant={ variant }>
-						<Styled.MenuPopoverInnerWrapper { ...renderProps } />
-					</Styled.MenuPopoverOuterWrapper>
-				) }
-			>
-				<DropdownMenuContext.Provider value={ contextValue }>
-					{ children }
-				</DropdownMenuContext.Provider>
-			</Ariakit.Menu>
-		</>
+		<DropdownMenuContext.Provider value={ contextValue }>
+			{ children }
+		</DropdownMenuContext.Provider>
 	);
 };
 
 export const DropdownMenuV2 = Object.assign(
-	contextConnect( UnconnectedDropdownMenu, 'DropdownMenu' ),
+	contextConnectWithoutRef( UnconnectedDropdownMenu, 'DropdownMenu' ),
 	{
 		Context: Object.assign( DropdownMenuContext, {
 			displayName: 'DropdownMenuV2.Context',
 		} ),
+		TriggerButton: Object.assign( DropdownMenuTriggerButton, {
+			displayName: 'DropdownMenuV2.TriggerButton',
+		} ),
+		SubmenuTriggerItem: Object.assign( DropdownMenuSubmenuTriggerItem, {
+			displayName: 'DropdownMenuV2.SubmenuTriggerItem',
+		} ),
+		Popover: Object.assign( DropdownMenuPopover, {
+			displayName: 'DropdownMenuV2.Popover',
+		} ),
 		Item: Object.assign( DropdownMenuItem, {
 			displayName: 'DropdownMenuV2.Item',
 		} ),
diff --git a/packages/components/src/dropdown-menu-v2/item-help-text.tsx b/packages/components/src/dropdown-menu-v2/item-help-text.tsx
index 0408d20dfbd40d..cc0f7f12ec560e 100644
--- a/packages/components/src/dropdown-menu-v2/item-help-text.tsx
+++ b/packages/components/src/dropdown-menu-v2/item-help-text.tsx
@@ -1,18 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
+import { DropdownMenuContext } from './context';
 import * as Styled from './styles';
 
 export const DropdownMenuItemHelpText = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
 >( function DropdownMenuItemHelpText( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.ItemHelpText can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuItemHelpText
 			numberOfLines={ 2 }
diff --git a/packages/components/src/dropdown-menu-v2/item-label.tsx b/packages/components/src/dropdown-menu-v2/item-label.tsx
index a1f9391af2f92d..79cbd101501ca9 100644
--- a/packages/components/src/dropdown-menu-v2/item-label.tsx
+++ b/packages/components/src/dropdown-menu-v2/item-label.tsx
@@ -1,18 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
+import { DropdownMenuContext } from './context';
 import * as Styled from './styles';
 
 export const DropdownMenuItemLabel = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
 >( function DropdownMenuItemLabel( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.ItemLabel can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuItemLabel
 			numberOfLines={ 1 }
diff --git a/packages/components/src/dropdown-menu-v2/item.tsx b/packages/components/src/dropdown-menu-v2/item.tsx
index 2680603db22aa7..d7c354a4c48c36 100644
--- a/packages/components/src/dropdown-menu-v2/item.tsx
+++ b/packages/components/src/dropdown-menu-v2/item.tsx
@@ -16,13 +16,21 @@ export const DropdownMenuItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< DropdownMenuItemProps, 'div', false >
 >( function DropdownMenuItem(
-	{ prefix, suffix, children, onBlur, hideOnClick = true, ...props },
+	{ prefix, suffix, children, onBlur, hideOnClick = true, store, ...props },
 	ref
 ) {
 	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
 	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const dropdownMenuContext = useContext( DropdownMenuContext );
 
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.Item can only be rendered inside a DropdownMenu component'
+		);
+	}
+
+	const computedStore = store ?? dropdownMenuContext.store;
+
 	return (
 		<Styled.DropdownMenuItem
 			ref={ ref }
@@ -30,7 +38,7 @@ export const DropdownMenuItem = forwardRef<
 			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
+			store={ computedStore }
 		>
 			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
 
diff --git a/packages/components/src/dropdown-menu-v2/menu-popover.tsx b/packages/components/src/dropdown-menu-v2/menu-popover.tsx
new file mode 100644
index 00000000000000..8732d07d82dda6
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/menu-popover.tsx
@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useMemo,
+	forwardRef,
+	useCallback,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { DropdownMenuPopoverProps } from './types';
+import * as Styled from './styles';
+import { DropdownMenuContext } from './context';
+
+export const DropdownMenuPopover = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuPopoverProps, 'div', false >
+>( function DropdownMenuPopover(
+	{ gutter, children, shift, modal = true, ...otherProps },
+	ref
+) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.Popover can only be rendered inside a DropdownMenu component'
+		);
+	}
+
+	// Extract the side from the applied placement — useful for animations.
+	// Using `currentPlacement` instead of `placement` to make sure that we
+	// use the final computed placement (including "flips" etc).
+	const appliedPlacementSide = Ariakit.useStoreState(
+		dropdownMenuContext.store,
+		'currentPlacement'
+	).split( '-' )[ 0 ];
+
+	const hideOnEscape = useCallback(
+		( event: React.KeyboardEvent< Element > ) => {
+			// Pressing Escape can cause unexpected consequences (ie. exiting
+			// full screen mode on MacOs, close parent modals...).
+			event.preventDefault();
+			// Returning `true` causes the menu to hide.
+			return true;
+		},
+		[]
+	);
+
+	const computedDirection = Ariakit.useStoreState(
+		dropdownMenuContext.store,
+		'rtl'
+	)
+		? 'rtl'
+		: 'ltr';
+
+	const wrapperProps = useMemo(
+		() => ( {
+			dir: computedDirection,
+			style: {
+				direction:
+					computedDirection as React.CSSProperties[ 'direction' ],
+			},
+		} ),
+		[ computedDirection ]
+	);
+
+	return (
+		<Ariakit.Menu
+			{ ...otherProps }
+			ref={ ref }
+			modal={ modal }
+			store={ dropdownMenuContext.store }
+			// Root menu has an 8px distance from its trigger,
+			// otherwise 0 (which causes the submenu to slightly overlap)
+			gutter={ gutter ?? ( dropdownMenuContext.store.parent ? 0 : 8 ) }
+			// Align nested menu by the same (but opposite) amount
+			// as the menu container's padding.
+			shift={ shift ?? ( dropdownMenuContext.store.parent ? -4 : 0 ) }
+			hideOnHoverOutside={ false }
+			data-side={ appliedPlacementSide }
+			wrapperProps={ wrapperProps }
+			hideOnEscape={ hideOnEscape }
+			unmountOnHide
+			render={ ( renderProps ) => (
+				// Two wrappers are needed for the entry animation, where the menu
+				// container scales with a different factor than its contents.
+				// The {...renderProps} are passed to the inner wrapper, so that the
+				// menu element is the direct parent of the menu item elements.
+				<Styled.MenuPopoverOuterWrapper
+					variant={ dropdownMenuContext.variant }
+				>
+					<Styled.MenuPopoverInnerWrapper { ...renderProps } />
+				</Styled.MenuPopoverOuterWrapper>
+			) }
+		>
+			{ children }
+		</Ariakit.Menu>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/radio-item.tsx b/packages/components/src/dropdown-menu-v2/radio-item.tsx
index 547d8f257cdf4b..0bd2b316ae1267 100644
--- a/packages/components/src/dropdown-menu-v2/radio-item.tsx
+++ b/packages/components/src/dropdown-menu-v2/radio-item.tsx
@@ -36,6 +36,12 @@ export const DropdownMenuRadioItem = forwardRef<
 	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const dropdownMenuContext = useContext( DropdownMenuContext );
 
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.RadioItem can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuRadioItem
 			ref={ ref }
diff --git a/packages/components/src/dropdown-menu-v2/separator.tsx b/packages/components/src/dropdown-menu-v2/separator.tsx
index bc5aff7ae26118..f20336a2440a61 100644
--- a/packages/components/src/dropdown-menu-v2/separator.tsx
+++ b/packages/components/src/dropdown-menu-v2/separator.tsx
@@ -16,6 +16,13 @@ export const DropdownMenuSeparator = forwardRef<
 	WordPressComponentProps< DropdownMenuSeparatorProps, 'hr', false >
 >( function DropdownMenuSeparator( props, ref ) {
 	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.Separator can only be rendered inside a DropdownMenu component'
+		);
+	}
+
 	return (
 		<Styled.DropdownMenuSeparator
 			ref={ ref }
diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
index 90d15ca2ea6c18..fce7c34094a9f4 100644
--- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -21,10 +21,24 @@ import Modal from '../../modal';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
 
+// TODO:
+// - Variant doesn't seem to work
+// - Checkbox example seems weird (multiple selection vs single selection)
+// - Inner/outer modals seem the same, is the example working?
+// - Migrate to CSF 3
+// - Migrate unit tests
+// - Tidy up types
+
 const meta: Meta< typeof DropdownMenuV2 > = {
 	title: 'Components (Experimental)/DropdownMenu V2',
 	component: DropdownMenuV2,
 	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		TriggerButton: DropdownMenuV2.TriggerButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		SubmenuTriggerItem: DropdownMenuV2.SubmenuTriggerItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Popover: DropdownMenuV2.Popover,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Item: DropdownMenuV2.Item,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -62,102 +76,118 @@ export default meta;
 
 export const Default: StoryFn< typeof DropdownMenuV2 > = ( props ) => (
 	<DropdownMenuV2 { ...props }>
-		<DropdownMenuV2.Item>
-			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
-		</DropdownMenuV2.Item>
-		<DropdownMenuV2.Item>
-			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
-			<DropdownMenuV2.ItemHelpText>Help text</DropdownMenuV2.ItemHelpText>
-		</DropdownMenuV2.Item>
-		<DropdownMenuV2.Item>
-			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
-			<DropdownMenuV2.ItemHelpText>
-				The menu item help text is automatically truncated when there
-				are more than two lines of text
-			</DropdownMenuV2.ItemHelpText>
-		</DropdownMenuV2.Item>
-		<DropdownMenuV2.Item hideOnClick={ false }>
-			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
-			<DropdownMenuV2.ItemHelpText>
-				This item doesn&apos;t close the menu on click
-			</DropdownMenuV2.ItemHelpText>
-		</DropdownMenuV2.Item>
-		<DropdownMenuV2.Item disabled>Disabled item</DropdownMenuV2.Item>
-		<DropdownMenuV2.Separator />
-		<DropdownMenuV2.Group>
-			<DropdownMenuV2.GroupLabel>Group label</DropdownMenuV2.GroupLabel>
-			<DropdownMenuV2.Item
-				prefix={ <Icon icon={ customLink } size={ 24 } /> }
-			>
-				<DropdownMenuV2.ItemLabel>With prefix</DropdownMenuV2.ItemLabel>
+		<DropdownMenuV2.TriggerButton
+			render={ <Button __next40pxDefaultSize variant="secondary" /> }
+		>
+			Open menu
+		</DropdownMenuV2.TriggerButton>
+		<DropdownMenuV2.Popover>
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
 			</DropdownMenuV2.Item>
-			<DropdownMenuV2.Item suffix="⌘S">With suffix</DropdownMenuV2.Item>
-			<DropdownMenuV2.Item
-				disabled
-				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
-				suffix="⌥⌘T"
-			>
-				<DropdownMenuV2.ItemLabel>
-					Disabled with prefix and suffix
-				</DropdownMenuV2.ItemLabel>
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
+				<DropdownMenuV2.ItemHelpText>
+					Help text
+				</DropdownMenuV2.ItemHelpText>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
 				<DropdownMenuV2.ItemHelpText>
-					And help text
+					The menu item help text is automatically truncated when
+					there are more than two lines of text
 				</DropdownMenuV2.ItemHelpText>
 			</DropdownMenuV2.Item>
-		</DropdownMenuV2.Group>
+			<DropdownMenuV2.Item hideOnClick={ false }>
+				<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
+				<DropdownMenuV2.ItemHelpText>
+					This item doesn&apos;t close the menu on click
+				</DropdownMenuV2.ItemHelpText>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item disabled>Disabled item</DropdownMenuV2.Item>
+			<DropdownMenuV2.Separator />
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Group label
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.Item
+					prefix={ <Icon icon={ customLink } size={ 24 } /> }
+				>
+					<DropdownMenuV2.ItemLabel>
+						With prefix
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+				<DropdownMenuV2.Item suffix="⌘S">
+					With suffix
+				</DropdownMenuV2.Item>
+				<DropdownMenuV2.Item
+					disabled
+					prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
+					suffix="⌥⌘T"
+				>
+					<DropdownMenuV2.ItemLabel>
+						Disabled with prefix and suffix
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						And help text
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.Item>
+			</DropdownMenuV2.Group>
+		</DropdownMenuV2.Popover>
 	</DropdownMenuV2>
 );
-Default.args = {
-	trigger: (
-		<Button __next40pxDefaultSize variant="secondary">
-			Open menu
-		</Button>
-	),
-};
+Default.args = {};
 
 export const WithSubmenu: StoryFn< typeof DropdownMenuV2 > = ( props ) => (
 	<DropdownMenuV2 { ...props }>
-		<DropdownMenuV2.Item>Level 1 item</DropdownMenuV2.Item>
-		<DropdownMenuV2
-			trigger={
-				<DropdownMenuV2.Item suffix="Suffix">
+		<DropdownMenuV2.TriggerButton
+			render={ <Button __next40pxDefaultSize variant="secondary" /> }
+		>
+			Open menu
+		</DropdownMenuV2.TriggerButton>
+		<DropdownMenuV2.Popover>
+			<DropdownMenuV2.Item>Level 1 item</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item>Level 1 item</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item>Level 1 item</DropdownMenuV2.Item>
+			<DropdownMenuV2>
+				<DropdownMenuV2.SubmenuTriggerItem suffix="Suffix">
 					<DropdownMenuV2.ItemLabel>
 						Submenu trigger item with a long label
 					</DropdownMenuV2.ItemLabel>
-				</DropdownMenuV2.Item>
-			}
-		>
-			<DropdownMenuV2.Item>
-				<DropdownMenuV2.ItemLabel>
-					Level 2 item
-				</DropdownMenuV2.ItemLabel>
-			</DropdownMenuV2.Item>
-			<DropdownMenuV2.Item>
-				<DropdownMenuV2.ItemLabel>
-					Level 2 item
-				</DropdownMenuV2.ItemLabel>
-			</DropdownMenuV2.Item>
-			<DropdownMenuV2
-				trigger={
+				</DropdownMenuV2.SubmenuTriggerItem>
+				<DropdownMenuV2.Popover>
 					<DropdownMenuV2.Item>
 						<DropdownMenuV2.ItemLabel>
-							Submenu trigger
+							Level 2 item
 						</DropdownMenuV2.ItemLabel>
 					</DropdownMenuV2.Item>
-				}
-			>
-				<DropdownMenuV2.Item>
-					<DropdownMenuV2.ItemLabel>
-						Level 3 item
-					</DropdownMenuV2.ItemLabel>
-				</DropdownMenuV2.Item>
-				<DropdownMenuV2.Item>
-					<DropdownMenuV2.ItemLabel>
-						Level 3 item
-					</DropdownMenuV2.ItemLabel>
-				</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>
+						<DropdownMenuV2.ItemLabel>
+							Level 2 item
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2>
+						<DropdownMenuV2.SubmenuTriggerItem>
+							<DropdownMenuV2.ItemLabel>
+								Submenu trigger
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.SubmenuTriggerItem>
+						<DropdownMenuV2.Popover>
+							<DropdownMenuV2.Item>
+								<DropdownMenuV2.ItemLabel>
+									Level 3 item
+								</DropdownMenuV2.ItemLabel>
+							</DropdownMenuV2.Item>
+							<DropdownMenuV2.Item>
+								<DropdownMenuV2.ItemLabel>
+									Level 3 item
+								</DropdownMenuV2.ItemLabel>
+							</DropdownMenuV2.Item>
+						</DropdownMenuV2.Popover>
+					</DropdownMenuV2>
+				</DropdownMenuV2.Popover>
 			</DropdownMenuV2>
-		</DropdownMenuV2>
+		</DropdownMenuV2.Popover>
 	</DropdownMenuV2>
 );
 WithSubmenu.args = {
@@ -184,128 +214,135 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 
 	return (
 		<DropdownMenuV2 { ...props }>
-			<DropdownMenuV2.Group>
-				<DropdownMenuV2.GroupLabel>
-					Single selection, uncontrolled
-				</DropdownMenuV2.GroupLabel>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-individual-uncontrolled-a"
-					value="a"
-					suffix="⌥⌘T"
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item A
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially unchecked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-individual-uncontrolled-b"
-					value="b"
-					defaultChecked
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item B
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially checked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-			</DropdownMenuV2.Group>
-			<DropdownMenuV2.Separator />
-			<DropdownMenuV2.Group>
-				<DropdownMenuV2.GroupLabel>
-					Single selection, controlled
-				</DropdownMenuV2.GroupLabel>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-individual-controlled-a"
-					value="a"
-					checked={ isAChecked }
-					onChange={ ( e ) => setAChecked( e.target.checked ) }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item A
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially unchecked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-individual-controlled-b"
-					value="b"
-					checked={ isBChecked }
-					onChange={ ( e ) => setBChecked( e.target.checked ) }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item B
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially checked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-			</DropdownMenuV2.Group>
-			<DropdownMenuV2.Separator />
-			<DropdownMenuV2.Group>
-				<DropdownMenuV2.GroupLabel>
-					Multiple selection, uncontrolled
-				</DropdownMenuV2.GroupLabel>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-multiple-uncontrolled"
-					value="a"
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item A
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially unchecked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-multiple-uncontrolled"
-					value="b"
-					defaultChecked
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item B
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially checked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-			</DropdownMenuV2.Group>
-			<DropdownMenuV2.Separator />
-			<DropdownMenuV2.Group>
-				<DropdownMenuV2.GroupLabel>
-					Multiple selection, controlled
-				</DropdownMenuV2.GroupLabel>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-multiple-controlled"
-					value="a"
-					checked={ multipleCheckboxesValue.includes( 'a' ) }
-					onChange={ onMultipleCheckboxesCheckedChange }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item A
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially unchecked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-				<DropdownMenuV2.CheckboxItem
-					name="checkbox-multiple-controlled"
-					value="b"
-					checked={ multipleCheckboxesValue.includes( 'b' ) }
-					onChange={ onMultipleCheckboxesCheckedChange }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Checkbox item B
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially checked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.CheckboxItem>
-			</DropdownMenuV2.Group>
+			<DropdownMenuV2.TriggerButton
+				render={ <Button __next40pxDefaultSize variant="secondary" /> }
+			>
+				Open menu
+			</DropdownMenuV2.TriggerButton>
+			<DropdownMenuV2.Popover>
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.GroupLabel>
+						Single selection, uncontrolled
+					</DropdownMenuV2.GroupLabel>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-individual-uncontrolled-a"
+						value="a"
+						suffix="⌥⌘T"
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item A
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially unchecked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-individual-uncontrolled-b"
+						value="b"
+						defaultChecked
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item B
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially checked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+				</DropdownMenuV2.Group>
+				<DropdownMenuV2.Separator />
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.GroupLabel>
+						Single selection, controlled
+					</DropdownMenuV2.GroupLabel>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-individual-controlled-a"
+						value="a"
+						checked={ isAChecked }
+						onChange={ ( e ) => setAChecked( e.target.checked ) }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item A
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially unchecked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-individual-controlled-b"
+						value="b"
+						checked={ isBChecked }
+						onChange={ ( e ) => setBChecked( e.target.checked ) }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item B
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially checked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+				</DropdownMenuV2.Group>
+				<DropdownMenuV2.Separator />
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.GroupLabel>
+						Multiple selection, uncontrolled
+					</DropdownMenuV2.GroupLabel>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-multiple-uncontrolled"
+						value="a"
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item A
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially unchecked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-multiple-uncontrolled"
+						value="b"
+						defaultChecked
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item B
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially checked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+				</DropdownMenuV2.Group>
+				<DropdownMenuV2.Separator />
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.GroupLabel>
+						Multiple selection, controlled
+					</DropdownMenuV2.GroupLabel>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-multiple-controlled"
+						value="a"
+						checked={ multipleCheckboxesValue.includes( 'a' ) }
+						onChange={ onMultipleCheckboxesCheckedChange }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item A
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially unchecked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+					<DropdownMenuV2.CheckboxItem
+						name="checkbox-multiple-controlled"
+						value="b"
+						checked={ multipleCheckboxesValue.includes( 'b' ) }
+						onChange={ onMultipleCheckboxesCheckedChange }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Checkbox item B
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially checked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.CheckboxItem>
+				</DropdownMenuV2.Group>
+			</DropdownMenuV2.Popover>
 		</DropdownMenuV2>
 	);
 };
@@ -321,63 +358,73 @@ export const WithRadios: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 
 	return (
 		<DropdownMenuV2 { ...props }>
-			<DropdownMenuV2.Group>
-				<DropdownMenuV2.GroupLabel>
-					Uncontrolled
-				</DropdownMenuV2.GroupLabel>
-				<DropdownMenuV2.RadioItem name="radio-uncontrolled" value="one">
-					<DropdownMenuV2.ItemLabel>
-						Radio item 1
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially unchecked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.RadioItem>
-				<DropdownMenuV2.RadioItem
-					name="radio-uncontrolled"
-					value="two"
-					defaultChecked
-				>
-					<DropdownMenuV2.ItemLabel>
-						Radio item 2
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially checked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.RadioItem>
-			</DropdownMenuV2.Group>
-			<DropdownMenuV2.Separator />
-			<DropdownMenuV2.Group>
-				<DropdownMenuV2.GroupLabel>
-					Controlled
-				</DropdownMenuV2.GroupLabel>
-				<DropdownMenuV2.RadioItem
-					name="radio-controlled"
-					value="one"
-					checked={ radioValue === 'one' }
-					onChange={ onRadioChange }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Radio item 1
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially unchecked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.RadioItem>
-				<DropdownMenuV2.RadioItem
-					name="radio-controlled"
-					value="two"
-					checked={ radioValue === 'two' }
-					onChange={ onRadioChange }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Radio item 2
-					</DropdownMenuV2.ItemLabel>
-					<DropdownMenuV2.ItemHelpText>
-						Initially checked
-					</DropdownMenuV2.ItemHelpText>
-				</DropdownMenuV2.RadioItem>
-			</DropdownMenuV2.Group>
+			<DropdownMenuV2.TriggerButton
+				render={ <Button __next40pxDefaultSize variant="secondary" /> }
+			>
+				Open menu
+			</DropdownMenuV2.TriggerButton>
+			<DropdownMenuV2.Popover>
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.GroupLabel>
+						Uncontrolled
+					</DropdownMenuV2.GroupLabel>
+					<DropdownMenuV2.RadioItem
+						name="radio-uncontrolled"
+						value="one"
+					>
+						<DropdownMenuV2.ItemLabel>
+							Radio item 1
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially unchecked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.RadioItem>
+					<DropdownMenuV2.RadioItem
+						name="radio-uncontrolled"
+						value="two"
+						defaultChecked
+					>
+						<DropdownMenuV2.ItemLabel>
+							Radio item 2
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially checked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.RadioItem>
+				</DropdownMenuV2.Group>
+				<DropdownMenuV2.Separator />
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.GroupLabel>
+						Controlled
+					</DropdownMenuV2.GroupLabel>
+					<DropdownMenuV2.RadioItem
+						name="radio-controlled"
+						value="one"
+						checked={ radioValue === 'one' }
+						onChange={ onRadioChange }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Radio item 1
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially unchecked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.RadioItem>
+					<DropdownMenuV2.RadioItem
+						name="radio-controlled"
+						value="two"
+						checked={ radioValue === 'two' }
+						onChange={ onRadioChange }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Radio item 2
+						</DropdownMenuV2.ItemLabel>
+						<DropdownMenuV2.ItemHelpText>
+							Initially checked
+						</DropdownMenuV2.ItemHelpText>
+					</DropdownMenuV2.RadioItem>
+				</DropdownMenuV2.Group>
+			</DropdownMenuV2.Popover>
 		</DropdownMenuV2>
 	);
 };
@@ -402,33 +449,44 @@ export const WithModals: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	return (
 		<>
 			<DropdownMenuV2 { ...props }>
-				<DropdownMenuV2.Item
-					onClick={ () => setOuterModalOpen( true ) }
-					hideOnClick={ false }
-				>
-					<DropdownMenuV2.ItemLabel>
-						Open outer modal
-					</DropdownMenuV2.ItemLabel>
-				</DropdownMenuV2.Item>
-				<DropdownMenuV2.Item
-					onClick={ () => setInnerModalOpen( true ) }
-					hideOnClick={ false }
+				<DropdownMenuV2.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
 				>
-					<DropdownMenuV2.ItemLabel>
-						Open inner modal
-					</DropdownMenuV2.ItemLabel>
-				</DropdownMenuV2.Item>
-				{ isInnerModalOpen && (
-					<Modal
-						onRequestClose={ () => setInnerModalOpen( false ) }
-						overlayClassName={ modalOverlayClassName }
+					Open menu
+				</DropdownMenuV2.TriggerButton>
+				<DropdownMenuV2.Popover>
+					<DropdownMenuV2.Item
+						onClick={ () => setOuterModalOpen( true ) }
+						hideOnClick={ false }
 					>
-						Modal&apos;s contents
-						<button onClick={ () => setInnerModalOpen( false ) }>
-							Close
-						</button>
-					</Modal>
-				) }
+						<DropdownMenuV2.ItemLabel>
+							Open outer modal
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item
+						onClick={ () => setInnerModalOpen( true ) }
+						hideOnClick={ false }
+					>
+						<DropdownMenuV2.ItemLabel>
+							Open inner modal
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					{ isInnerModalOpen && (
+						<Modal
+							onRequestClose={ () => setInnerModalOpen( false ) }
+							overlayClassName={ modalOverlayClassName }
+						>
+							Modal&apos;s contents
+							<button
+								onClick={ () => setInnerModalOpen( false ) }
+							>
+								Close
+							</button>
+						</Modal>
+					) }
+				</DropdownMenuV2.Popover>
 			</DropdownMenuV2>
 			{ isOuterModalOpen && (
 				<Modal
@@ -503,10 +561,21 @@ export const WithSlotFill: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	return (
 		<SlotFillProvider>
 			<DropdownMenuV2 { ...props }>
-				<DropdownMenuV2.Item>
-					<DropdownMenuV2.ItemLabel>Item</DropdownMenuV2.ItemLabel>
-				</DropdownMenuV2.Item>
-				<Slot />
+				<DropdownMenuV2.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
+				>
+					Open menu
+				</DropdownMenuV2.TriggerButton>
+				<DropdownMenuV2.Popover>
+					<DropdownMenuV2.Item>
+						<DropdownMenuV2.ItemLabel>
+							Item
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					<Slot />
+				</DropdownMenuV2.Popover>
 			</DropdownMenuV2>
 
 			<Fill>
@@ -515,20 +584,19 @@ export const WithSlotFill: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 						Item from fill
 					</DropdownMenuV2.ItemLabel>
 				</DropdownMenuV2.Item>
-				<DropdownMenuV2
-					trigger={
+				<DropdownMenuV2>
+					<DropdownMenuV2.SubmenuTriggerItem>
+						<DropdownMenuV2.ItemLabel>
+							Submenu from fill
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.SubmenuTriggerItem>
+					<DropdownMenuV2.Popover>
 						<DropdownMenuV2.Item>
 							<DropdownMenuV2.ItemLabel>
-								Submenu from fill
+								Submenu item from fill
 							</DropdownMenuV2.ItemLabel>
 						</DropdownMenuV2.Item>
-					}
-				>
-					<DropdownMenuV2.Item>
-						<DropdownMenuV2.ItemLabel>
-							Submenu item from fill
-						</DropdownMenuV2.ItemLabel>
-					</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			</Fill>
 		</SlotFillProvider>
@@ -547,32 +615,38 @@ export const ToolbarVariant: StoryFn< typeof DropdownMenuV2 > = ( props ) => (
 	// TODO: add toolbar
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
 		<DropdownMenuV2 { ...props }>
-			<DropdownMenuV2.Item>
-				<DropdownMenuV2.ItemLabel>
-					Level 1 item
-				</DropdownMenuV2.ItemLabel>
-			</DropdownMenuV2.Item>
-			<DropdownMenuV2.Item>
-				<DropdownMenuV2.ItemLabel>
-					Level 1 item
-				</DropdownMenuV2.ItemLabel>
-			</DropdownMenuV2.Item>
-			<DropdownMenuV2.Separator />
-			<DropdownMenuV2
-				trigger={
-					<DropdownMenuV2.Item>
-						<DropdownMenuV2.ItemLabel>
-							Submenu trigger
-						</DropdownMenuV2.ItemLabel>
-					</DropdownMenuV2.Item>
-				}
+			<DropdownMenuV2.TriggerButton
+				render={ <Button __next40pxDefaultSize variant="secondary" /> }
 			>
+				Open menu
+			</DropdownMenuV2.TriggerButton>
+			<DropdownMenuV2.Popover>
 				<DropdownMenuV2.Item>
 					<DropdownMenuV2.ItemLabel>
-						Level 2 item
+						Level 1 item
 					</DropdownMenuV2.ItemLabel>
 				</DropdownMenuV2.Item>
-			</DropdownMenuV2>
+				<DropdownMenuV2.Item>
+					<DropdownMenuV2.ItemLabel>
+						Level 1 item
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+				<DropdownMenuV2.Separator />
+				<DropdownMenuV2>
+					<DropdownMenuV2.SubmenuTriggerItem>
+						<DropdownMenuV2.ItemLabel>
+							Submenu trigger
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.SubmenuTriggerItem>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>
+							<DropdownMenuV2.ItemLabel>
+								Level 2 item
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
+				</DropdownMenuV2>
+			</DropdownMenuV2.Popover>
 		</DropdownMenuV2>
 	</ContextSystemProvider>
 );
@@ -594,32 +668,43 @@ export const InsideModal: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 			{ isModalOpen && (
 				<Modal onRequestClose={ () => setModalOpen( false ) }>
 					<DropdownMenuV2 { ...props }>
-						<DropdownMenuV2.Item>
-							<DropdownMenuV2.ItemLabel>
-								Level 1 item
-							</DropdownMenuV2.ItemLabel>
-						</DropdownMenuV2.Item>
-						<DropdownMenuV2.Item>
-							<DropdownMenuV2.ItemLabel>
-								Level 1 item
-							</DropdownMenuV2.ItemLabel>
-						</DropdownMenuV2.Item>
-						<DropdownMenuV2.Separator />
-						<DropdownMenuV2
-							trigger={
-								<DropdownMenuV2.Item>
-									<DropdownMenuV2.ItemLabel>
-										Submenu trigger
-									</DropdownMenuV2.ItemLabel>
-								</DropdownMenuV2.Item>
+						<DropdownMenuV2.TriggerButton
+							render={
+								<Button
+									__next40pxDefaultSize
+									variant="secondary"
+								/>
 							}
 						>
+							Open menu
+						</DropdownMenuV2.TriggerButton>
+						<DropdownMenuV2.Popover>
+							<DropdownMenuV2.Item>
+								<DropdownMenuV2.ItemLabel>
+									Level 1 item
+								</DropdownMenuV2.ItemLabel>
+							</DropdownMenuV2.Item>
 							<DropdownMenuV2.Item>
 								<DropdownMenuV2.ItemLabel>
-									Level 2 item
+									Level 1 item
 								</DropdownMenuV2.ItemLabel>
 							</DropdownMenuV2.Item>
-						</DropdownMenuV2>
+							<DropdownMenuV2.Separator />
+							<DropdownMenuV2>
+								<DropdownMenuV2.SubmenuTriggerItem>
+									<DropdownMenuV2.ItemLabel>
+										Submenu trigger
+									</DropdownMenuV2.ItemLabel>
+								</DropdownMenuV2.SubmenuTriggerItem>
+								<DropdownMenuV2.Popover>
+									<DropdownMenuV2.Item>
+										<DropdownMenuV2.ItemLabel>
+											Level 2 item
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.Item>
+								</DropdownMenuV2.Popover>
+							</DropdownMenuV2>
+						</DropdownMenuV2.Popover>
 					</DropdownMenuV2>
 					<Button onClick={ () => setModalOpen( false ) }>
 						Close modal
diff --git a/packages/components/src/dropdown-menu-v2/submenu-trigger-item.tsx b/packages/components/src/dropdown-menu-v2/submenu-trigger-item.tsx
new file mode 100644
index 00000000000000..9ad3075ffa69c5
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/submenu-trigger-item.tsx
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+import { chevronRightSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { DropdownMenuSubmenuTriggerItemProps } from './types';
+import { DropdownMenuContext } from './context';
+import { DropdownMenuItem } from './item';
+import * as Styled from './styles';
+
+export const DropdownMenuSubmenuTriggerItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuSubmenuTriggerItemProps, 'div', false >
+>( function DropdownMenuSubmenuTriggerItem( { suffix, ...otherProps }, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store.parent ) {
+		throw new Error(
+			'DropdownMenu.SubmenuTriggerItem can only be rendered inside a nested DropdownMenu component'
+		);
+	}
+
+	return (
+		<Ariakit.MenuButton
+			ref={ ref }
+			accessibleWhenDisabled
+			store={ dropdownMenuContext.store }
+			render={
+				<DropdownMenuItem
+					{ ...otherProps }
+					// The menu item needs to register and be part of the parent menu
+					store={ dropdownMenuContext.store.parent }
+					suffix={
+						<>
+							{ suffix }
+							<Styled.SubmenuChevronIcon
+								aria-hidden="true"
+								icon={ chevronRightSmall }
+								size={ 24 }
+								preserveAspectRatio="xMidYMid slice"
+							/>
+						</>
+					}
+				/>
+			}
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/test/index.tsx b/packages/components/src/dropdown-menu-v2/test/index.tsx
index cb674f27edaacf..68d348b1669978 100644
--- a/packages/components/src/dropdown-menu-v2/test/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/test/index.tsx
@@ -22,23 +22,29 @@ describe( 'DropdownMenu', () => {
 	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 	it( 'should follow the WAI-ARIA spec', async () => {
 		render(
-			<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-				<DropdownMenuV2.Item>Dropdown menu item</DropdownMenuV2.Item>
-				<DropdownMenuV2.Separator />
-				<DropdownMenuV2
-					trigger={
-						<DropdownMenuV2.Item>
-							Dropdown submenu
-						</DropdownMenuV2.Item>
-					}
-				>
+			<DropdownMenuV2>
+				<DropdownMenuV2.TriggerButton>
+					Open dropdown
+				</DropdownMenuV2.TriggerButton>
+				<DropdownMenuV2.Popover>
 					<DropdownMenuV2.Item>
-						Dropdown submenu item 1
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>
-						Dropdown submenu item 2
+						Dropdown menu item
 					</DropdownMenuV2.Item>
-				</DropdownMenuV2>
+					<DropdownMenuV2.Separator />
+					<DropdownMenuV2>
+						<DropdownMenuV2.SubmenuTriggerItem>
+							Dropdown submenu
+						</DropdownMenuV2.SubmenuTriggerItem>
+						<DropdownMenuV2.Popover>
+							<DropdownMenuV2.Item>
+								Dropdown submenu item 1
+							</DropdownMenuV2.Item>
+							<DropdownMenuV2.Item>
+								Dropdown submenu item 2
+							</DropdownMenuV2.Item>
+						</DropdownMenuV2.Popover>
+					</DropdownMenuV2>
+				</DropdownMenuV2.Popover>
 			</DropdownMenuV2>
 		);
 
@@ -94,10 +100,15 @@ describe( 'DropdownMenu', () => {
 	describe( 'pointer and keyboard interactions', () => {
 		it( 'should open and focus the menu when clicking the trigger', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -117,12 +128,17 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item disabled>
-						First item
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>Second item</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>Third item</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item disabled>
+							First item
+						</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>Second item</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>Third item</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -149,12 +165,17 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item disabled>
-						First item
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>Second item</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>Third item</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item disabled>
+							First item
+						</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>Second item</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>Third item</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -181,10 +202,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should close when pressing the escape key', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -212,13 +238,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should close when clicking outside of the content', async () => {
 			render(
-				<DropdownMenuV2
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
-					<DropdownMenuV2.Item>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2 defaultOpen>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -232,13 +260,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should close when clicking on a menu item', async () => {
 			render(
-				<DropdownMenuV2
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
-					<DropdownMenuV2.Item>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2 defaultOpen>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -252,13 +282,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
 			render(
-				<DropdownMenuV2
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
-					<DropdownMenuV2.Item hideOnClick={ false }>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2 defaultOpen>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item hideOnClick={ false }>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -272,13 +304,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should not close when clicking on a disabled menu item', async () => {
 			render(
-				<DropdownMenuV2
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
-					<DropdownMenuV2.Item disabled>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2 defaultOpen>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item disabled>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -292,33 +326,34 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should reveal submenu content when hovering over the submenu trigger', async () => {
 			render(
-				<DropdownMenuV2
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
-					<DropdownMenuV2.Item>
-						Dropdown menu item 1
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>
-						Dropdown menu item 2
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2
-						trigger={
-							<DropdownMenuV2.Item>
-								Dropdown submenu
-							</DropdownMenuV2.Item>
-						}
-					>
+				<DropdownMenuV2 defaultOpen>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
 						<DropdownMenuV2.Item>
-							Dropdown submenu item 1
+							Dropdown menu item 1
 						</DropdownMenuV2.Item>
 						<DropdownMenuV2.Item>
-							Dropdown submenu item 2
+							Dropdown menu item 2
 						</DropdownMenuV2.Item>
-					</DropdownMenuV2>
-					<DropdownMenuV2.Item>
-						Dropdown menu item 3
-					</DropdownMenuV2.Item>
+						<DropdownMenuV2>
+							<DropdownMenuV2.SubmenuTriggerItem>
+								Dropdown submenu
+							</DropdownMenuV2.SubmenuTriggerItem>
+							<DropdownMenuV2.Popover>
+								<DropdownMenuV2.Item>
+									Dropdown submenu item 1
+								</DropdownMenuV2.Item>
+								<DropdownMenuV2.Item>
+									Dropdown submenu item 2
+								</DropdownMenuV2.Item>
+							</DropdownMenuV2.Popover>
+						</DropdownMenuV2>
+						<DropdownMenuV2.Item>
+							Dropdown menu item 3
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -343,33 +378,34 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => {
 			render(
-				<DropdownMenuV2
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
-					<DropdownMenuV2.Item>
-						Dropdown menu item 1
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>
-						Dropdown menu item 2
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2
-						trigger={
-							<DropdownMenuV2.Item>
-								Dropdown submenu
-							</DropdownMenuV2.Item>
-						}
-					>
+				<DropdownMenuV2 defaultOpen>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
 						<DropdownMenuV2.Item>
-							Dropdown submenu item 1
+							Dropdown menu item 1
 						</DropdownMenuV2.Item>
 						<DropdownMenuV2.Item>
-							Dropdown submenu item 2
+							Dropdown menu item 2
 						</DropdownMenuV2.Item>
-					</DropdownMenuV2>
-					<DropdownMenuV2.Item>
-						Dropdown menu item 3
-					</DropdownMenuV2.Item>
+						<DropdownMenuV2>
+							<DropdownMenuV2.SubmenuTriggerItem>
+								Dropdown submenu
+							</DropdownMenuV2.SubmenuTriggerItem>
+							<DropdownMenuV2.Popover>
+								<DropdownMenuV2.Item>
+									Dropdown submenu item 1
+								</DropdownMenuV2.Item>
+								<DropdownMenuV2.Item>
+									Dropdown submenu item 2
+								</DropdownMenuV2.Item>
+							</DropdownMenuV2.Popover>
+						</DropdownMenuV2>
+						<DropdownMenuV2.Item>
+							Dropdown menu item 3
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -479,25 +515,30 @@ describe( 'DropdownMenu', () => {
 					setRadioValue( e.target.value );
 				};
 				return (
-					<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuV2.Group>
-							<DropdownMenuV2.RadioItem
-								name="radio-test"
-								value="radio-one"
-								checked={ radioValue === 'radio-one' }
-								onChange={ onRadioChange }
-							>
-								Radio item one
-							</DropdownMenuV2.RadioItem>
-							<DropdownMenuV2.RadioItem
-								name="radio-test"
-								value="radio-two"
-								checked={ radioValue === 'radio-two' }
-								onChange={ onRadioChange }
-							>
-								Radio item two
-							</DropdownMenuV2.RadioItem>
-						</DropdownMenuV2.Group>
+					<DropdownMenuV2>
+						<DropdownMenuV2.TriggerButton>
+							Open dropdown
+						</DropdownMenuV2.TriggerButton>
+						<DropdownMenuV2.Popover>
+							<DropdownMenuV2.Group>
+								<DropdownMenuV2.RadioItem
+									name="radio-test"
+									value="radio-one"
+									checked={ radioValue === 'radio-one' }
+									onChange={ onRadioChange }
+								>
+									Radio item one
+								</DropdownMenuV2.RadioItem>
+								<DropdownMenuV2.RadioItem
+									name="radio-test"
+									value="radio-two"
+									checked={ radioValue === 'radio-two' }
+									onChange={ onRadioChange }
+								>
+									Radio item two
+								</DropdownMenuV2.RadioItem>
+							</DropdownMenuV2.Group>
+						</DropdownMenuV2.Popover>
 					</DropdownMenuV2>
 				);
 			};
@@ -556,28 +597,33 @@ describe( 'DropdownMenu', () => {
 		it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => {
 			const onRadioValueChangeSpy = jest.fn();
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Group>
-						<DropdownMenuV2.RadioItem
-							name="radio-test"
-							value="radio-one"
-							onChange={ ( e ) =>
-								onRadioValueChangeSpy( e.target.value )
-							}
-						>
-							Radio item one
-						</DropdownMenuV2.RadioItem>
-						<DropdownMenuV2.RadioItem
-							name="radio-test"
-							value="radio-two"
-							defaultChecked
-							onChange={ ( e ) =>
-								onRadioValueChangeSpy( e.target.value )
-							}
-						>
-							Radio item two
-						</DropdownMenuV2.RadioItem>
-					</DropdownMenuV2.Group>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Group>
+							<DropdownMenuV2.RadioItem
+								name="radio-test"
+								value="radio-one"
+								onChange={ ( e ) =>
+									onRadioValueChangeSpy( e.target.value )
+								}
+							>
+								Radio item one
+							</DropdownMenuV2.RadioItem>
+							<DropdownMenuV2.RadioItem
+								name="radio-test"
+								value="radio-two"
+								defaultChecked
+								onChange={ ( e ) =>
+									onRadioValueChangeSpy( e.target.value )
+								}
+							>
+								Radio item two
+							</DropdownMenuV2.RadioItem>
+						</DropdownMenuV2.Group>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -640,38 +686,43 @@ describe( 'DropdownMenu', () => {
 					useState< boolean >();
 
 				return (
-					<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuV2.CheckboxItem
-							name="item-one"
-							value="item-one-value"
-							checked={ itemOneChecked }
-							onChange={ ( e ) => {
-								onCheckboxValueChangeSpy(
-									e.target.name,
-									e.target.value,
-									e.target.checked
-								);
-								setItemOneChecked( e.target.checked );
-							} }
-						>
-							Checkbox item one
-						</DropdownMenuV2.CheckboxItem>
-
-						<DropdownMenuV2.CheckboxItem
-							name="item-two"
-							value="item-two-value"
-							checked={ itemTwoChecked }
-							onChange={ ( e ) => {
-								onCheckboxValueChangeSpy(
-									e.target.name,
-									e.target.value,
-									e.target.checked
-								);
-								setItemTwoChecked( e.target.checked );
-							} }
-						>
-							Checkbox item two
-						</DropdownMenuV2.CheckboxItem>
+					<DropdownMenuV2>
+						<DropdownMenuV2.TriggerButton>
+							Open dropdown
+						</DropdownMenuV2.TriggerButton>
+						<DropdownMenuV2.Popover>
+							<DropdownMenuV2.CheckboxItem
+								name="item-one"
+								value="item-one-value"
+								checked={ itemOneChecked }
+								onChange={ ( e ) => {
+									onCheckboxValueChangeSpy(
+										e.target.name,
+										e.target.value,
+										e.target.checked
+									);
+									setItemOneChecked( e.target.checked );
+								} }
+							>
+								Checkbox item one
+							</DropdownMenuV2.CheckboxItem>
+
+							<DropdownMenuV2.CheckboxItem
+								name="item-two"
+								value="item-two-value"
+								checked={ itemTwoChecked }
+								onChange={ ( e ) => {
+									onCheckboxValueChangeSpy(
+										e.target.name,
+										e.target.value,
+										e.target.checked
+									);
+									setItemTwoChecked( e.target.checked );
+								} }
+							>
+								Checkbox item two
+							</DropdownMenuV2.CheckboxItem>
+						</DropdownMenuV2.Popover>
 					</DropdownMenuV2>
 				);
 			};
@@ -763,35 +814,40 @@ describe( 'DropdownMenu', () => {
 			const onCheckboxValueChangeSpy = jest.fn();
 
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.CheckboxItem
-						name="item-one"
-						value="item-one-value"
-						onChange={ ( e ) => {
-							onCheckboxValueChangeSpy(
-								e.target.name,
-								e.target.value,
-								e.target.checked
-							);
-						} }
-					>
-						Checkbox item one
-					</DropdownMenuV2.CheckboxItem>
-
-					<DropdownMenuV2.CheckboxItem
-						name="item-two"
-						value="item-two-value"
-						defaultChecked
-						onChange={ ( e ) => {
-							onCheckboxValueChangeSpy(
-								e.target.name,
-								e.target.value,
-								e.target.checked
-							);
-						} }
-					>
-						Checkbox item two
-					</DropdownMenuV2.CheckboxItem>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.CheckboxItem
+							name="item-one"
+							value="item-one-value"
+							onChange={ ( e ) => {
+								onCheckboxValueChangeSpy(
+									e.target.name,
+									e.target.value,
+									e.target.checked
+								);
+							} }
+						>
+							Checkbox item one
+						</DropdownMenuV2.CheckboxItem>
+
+						<DropdownMenuV2.CheckboxItem
+							name="item-two"
+							value="item-two-value"
+							defaultChecked
+							onChange={ ( e ) => {
+								onCheckboxValueChangeSpy(
+									e.target.name,
+									e.target.value,
+									e.target.checked
+								);
+							} }
+						>
+							Checkbox item two
+						</DropdownMenuV2.CheckboxItem>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -881,10 +937,15 @@ describe( 'DropdownMenu', () => {
 		it( 'should be modal by default', async () => {
 			render(
 				<>
-					<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuV2.Item>
-							Dropdown menu item
-						</DropdownMenuV2.Item>
+					<DropdownMenuV2>
+						<DropdownMenuV2.TriggerButton>
+							Open dropdown
+						</DropdownMenuV2.TriggerButton>
+						<DropdownMenuV2.Popover>
+							<DropdownMenuV2.Item>
+								Dropdown menu item
+							</DropdownMenuV2.Item>
+						</DropdownMenuV2.Popover>
 					</DropdownMenuV2>
 					<button>Button outside of dropdown</button>
 				</>
@@ -910,13 +971,15 @@ describe( 'DropdownMenu', () => {
 		it( 'should not be modal when the `modal` prop is set to `false`', async () => {
 			render(
 				<>
-					<DropdownMenuV2
-						trigger={ <button>Open dropdown</button> }
-						modal={ false }
-					>
-						<DropdownMenuV2.Item>
-							Dropdown menu item
-						</DropdownMenuV2.Item>
+					<DropdownMenuV2>
+						<DropdownMenuV2.TriggerButton>
+							Open dropdown
+						</DropdownMenuV2.TriggerButton>
+						<DropdownMenuV2.Popover modal={ false }>
+							<DropdownMenuV2.Item>
+								Dropdown menu item
+							</DropdownMenuV2.Item>
+						</DropdownMenuV2.Popover>
 					</DropdownMenuV2>
 					<button>Button outside of dropdown</button>
 				</>
@@ -949,10 +1012,15 @@ describe( 'DropdownMenu', () => {
 	describe( 'items prefix and suffix', () => {
 		it( 'should display a prefix on regular items', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item prefix={ <>Item prefix</> }>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item prefix={ <>Item prefix</> }>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -973,10 +1041,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should display a suffix on regular items', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item suffix={ <>Item suffix</> }>
-						Dropdown menu item
-					</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item suffix={ <>Item suffix</> }>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -997,14 +1070,19 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should display a suffix on radio items', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.RadioItem
-						name="radio-test"
-						value="radio-one"
-						suffix="Radio suffix"
-					>
-						Radio item one
-					</DropdownMenuV2.RadioItem>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.RadioItem
+							name="radio-test"
+							value="radio-one"
+							suffix="Radio suffix"
+						>
+							Radio item one
+						</DropdownMenuV2.RadioItem>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -1025,14 +1103,19 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should display a suffix on checkbox items', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.CheckboxItem
-						name="checkbox-test"
-						value="checkbox-one"
-						suffix="Checkbox suffix"
-					>
-						Checkbox item one
-					</DropdownMenuV2.CheckboxItem>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.CheckboxItem
+							name="checkbox-test"
+							value="checkbox-one"
+							suffix="Checkbox suffix"
+						>
+							Checkbox item one
+						</DropdownMenuV2.CheckboxItem>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -1055,9 +1138,14 @@ describe( 'DropdownMenu', () => {
 	describe( 'typeahead', () => {
 		it( 'should highlight matching item', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item>One</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>Two</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>One</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>Two</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
@@ -1088,9 +1176,14 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should keep previous focus when no matches are found', async () => {
 			render(
-				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuV2.Item>One</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item>Two</DropdownMenuV2.Item>
+				<DropdownMenuV2>
+					<DropdownMenuV2.TriggerButton>
+						Open dropdown
+					</DropdownMenuV2.TriggerButton>
+					<DropdownMenuV2.Popover>
+						<DropdownMenuV2.Item>One</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>Two</DropdownMenuV2.Item>
+					</DropdownMenuV2.Popover>
 				</DropdownMenuV2>
 			);
 
diff --git a/packages/components/src/dropdown-menu-v2/trigger-button.tsx b/packages/components/src/dropdown-menu-v2/trigger-button.tsx
new file mode 100644
index 00000000000000..cfb6ea06b751be
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/trigger-button.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { DropdownMenuTriggerButtonProps } from './types';
+import { DropdownMenuContext } from './context';
+
+export const DropdownMenuTriggerButton = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuTriggerButtonProps, 'button', false >
+>( function DropdownMenuTriggerButton( { children, ...props }, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	if ( ! dropdownMenuContext?.store ) {
+		throw new Error(
+			'DropdownMenu.TriggerButton can only be rendered inside a DropdownMenu component'
+		);
+	}
+
+	if ( dropdownMenuContext.store.parent ) {
+		throw new Error(
+			'DropdownMenu.TriggerButton should not be renderer inside a nested DropdownMenu component. Use DropdownMenu.SubmenuTriggerItem instead.'
+		);
+	}
+
+	return (
+		<Ariakit.MenuButton
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			store={ dropdownMenuContext.store }
+		>
+			{ children }
+		</Ariakit.MenuButton>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts
index 795cd9ac76ff58..9e67d5416304e3 100644
--- a/packages/components/src/dropdown-menu-v2/types.ts
+++ b/packages/components/src/dropdown-menu-v2/types.ts
@@ -16,10 +16,6 @@ export interface DropdownMenuContext {
 }
 
 export interface DropdownMenuProps {
-	/**
-	 * The trigger button.
-	 */
-	trigger: React.ReactElement;
 	/**
 	 * The contents of the dropdown.
 	 */
@@ -40,6 +36,19 @@ export interface DropdownMenuProps {
 	 * Event handler called when the open state of the dropdown menu changes.
 	 */
 	onOpenChange?: ( open: boolean ) => void;
+	/**
+	 * The placement of the dropdown menu popover.
+	 *
+	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
+	 */
+	placement?: Placement;
+}
+
+export interface DropdownMenuPopoverProps {
+	/**
+	 * The contents of the dropdown.
+	 */
+	children?: React.ReactNode;
 	/**
 	 * The modality of the dropdown menu. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
@@ -48,12 +57,6 @@ export interface DropdownMenuProps {
 	 * @default true
 	 */
 	modal?: boolean;
-	/**
-	 * The placement of the dropdown menu popover.
-	 *
-	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
-	 */
-	placement?: Placement;
 	/**
 	 * The distance between the popover and the anchor element.
 	 *
@@ -80,6 +83,18 @@ export interface DropdownMenuProps {
 		  ) => boolean );
 }
 
+export interface DropdownMenuTriggerButtonProps {
+	/**
+	 * The contents of the dropdown menu group.
+	 */
+	children?: React.ReactNode;
+
+	render?: Ariakit.MenuButtonProps[ 'render' ];
+}
+
+export interface DropdownMenuSubmenuTriggerItemProps
+	extends DropdownMenuItemProps {}
+
 export interface DropdownMenuGroupProps {
 	/**
 	 * The contents of the dropdown menu group.
@@ -98,7 +113,7 @@ export interface DropdownMenuItemProps {
 	/**
 	 * The contents of the menu item.
 	 */
-	children: React.ReactNode;
+	children?: React.ReactNode;
 	/**
 	 * The contents of the menu item's prefix.
 	 */
@@ -117,6 +132,12 @@ export interface DropdownMenuItemProps {
 	 * Determines if the element is disabled.
 	 */
 	disabled?: boolean;
+
+	render?: Ariakit.MenuItemProps[ 'render' ];
+	/**
+	 * @ignore
+	 */
+	store?: Ariakit.MenuItemProps[ 'store' ];
 }
 
 export interface DropdownMenuCheckboxItemProps