diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
index 0d42b7c8f241a..6a3dabd9a0ceb 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -10,14 +10,15 @@
 import React, { ReactElement } from 'react';
 import classNames from 'classnames';
 
-import { MountPoint } from '@kbn/core/public';
+import type { MountPoint } from '@kbn/core/public';
 import { MountPointPortal } from '@kbn/react-kibana-mount';
-import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
-import { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public';
-import { AggregateQuery, Query } from '@kbn/es-query';
-import { TopNavMenuData } from './top_nav_menu_data';
+import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
+import type { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public';
+import type { AggregateQuery, Query } from '@kbn/es-query';
+import type { EuiBreakpointSize } from '@elastic/eui';
+import type { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItems } from './top_nav_menu_items';
-import { TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges';
+import { type TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges';
 
 export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> = Omit<
   StatefulSearchBarProps<QT>,
@@ -51,6 +52,11 @@ export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> = Omit<
    * ```
    */
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
+
+  /**
+   * A list of named breakpoints at which to show the popover version. If not provided, it will use the default set of ['xs', 's'] that is internally provided by EUI.
+   */
+  popoverBreakpoints?: EuiBreakpointSize[];
 };
 
 /*
@@ -76,7 +82,13 @@ export function TopNavMenu<QT extends AggregateQuery | Query = Query>(
   }
 
   function renderMenu(className: string): ReactElement | null {
-    return <TopNavMenuItems config={config} className={className} />;
+    return (
+      <TopNavMenuItems
+        config={config}
+        className={className}
+        popoverBreakpoints={props.popoverBreakpoints}
+      />
+    );
   }
 
   function renderSearchBar(): ReactElement | null {
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx
index 48179f30ec276..e8d118dadff7d 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx
@@ -7,21 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiHeaderLinks } from '@elastic/eui';
+import { EuiBreakpointSize, EuiHeaderLinks } from '@elastic/eui';
 import React from 'react';
 import type { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItem } from './top_nav_menu_item';
 
+interface TopNavMenuItemsProps {
+  config: TopNavMenuData[] | undefined;
+  className?: string;
+  popoverBreakpoints?: EuiBreakpointSize[];
+}
+
 export const TopNavMenuItems = ({
   config,
   className,
-}: {
-  config: TopNavMenuData[] | undefined;
-  className?: string;
-}) => {
+  popoverBreakpoints,
+}: TopNavMenuItemsProps) => {
   if (!config || config.length === 0) return null;
   return (
-    <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
+    <EuiHeaderLinks
+      data-test-subj="top-nav"
+      gutterSize="xs"
+      className={className}
+      popoverBreakpoints={popoverBreakpoints}
+    >
       {config.map((menuItem: TopNavMenuData, i: number) => {
         return <TopNavMenuItem key={`nav-menu-${i}`} {...menuItem} />;
       })}
diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
index da99d693539b8..d26ce3f01cf34 100644
--- a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
@@ -1071,6 +1071,7 @@ export const LensTopNavMenu = ({
   return (
     <AggregateQueryTopNavMenu
       setMenuMountPoint={setHeaderActionMenu}
+      popoverBreakpoints={['xs', 's', 'm']}
       config={topNavConfig}
       saveQueryMenuVisibility={
         application.capabilities.visualize.saveQuery