Explicitly specify additional ellipsis menu options

packages/block-editor/src/components/block-navigation/block.js

@@ -22,6 +22,7 @@ import DescenderLines from './descender-lines';
 import BlockNavigationBlockContents from './block-contents';
 import BlockSettingsMenu from '../block-settings-menu';
 import { useBlockNavigationContext } from './context';
+import EllipsisMenu from './ellipsis-menu';
 
 export default function BlockNavigationBlock( {
 	block,
@@ -118,10 +119,14 @@ export default function BlockNavigationBlock( {
 			{ withEllipsisMenu && level > 1 && (
 				<TreeGridCell className={ ellipsisMenuClassName }>
 					{ ( props ) => (
-						<BlockSettingsMenu
-							clientIds={ [ clientId ] }
-							{ ...props }
-						/>
+						<>
+							<BlockSettingsMenu
+								clientIds={ [ clientId ] }
+								{ ...props }
+							>
+								<EllipsisMenu.Slot bubblesVirtually />
+							</BlockSettingsMenu>
+						</>
 					) }
 				</TreeGridCell>
 			) }

packages/block-editor/src/components/block-navigation/ellipsis-menu.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	createSlotFill,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+
+const { Fill, Slot } = createSlotFill( 'EllipsisMenu' );
+
+function EllipsisMenuSlot( props ) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+}
+
+function EllipsisMenuFill( { controls, children } ) {
+	return (
+		<Fill>
+			{ ( fillProps ) => {
+				// Children passed to EllipsisMenuFill will not have access to any
+				// React Context whose Provider is part of the EllipsisMenuSlot tree.
+				// So we re-create the Provider in this subtree.
+				const value = ! isEmpty( fillProps ) ? fillProps : null;
+				return (
+					<ToolbarContext.Provider value={ value }>
+						<ToolbarGroup controls={ controls } />
+						{ children }
+					</ToolbarContext.Provider>
+				);
+			} }
+		</Fill>
+	);
+}
+
+const EllipsisMenu = ifBlockEditSelected( EllipsisMenuFill );
+
+EllipsisMenu.Slot = EllipsisMenuSlot;
+
+export default EllipsisMenu;

packages/block-editor/src/components/block-settings-menu/index.js

@@ -36,7 +36,7 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-export function BlockSettingsMenu( { clientIds } ) {
+export function BlockSettingsMenu( { children, clientIds } ) {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
@@ -86,6 +86,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 							>
 								{ ( { onClose } ) => (
 									<>
+										{ children }
 										<MenuGroup>
 											<__experimentalBlockSettingsMenuFirstItem.Slot
 												fillProps={ { onClose } }

packages/block-editor/src/components/index.js

@@ -18,6 +18,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents';
+export { default as __experimentalEllipsisMenu } from './block-navigation/ellipsis-menu';
 export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';

packages/block-library/src/navigation-link/edit.js

@@ -13,6 +13,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import {
 	ExternalLink,
 	KeyboardShortcuts,
+	MenuItem,
 	PanelBody,
 	Popover,
 	TextareaControl,
@@ -30,6 +31,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 	__experimentalBlock as Block,
 	__experimentalBlockNavigationEditor as BlockNavigationEditor,
+	__experimentalEllipsisMenu as BlockNavigationEllipsisMenu,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
@@ -158,6 +160,11 @@ function NavigationLinkEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
+			<BlockNavigationEllipsisMenu>
+				<MenuItem onClick={ () => {} }>
+					{ __( 'Add submenu' ) }
+				</MenuItem>
+			</BlockNavigationEllipsisMenu>
 			<InspectorControls>
 				<PanelBody title={ __( 'SEO settings' ) }>
 					<ToggleControl