Navigation Component: Handle the no search results state (#27160)

packages/components/src/navigation/menu/index.js

@@ -17,6 +17,7 @@ import { useNavigationContext } from '../context';
 import { useNavigationTreeMenu } from './use-navigation-tree-menu';
 import NavigationBackButton from '../back-button';
 import NavigationMenuTitle from './menu-title';
+import NavigationSearchNoResultsFound from './search-no-results-found';
 import { NavigableMenu } from '../../navigable-container';
 import { MenuUI } from '../styles/navigation-styles';
 
@@ -81,7 +82,12 @@ export default function NavigationMenu( props ) {
 				/>
 
 				<NavigableMenu>
-					<ul aria-labelledby={ menuTitleId }>{ children }</ul>
+					<ul aria-labelledby={ menuTitleId }>
+						{ children }
+						{ search && (
+							<NavigationSearchNoResultsFound search={ search } />
+						) }
+					</ul>
 				</NavigableMenu>
 			</MenuUI>
 		</NavigationMenuContext.Provider>

packages/components/src/navigation/menu/search-no-results-found.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { ItemBaseUI, ItemUI } from '../styles/navigation-styles';
+
+export default function NavigationSearchNoResultsFound( { search } ) {
+	const {
+		navigationTree: { items },
+	} = useNavigationContext();
+
+	const resultsCount = filter( items, '_isVisible' ).length;
+
+	if ( ! search || !! resultsCount ) {
+		return null;
+	}
+
+	return (
+		<ItemBaseUI>
+			<ItemUI>{ __( 'No results found.' ) } </ItemUI>
+		</ItemBaseUI>
+	);
+}