diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 11e2b2690ee69e..e7b28238709881 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -26,6 +26,7 @@ import {
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
useBlockEditingMode,
+ BlockControls,
} from '@wordpress/block-editor';
import { EntityProvider, store as coreStore } from '@wordpress/core-data';
@@ -40,10 +41,13 @@ import {
Button,
Spinner,
Notice,
+ ToolbarButton,
+ ToolbarGroup,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
-import { close, Icon } from '@wordpress/icons';
+import { close, Icon, page } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
/**
@@ -75,6 +79,48 @@ import AccessibleDescription from './accessible-description';
import AccessibleMenuDescription from './accessible-menu-description';
import { unlock } from '../../lock-unlock';
import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { DEFAULT_BLOCK } from '../constants';
+
+/**
+ * Component that renders the Add page button for the Navigation block.
+ *
+ * @param {Object} props Component props.
+ * @param {string} props.clientId Block client ID.
+ * @return {JSX.Element|null} The Add page button component or null if not applicable.
+ */
+function NavigationAddPageButton( { clientId } ) {
+ const { insertBlock } = useDispatch( blockEditorStore );
+ const { getBlockCount } = useSelect( blockEditorStore );
+
+ const onAddPage = useCallback( () => {
+ // Get the current number of blocks to insert at the end
+ const blockCount = getBlockCount( clientId );
+
+ // Create a new navigation link block (default block)
+ const newBlock = createBlock( DEFAULT_BLOCK.name, {
+ kind: DEFAULT_BLOCK.attributes.kind,
+ type: DEFAULT_BLOCK.attributes.type,
+ } );
+
+ // Insert the block at the end of the navigation
+ insertBlock( newBlock, blockCount, clientId );
+ }, [ clientId, insertBlock, getBlockCount ] );
+
+ return (
+
+
+
+ { __( 'Add page' ) }
+
+
+
+ );
+}
function ColorTools( {
textColor,
@@ -937,6 +983,9 @@ function Navigation( {
blockEditingMode={ blockEditingMode }
/>
{ blockEditingMode === 'default' && stylingInspectorControls }
+ { blockEditingMode === 'contentOnly' && isEntityAvailable && (
+
+ ) }
{ blockEditingMode === 'default' && isEntityAvailable && (
{ hasResolvedCanUserUpdateNavigationMenu &&