From a8cddc2d6aed88cf72e07c3aa46e2767aed8be1e Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 24 Mar 2026 12:42:56 +0100
Subject: [PATCH 01/77] chrome-next bootstrap

---
 package.json                                  |   1 +
 .../packages/chrome/feature-flags/README.md   |  15 ++
 .../packages/chrome/feature-flags/index.ts    |  16 +++
 .../chrome/feature-flags/jest.config.js       |  14 ++
 .../chrome/feature-flags/kibana.jsonc         |   7 +
 .../chrome/feature-flags/package.json         |   7 +
 .../chrome/feature-flags/tsconfig.json        |  21 +++
 .../core-chrome-layout/layout_service.ts      |   2 +
 .../layouts/grid/grid_layout.tsx              | 129 ++++++++++++------
 .../layout/core-chrome-layout/tsconfig.json   |   2 +
 tsconfig.base.json                            |   2 +
 yarn.lock                                     |   4 +
 12 files changed, 181 insertions(+), 39 deletions(-)
 create mode 100644 src/core/packages/chrome/feature-flags/README.md
 create mode 100644 src/core/packages/chrome/feature-flags/index.ts
 create mode 100644 src/core/packages/chrome/feature-flags/jest.config.js
 create mode 100644 src/core/packages/chrome/feature-flags/kibana.jsonc
 create mode 100644 src/core/packages/chrome/feature-flags/package.json
 create mode 100644 src/core/packages/chrome/feature-flags/tsconfig.json

diff --git a/package.json b/package.json
index c089430f1d424..33340c157a4aa 100644
--- a/package.json
+++ b/package.json
@@ -342,6 +342,7 @@
     "@kbn/core-chrome-browser-hooks": "link:src/core/packages/chrome/browser-hooks",
     "@kbn/core-chrome-browser-internal": "link:src/core/packages/chrome/browser-internal",
     "@kbn/core-chrome-browser-internal-types": "link:src/core/packages/chrome/browser-internal-types",
+    "@kbn/core-chrome-feature-flags": "link:src/core/packages/chrome/feature-flags",
     "@kbn/core-chrome-layout": "link:src/core/packages/chrome/layout/core-chrome-layout",
     "@kbn/core-chrome-layout-components": "link:src/core/packages/chrome/layout/core-chrome-layout-components",
     "@kbn/core-chrome-layout-constants": "link:src/core/packages/chrome/layout/core-chrome-layout-constants",
diff --git a/src/core/packages/chrome/feature-flags/README.md b/src/core/packages/chrome/feature-flags/README.md
new file mode 100644
index 0000000000000..f1beb92afce2e
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/README.md
@@ -0,0 +1,15 @@
+# @kbn/core-chrome-feature-flags
+
+Feature flag utilities for Kibana's Chrome system.
+
+## Usage
+
+```typescript
+import { isNextChrome, NEXT_CHROME_FEATURE_FLAG_KEY } from '@kbn/core-chrome-feature-flags';
+
+const nextChromeEnabled = isNextChrome(featureFlags); // boolean
+```
+
+## Feature Flags
+
+- **`NEXT_CHROME_FEATURE_FLAG_KEY`** (`core.chrome.next`): Enables the next-generation Chrome UI
diff --git a/src/core/packages/chrome/feature-flags/index.ts b/src/core/packages/chrome/feature-flags/index.ts
new file mode 100644
index 0000000000000..79d7bb5546caf
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
+
+export const NEXT_CHROME_FEATURE_FLAG_KEY = 'core.chrome.next';
+
+export const isNextChrome = (featureFlags: FeatureFlagsStart): boolean => {
+  return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
+};
diff --git a/src/core/packages/chrome/feature-flags/jest.config.js b/src/core/packages/chrome/feature-flags/jest.config.js
new file mode 100644
index 0000000000000..86823820363aa
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/jest.config.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/src/core/packages/chrome/feature-flags'],
+};
diff --git a/src/core/packages/chrome/feature-flags/kibana.jsonc b/src/core/packages/chrome/feature-flags/kibana.jsonc
new file mode 100644
index 0000000000000..52b728cb56877
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/kibana.jsonc
@@ -0,0 +1,7 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/core-chrome-feature-flags",
+  "owner": "@elastic/appex-sharedux",
+  "group": "platform",
+  "visibility": "shared"
+}
diff --git a/src/core/packages/chrome/feature-flags/package.json b/src/core/packages/chrome/feature-flags/package.json
new file mode 100644
index 0000000000000..4f6458ce022e2
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/core-chrome-feature-flags",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}
\ No newline at end of file
diff --git a/src/core/packages/chrome/feature-flags/tsconfig.json b/src/core/packages/chrome/feature-flags/tsconfig.json
new file mode 100644
index 0000000000000..ce702a3c09ee9
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "@kbn/tsconfig-base/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/core-feature-flags-browser",
+  ]
+}
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layout_service.ts b/src/core/packages/chrome/layout/core-chrome-layout/layout_service.ts
index cb89dceaab1e6..3e6a4b5d10f31 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layout_service.ts
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layout_service.ts
@@ -13,6 +13,7 @@ import type { OverlayStart } from '@kbn/core-overlays-browser';
 import type { InternalHttpStart } from '@kbn/core-http-browser-internal';
 import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
+import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
 
 export interface LayoutServiceStartDeps {
   application: InternalApplicationStart;
@@ -20,6 +21,7 @@ export interface LayoutServiceStartDeps {
   http: InternalHttpStart;
   docLinks: DocLinksStart;
   customBranding: CustomBrandingStart;
+  featureFlags: FeatureFlagsStart;
 }
 
 /**
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index 3cf2ec30004b1..96d117a86ae7f 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -9,7 +9,7 @@
 
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { ChromeLayoutConfig } from '@kbn/core-chrome-layout-components';
+import type { ChromeLayoutConfig, ChromeStyle } from '@kbn/core-chrome-layout-components';
 import { ChromeLayout, ChromeLayoutConfigProvider } from '@kbn/core-chrome-layout-components';
 import {
   ChromeComponentsProvider,
@@ -29,13 +29,18 @@ import {
   useSidebarWidth,
   useSideNavWidth,
 } from '@kbn/core-chrome-browser-hooks';
+import { isNextChrome } from '@kbn/core-chrome-feature-flags';
 import { useGlobalFooter, useHasHeaderBanner } from '@kbn/core-chrome-browser-hooks/internal';
 import { GridLayoutGlobalStyles } from './grid_global_app_style';
 import type { LayoutService, LayoutServiceStartDeps } from '../../layout_service';
 import { AppWrapper } from '../../app_containers';
 import { APP_FIXED_VIEWPORT_ID } from '../../app_fixed_viewport';
 
-const layoutConfigs: { classic: ChromeLayoutConfig; project: ChromeLayoutConfig } = {
+const layoutConfigs: {
+  classic: ChromeLayoutConfig;
+  project: ChromeLayoutConfig;
+  projectNext: ChromeLayoutConfig;
+} = {
   classic: {
     chromeStyle: 'classic',
     headerHeight: 96,
@@ -58,6 +63,77 @@ const layoutConfigs: { classic: ChromeLayoutConfig; project: ChromeLayoutConfig
     footerHeight: 0,
     navigationWidth: 0,
   },
+  projectNext: {
+    chromeStyle: 'project',
+    headerHeight: 0,
+    bannerHeight: 32,
+
+    /** The application top bar renders the app specific menu */
+    /** we use it only in project style, because in classic it is included as part of the global header */
+    applicationTopBarHeight: 48,
+    applicationMarginRight: 8,
+    applicationMarginBottom: 8,
+    sidebarWidth: 0,
+    footerHeight: 0,
+    navigationWidth: 0,
+  },
+};
+
+interface ChromeSlots {
+  chromeVisible: boolean;
+  chromeStyle: ChromeStyle;
+  layoutConfig: ChromeLayoutConfig;
+  footer: ReactNode;
+  header?: ReactNode;
+  navigation?: ReactNode;
+  banner?: ReactNode;
+  applicationTopBar?: ReactNode;
+}
+
+const useChromeSlots = (nextChrome: boolean): ChromeSlots => {
+  const chromeVisible = useIsChromeVisible();
+  const chromeStyle = useChromeStyle();
+  const hasAppMenu = useHasAppMenu();
+  const hasHeaderBanner = useHasHeaderBanner();
+  const footer = useGlobalFooter();
+  const sidebarWidth = useSidebarWidth();
+  const navigationWidth = useSideNavWidth();
+
+  const layoutConfigKey =
+    chromeStyle === 'classic' ? 'classic' : nextChrome ? 'projectNext' : 'project';
+
+  const layoutConfig: ChromeLayoutConfig = {
+    ...layoutConfigs[layoutConfigKey],
+    sidebarWidth,
+    navigationWidth,
+  };
+
+  const banner = hasHeaderBanner ? <HeaderTopBanner position="static" /> : undefined;
+
+  const base = { chromeVisible, chromeStyle, layoutConfig, footer, banner };
+
+  if (!chromeVisible) {
+    return base;
+  }
+
+  if (chromeStyle === 'classic') {
+    return { ...base, header: <ClassicHeader /> };
+  }
+
+  if (nextChrome) {
+    return {
+      ...base,
+      navigation: <GridLayoutProjectSideNav />,
+      applicationTopBar: <>Chrome Next...</>,
+    };
+  }
+
+  return {
+    ...base,
+    header: <ProjectHeader />,
+    navigation: <GridLayoutProjectSideNav />,
+    applicationTopBar: hasAppMenu ? <AppMenuBar /> : undefined,
+  };
 };
 
 /**
@@ -70,10 +146,11 @@ export class GridLayout implements LayoutService {
    * Returns a layout component with the provided dependencies
    */
   public getComponent(): React.ComponentType {
-    const { application, overlays, http, docLinks, customBranding } = this.deps;
+    const { application, overlays, http, docLinks, customBranding, featureFlags } = this.deps;
 
     const appComponent = application.getComponent();
     const appBannerComponent = overlays.banners.getComponent();
+    const nextChrome = isNextChrome(featureFlags);
 
     const componentDeps: ChromeComponentsDeps = {
       application,
@@ -83,42 +160,16 @@ export class GridLayout implements LayoutService {
     };
 
     const GridLayoutContent = React.memo(() => {
-      const chromeVisible = useIsChromeVisible();
-      const hasHeaderBanner = useHasHeaderBanner();
-      const chromeStyle = useChromeStyle();
-      const hasAppMenu = useHasAppMenu();
-      const footer = useGlobalFooter();
-      const sidebarWidth = useSidebarWidth();
-      const navigationWidth = useSideNavWidth();
-
-      const layoutConfig = {
-        ...layoutConfigs[chromeStyle],
-        sidebarWidth,
-        navigationWidth,
-      };
-
-      // Assign main layout parts first
-      let header: ReactNode;
-      let navigation: ReactNode;
-      let banner: ReactNode;
-      let applicationTopBar: ReactNode;
-
-      if (chromeVisible) {
-        if (chromeStyle === 'classic') {
-          header = <ClassicHeader />;
-        } else {
-          header = <ProjectHeader />;
-          if (hasAppMenu) {
-            applicationTopBar = <AppMenuBar />;
-          }
-
-          navigation = <GridLayoutProjectSideNav />;
-        }
-      }
-
-      if (hasHeaderBanner) {
-        banner = <HeaderTopBanner position="static" />;
-      }
+      const {
+        chromeVisible,
+        chromeStyle,
+        layoutConfig,
+        footer,
+        header,
+        navigation,
+        banner,
+        applicationTopBar,
+      } = useChromeSlots(nextChrome);
 
       return (
         <>
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/tsconfig.json b/src/core/packages/chrome/layout/core-chrome-layout/tsconfig.json
index 0da3c72377328..889fe32ec115f 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/tsconfig.json
+++ b/src/core/packages/chrome/layout/core-chrome-layout/tsconfig.json
@@ -28,5 +28,7 @@
     "@kbn/core-chrome-layout-constants",
     "@kbn/core-chrome-browser-components",
     "@kbn/core-chrome-browser-hooks",
+    "@kbn/core-feature-flags-browser",
+    "@kbn/core-chrome-feature-flags",
   ]
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 607d2aef297b3..8c6c42eaad6eb 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -414,6 +414,8 @@
       "@kbn/core-chrome-browser-internal-types/*": ["src/core/packages/chrome/browser-internal-types/*"],
       "@kbn/core-chrome-browser-mocks": ["src/core/packages/chrome/browser-mocks"],
       "@kbn/core-chrome-browser-mocks/*": ["src/core/packages/chrome/browser-mocks/*"],
+      "@kbn/core-chrome-feature-flags": ["src/core/packages/chrome/feature-flags"],
+      "@kbn/core-chrome-feature-flags/*": ["src/core/packages/chrome/feature-flags/*"],
       "@kbn/core-chrome-layout": ["src/core/packages/chrome/layout/core-chrome-layout"],
       "@kbn/core-chrome-layout/*": ["src/core/packages/chrome/layout/core-chrome-layout/*"],
       "@kbn/core-chrome-layout-components": ["src/core/packages/chrome/layout/core-chrome-layout-components"],
diff --git a/yarn.lock b/yarn.lock
index d94d0cc360b55..d3862c40e826b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5424,6 +5424,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/core-chrome-feature-flags@link:src/core/packages/chrome/feature-flags":
+  version "0.0.0"
+  uid ""
+
 "@kbn/core-chrome-layout-components@link:src/core/packages/chrome/layout/core-chrome-layout-components":
   version "0.0.0"
   uid ""

From 528fe2ad525ea2acb8be06b152d556a533bc5497 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Tue, 24 Mar 2026 16:38:35 +0100
Subject: [PATCH 02/77] [Chrome Next] Create projectHeader service (#259404)

## Summary

This PR adds `projectHeader` service.
---
 .../core-chrome-app-menu-components/index.ts  |  1 +
 .../src/index.ts                              |  1 +
 .../src/types.ts                              |  2 ++
 .../browser-internal/src/chrome_api.tsx       |  9 ++++++
 .../browser-internal/src/chrome_service.tsx   |  9 ++++++
 .../src/services/project_header/index.ts      | 10 ++++++
 .../project_header/project_header_service.ts  | 32 +++++++++++++++++++
 .../browser-mocks/src/chrome_service.mock.ts  |  3 ++
 .../packages/chrome/browser/src/contracts.ts  | 12 ++++++-
 9 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/core/packages/chrome/browser-internal/src/services/project_header/index.ts
 create mode 100644 src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts

diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
index 9dfc6c78f738b..476d5c43f0f88 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
@@ -23,6 +23,7 @@ export type {
   AppMenuPrimaryActionItem,
   AppMenuPopoverItem,
   AppMenuSplitButtonProps,
+  AppMenuConfigNext,
 } from './src';
 
 export {
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
index d738b52f43576..84b253be9a378 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
@@ -23,6 +23,7 @@ export type {
   AppMenuPrimaryActionItem,
   AppMenuPopoverItem,
   AppMenuSplitButtonProps,
+  AppMenuConfigNext,
 } from './types';
 
 export {
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
index a49c3568c7d2a..2076d8f383a82 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
@@ -284,3 +284,5 @@ export interface AppMenuConfig {
    */
   secondaryActionItem?: AppMenuSecondaryActionItem;
 }
+
+export type AppMenuConfigNext = AppMenuConfig;
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index d25f24e25ced5..20cb3c3ac188c 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -18,11 +18,13 @@ import type { ChromeState } from './state/chrome_state';
 import type { NavControlsService } from './services/nav_controls';
 import type { NavLinksService } from './services/nav_links';
 import type { ProjectNavigationService } from './services/project_navigation';
+import type { ProjectHeaderService } from './services/project_header';
 import type { DocTitleService } from './services/doc_title';
 
 type NavControlsStart = ReturnType<NavControlsService['start']>;
 type NavLinksStart = ReturnType<NavLinksService['start']>;
 type ProjectNavigationStart = ReturnType<ProjectNavigationService['start']>;
+type ProjectHeaderStart = ReturnType<ProjectHeaderService['start']>;
 type DocTitleStart = ReturnType<DocTitleService['start']>;
 type RecentlyAccessedStart = ReturnType<RecentlyAccessedService['start']>;
 
@@ -34,6 +36,7 @@ export interface ChromeApiDeps {
     recentlyAccessed: RecentlyAccessedStart;
     docTitle: DocTitleStart;
     projectNavigation: ProjectNavigationStart;
+    projectHeader: ProjectHeaderStart;
   };
   sidebar: SidebarStart;
 }
@@ -166,6 +169,12 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
       >,
     getActiveSolutionNavId: () => projectNavigation.getActiveSolutionNavId(),
     project,
+
+    // Project Header
+    projectHeader: {
+      setAppMenu: services.projectHeader.setAppMenu,
+    },
+
     sidebar,
   };
 
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
index 0d2b4bb6473f0..2a54ee4c48dc6 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
@@ -30,6 +30,7 @@ import { DocTitleService } from './services/doc_title';
 import { NavControlsService } from './services/nav_controls';
 import { NavLinksService } from './services/nav_links';
 import { ProjectNavigationService } from './services/project_navigation';
+import { ProjectHeaderService } from './services/project_header';
 import { registerAnalyticsContextProvider } from './register_analytics_context_provider';
 import type { InternalChromeSetup, InternalChromeStart } from './types';
 import { createChromeState } from './state';
@@ -75,6 +76,7 @@ export class ChromeService {
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
   private readonly projectNavigation: ProjectNavigationService;
+  private readonly projectHeader: ProjectHeaderService;
   private readonly sidebar: SidebarService;
   private readonly logger: Logger;
   private readonly isServerless: boolean;
@@ -83,6 +85,7 @@ export class ChromeService {
     this.logger = params.coreContext.logger.get('chrome-browser');
     this.isServerless = params.coreContext.env.packageInfo.buildFlavor === 'serverless';
     this.projectNavigation = new ProjectNavigationService(this.isServerless);
+    this.projectHeader = new ProjectHeaderService();
     this.sidebar = new SidebarService({ basePath: params.basePath });
   }
 
@@ -164,6 +167,10 @@ export class ChromeService {
       chromeBreadcrumbs$: state.breadcrumbs.classic.$,
     });
 
+    const projectHeader = this.projectHeader.start({
+      setAppMenu: state.appMenu.set,
+    });
+
     const sidebar = this.sidebar.start();
 
     // 5. Setup app change handler (resets chrome state on app navigation)
@@ -183,6 +190,7 @@ export class ChromeService {
         recentlyAccessed,
         docTitle,
         projectNavigation,
+        projectHeader,
       },
       sidebar,
     });
@@ -194,6 +202,7 @@ export class ChromeService {
     this.navControls.stop();
     this.navLinks.stop();
     this.projectNavigation.stop();
+    this.projectHeader.stop();
     this.sidebar.stop();
     this.stop$.next();
   }
diff --git a/src/core/packages/chrome/browser-internal/src/services/project_header/index.ts b/src/core/packages/chrome/browser-internal/src/services/project_header/index.ts
new file mode 100644
index 0000000000000..3dfb5d216fb89
--- /dev/null
+++ b/src/core/packages/chrome/browser-internal/src/services/project_header/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { ProjectHeaderService } from './project_header_service';
diff --git a/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts b/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
new file mode 100644
index 0000000000000..2da1f5838a9a3
--- /dev/null
+++ b/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
+import { ReplaySubject } from 'rxjs';
+
+interface StartDeps {
+  setAppMenu: (config?: AppMenuConfigNext) => void;
+}
+
+export class ProjectHeaderService {
+  private readonly stop$ = new ReplaySubject<void>(1);
+
+  public start({ setAppMenu }: StartDeps) {
+    return {
+      setAppMenu: (config?: AppMenuConfigNext) => {
+        setAppMenu(config);
+      },
+    };
+  }
+
+  public stop() {
+    this.stop$.next();
+    this.stop$.complete();
+  }
+}
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index e0e1fa57d1de8..ca60cde816e75 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -98,6 +98,9 @@ const createStartContractMock = () => {
       getNavigation$: jest.fn().mockReturnValue(new BehaviorSubject({} as any)),
       getProjectHome$: jest.fn().mockReturnValue(of('/')),
     }),
+    projectHeader: lazyObject({
+      setAppMenu: jest.fn(),
+    }),
     setGlobalFooter: jest.fn(),
     getGlobalFooter$: jest.fn().mockReturnValue(new BehaviorSubject(null)),
     getAppMenu$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 07d676e9abd9a..4c9fd6827d9b5 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -9,7 +9,7 @@
 
 import type { ReactNode } from 'react';
 import type { Observable } from 'rxjs';
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import type { AppMenuConfig, AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
 import type { ChromeNavLink, ChromeNavLinks } from './nav_links';
 import type { ChromeRecentlyAccessed } from './recently_accessed';
 import type { ChromeDocTitle } from './doc_title';
@@ -322,6 +322,16 @@ export interface ChromeStart {
    */
   getActiveSolutionNavId(): SolutionId | null;
 
+  /**
+   * APIs for the project header.
+   */
+  projectHeader: {
+    /**
+     * Set the app menu configuration for the current application.
+     */
+    setAppMenu(config?: AppMenuConfigNext): void;
+  };
+
   /**
    * Used only by the rendering service and KibanaRenderingContextProvider to wrap the rendering tree in the Chrome context providers
    */

From 746408d1b425c4af9b4d8e4bd1a287e66a9ce991 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 24 Mar 2026 17:58:28 +0100
Subject: [PATCH 03/77] [Chrome Next] Add unified projectHeader API with
 ChromeProjectHeaderConfig types (#259426)

## Summary

Introduces a unified `chrome.projectHeader.set(config)` API.

The new `ChromeProjectHeaderConfig` consolidates page identity (title,
metadata), global actions (edit, share, favorite), tabs, callouts, and
app menu into one structured config object. `get$` is internal-only,
consumed by Chrome layout components. State is owned by
`ProjectHeaderService` and automatically reset on app navigation.


### NOTE

The API is mostly auto-generated from the PRD. We just need to break
ground now and see what sticks.
---
 .../src/shared/chrome_hooks.ts                |  12 +++
 .../chrome/browser-internal-types/index.ts    |  11 ++
 .../browser-internal/src/chrome_api.tsx       |   3 +-
 .../browser-internal/src/chrome_service.tsx   |   5 +-
 .../project_header/project_header_service.ts  |  17 ++-
 .../src/side_effects/app_change_handler.ts    |   8 ++
 .../browser-mocks/src/chrome_service.mock.ts  |   3 +-
 src/core/packages/chrome/browser/index.ts     |   5 +
 .../packages/chrome/browser/src/contracts.ts  |  15 ++-
 src/core/packages/chrome/browser/src/index.ts |   8 ++
 .../chrome/browser/src/project_header.ts      | 102 ++++++++++++++++++
 .../packages/chrome/feature-flags/moon.yml    |  55 ++++++++++
 .../chrome/layout/core-chrome-layout/moon.yml |   2 +
 13 files changed, 228 insertions(+), 18 deletions(-)
 create mode 100644 src/core/packages/chrome/browser/src/project_header.ts
 create mode 100644 src/core/packages/chrome/feature-flags/moon.yml

diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index d18a0b9c7b38e..9ee588644654b 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -17,6 +17,7 @@ import type {
   ChromeHelpMenuLink,
   ChromeNavControl,
   ChromeNavLink,
+  ChromeProjectHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
@@ -279,3 +280,14 @@ export function useHasAppMenu(): boolean {
   const hasAppMenuConfig = useHasAppMenuConfig();
   return hasLegacyActionMenu || hasAppMenuConfig;
 }
+
+/**
+ * Returns the current project header configuration set via
+ * `chrome.projectHeader.set()`, or `undefined` if not set.
+ * Used by Chrome-Next top bar components.
+ */
+export function useProjectHeader(): ChromeProjectHeaderConfig | undefined {
+  const chrome = useChromeService();
+  const config$ = useMemo(() => chrome.projectHeader.get$(), [chrome]);
+  return useObservable(config$, undefined);
+}
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index 6b339db60594f..a4eed585080e5 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -15,6 +15,7 @@ import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeBreadcrumbsAppendExtension,
+  ChromeProjectHeaderConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -104,4 +105,14 @@ export interface InternalChromeStart extends ChromeStart {
       params?: Partial<ChromeSetProjectBreadcrumbsParams>
     ): void;
   };
+
+  /** @internal Extends the public projectHeader with `get$` for Chrome layout components. */
+  projectHeader: ChromeStart['projectHeader'] & {
+    /**
+     * Get an observable of the current project header configuration.
+     * Used by Chrome-Next layout components to render the title area,
+     * global actions, and app menu.
+     */
+    get$(): Observable<ChromeProjectHeaderConfig | undefined>;
+  };
 }
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 20cb3c3ac188c..2840ad4ae2d3d 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -172,7 +172,8 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
 
     // Project Header
     projectHeader: {
-      setAppMenu: services.projectHeader.setAppMenu,
+      get$: services.projectHeader.get$,
+      set: services.projectHeader.set,
     },
 
     sidebar,
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
index 2a54ee4c48dc6..59e64d4ba4225 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
@@ -167,9 +167,7 @@ export class ChromeService {
       chromeBreadcrumbs$: state.breadcrumbs.classic.$,
     });
 
-    const projectHeader = this.projectHeader.start({
-      setAppMenu: state.appMenu.set,
-    });
+    const projectHeader = this.projectHeader.start();
 
     const sidebar = this.sidebar.start();
 
@@ -179,6 +177,7 @@ export class ChromeService {
       stop$: this.stop$,
       state,
       docTitle,
+      projectHeader,
     });
 
     // 6. Return chrome API
diff --git a/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts b/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
index 2da1f5838a9a3..5d643a979118f 100644
--- a/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
+++ b/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
@@ -7,21 +7,20 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
 import { ReplaySubject } from 'rxjs';
-
-interface StartDeps {
-  setAppMenu: (config?: AppMenuConfigNext) => void;
-}
+import type { ChromeProjectHeaderConfig } from '@kbn/core-chrome-browser';
+import { createState } from '../../state/state_helpers';
 
 export class ProjectHeaderService {
   private readonly stop$ = new ReplaySubject<void>(1);
+  private readonly config = createState<ChromeProjectHeaderConfig | undefined>(undefined);
 
-  public start({ setAppMenu }: StartDeps) {
+  public start() {
     return {
-      setAppMenu: (config?: AppMenuConfigNext) => {
-        setAppMenu(config);
-      },
+      get$: () => this.config.$,
+      set: (value?: ChromeProjectHeaderConfig) => this.config.set(value),
+      /** @internal Reset to initial state (e.g. on app change). */
+      reset: () => this.config.set(undefined),
     };
   }
 
diff --git a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
index 8c9f499d04931..59dd7ba151e80 100644
--- a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
+++ b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
@@ -11,12 +11,16 @@ import type { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs';
 import type { ChromeDocTitle } from '@kbn/core-chrome-browser';
 import type { ChromeState } from '../state/chrome_state';
+import type { ProjectHeaderService } from '../services/project_header';
+
+type ProjectHeaderStart = ReturnType<ProjectHeaderService['start']>;
 
 export interface AppChangeHandlerDeps {
   currentAppId$: Observable<string | undefined>;
   stop$: Observable<void>;
   state: ChromeState;
   docTitle: ChromeDocTitle;
+  projectHeader: ProjectHeaderStart;
 }
 
 /**
@@ -28,6 +32,7 @@ export function setupAppChangeHandler({
   stop$,
   state,
   docTitle,
+  projectHeader,
 }: AppChangeHandlerDeps): void {
   currentAppId$.pipe(takeUntil(stop$)).subscribe(() => {
     // Reset UI elements
@@ -43,5 +48,8 @@ export function setupAppChangeHandler({
 
     // Reset document title
     docTitle.reset();
+
+    // Reset Chrome-Next project header
+    projectHeader.reset();
   });
 }
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index ca60cde816e75..bdfc1abf92c9e 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -99,7 +99,8 @@ const createStartContractMock = () => {
       getProjectHome$: jest.fn().mockReturnValue(of('/')),
     }),
     projectHeader: lazyObject({
-      setAppMenu: jest.fn(),
+      get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
+      set: jest.fn(),
     }),
     setGlobalFooter: jest.fn(),
     getGlobalFooter$: jest.fn().mockReturnValue(new BehaviorSubject(null)),
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index dc1a6ddf8ad9b..9c66bf3926540 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -55,4 +55,9 @@ export type {
   SidebarAppDefinition,
   SidebarSetup,
   SidebarStart,
+  ChromeProjectHeaderConfig,
+  ChromeProjectHeaderMetadataItem,
+  ChromeProjectHeaderGlobalActions,
+  ChromeProjectHeaderTab,
+  ChromeProjectHeaderCallout,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 4c9fd6827d9b5..4a3cb6c3eba41 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -9,7 +9,8 @@
 
 import type { ReactNode } from 'react';
 import type { Observable } from 'rxjs';
-import type { AppMenuConfig, AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import type { ChromeProjectHeaderConfig } from './project_header';
 import type { ChromeNavLink, ChromeNavLinks } from './nav_links';
 import type { ChromeRecentlyAccessed } from './recently_accessed';
 import type { ChromeDocTitle } from './doc_title';
@@ -323,13 +324,19 @@ export interface ChromeStart {
   getActiveSolutionNavId(): SolutionId | null;
 
   /**
-   * APIs for the project header.
+   * APIs for the Chrome-controlled project header (Chrome-Next).
+   * Provides a unified configuration surface for page identity, global
+   * actions, and app menu — all rendered by Chrome rather than by individual apps.
    */
   projectHeader: {
     /**
-     * Set the app menu configuration for the current application.
+     * Set the project header configuration for the current page.
+     * Chrome renders the title, metadata, global actions, and app menu.
+     *
+     * Pass `undefined` to clear (e.g. on unmount or route change).
+     * Automatically cleared on app change.
      */
-    setAppMenu(config?: AppMenuConfigNext): void;
+    set(config?: ChromeProjectHeaderConfig): void;
   };
 
   /**
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index d6bc9dcaa484d..1ce6b4e67f1be 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -59,3 +59,11 @@ export type {
   SidebarSetup,
   SidebarStart,
 } from './sidebar';
+
+export type {
+  ChromeProjectHeaderConfig,
+  ChromeProjectHeaderMetadataItem,
+  ChromeProjectHeaderGlobalActions,
+  ChromeProjectHeaderTab,
+  ChromeProjectHeaderCallout,
+} from './project_header';
diff --git a/src/core/packages/chrome/browser/src/project_header.ts b/src/core/packages/chrome/browser/src/project_header.ts
new file mode 100644
index 0000000000000..0d82f550a02a7
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/project_header.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
+
+/**
+ * Unified configuration for the Chrome-controlled project header.
+ * Apps provide structured data via `chrome.projectHeader.set(config)`;
+ * Chrome renders title area, global actions, and app menu.
+ */
+export interface ChromeProjectHeaderConfig {
+  /**
+   * Page title displayed in the Chrome-controlled header.
+   * Can be the app name (e.g. "Discover") or a viewed object
+   * (e.g. a saved dashboard name). Single-line, truncated by Chrome if too long.
+   */
+  title: string;
+
+  /**
+   * Optional metadata badges/text rendered below the title.
+   * E.g. "Managed", "Read-only", creation date, severity.
+   * Limited to a single row; Chrome controls layout.
+   */
+  metadata?: ChromeProjectHeaderMetadataItem[];
+
+  /**
+   * Global object actions whose icon, label, and position are fixed by Chrome.
+   * Apps opt-in by providing handlers; they cannot change icon or order.
+   *
+   * Rendering order (fixed by Chrome): edit, share, favorite.
+   */
+  globalActions?: ChromeProjectHeaderGlobalActions;
+
+  /**
+   * Optional tabs rendered as part of the header.
+   * When provided, increases the top bar height dynamically.
+   */
+  tabs?: ChromeProjectHeaderTab[];
+
+  /**
+   * Optional single callout rendered below the title/tabs area.
+   * Only one callout at a time. Chrome controls styling.
+   */
+  callout?: ChromeProjectHeaderCallout;
+
+  /**
+   * App menu (toolbar actions). Items, primary action, secondary action.
+   * TODO: Consider strict type independent from `@kbn/core-chrome-app-menu-components`
+   */
+  appMenu?: AppMenuConfigNext;
+}
+
+export interface ChromeProjectHeaderMetadataItem {
+  label: string;
+  type: 'badge' | 'text';
+  /** Badge color (EUI badge color). Only used when type is 'badge'. */
+  color?: string;
+  tooltip?: string;
+}
+
+/**
+ * Global actions whose icon, label, and position are fixed by Chrome.
+ * Apps provide only the behavioral handlers.
+ */
+export interface ChromeProjectHeaderGlobalActions {
+  /** Edit action. Chrome renders a pencil icon next to the title. */
+  edit?: {
+    onClick: () => void;
+  };
+  /** Share action. Chrome renders a share icon. */
+  share?: {
+    onClick: () => void;
+  };
+  /** Favorite/star action. Chrome renders a star icon. */
+  favorite?: {
+    isFavorited: boolean;
+    onClick: () => void;
+  };
+}
+
+export interface ChromeProjectHeaderTab {
+  id: string;
+  label: string;
+  isSelected?: boolean;
+  onClick: () => void;
+  /** Optional badge count on the tab */
+  badge?: number;
+}
+
+export interface ChromeProjectHeaderCallout {
+  title: string;
+  color: 'primary' | 'warning' | 'danger' | 'success';
+  text?: string;
+  /** When provided, renders a dismiss button */
+  onDismiss?: () => void;
+}
diff --git a/src/core/packages/chrome/feature-flags/moon.yml b/src/core/packages/chrome/feature-flags/moon.yml
new file mode 100644
index 0000000000000..029baef19cd36
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/moon.yml
@@ -0,0 +1,55 @@
+# This file is generated by the @kbn/moon package. Any manual edits will be erased!
+#  To extend this, write your extensions/overrides to 'moon.extend.yml'
+#  then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/core-chrome-feature-flags'
+
+$schema: https://moonrepo.dev/schemas/project.json
+id: '@kbn/core-chrome-feature-flags'
+layer: unknown
+owners:
+  defaultOwner: '@elastic/appex-sharedux'
+toolchains:
+  default: node
+language: typescript
+project:
+  title: '@kbn/core-chrome-feature-flags'
+  description: Moon project for @kbn/core-chrome-feature-flags
+  channel: ''
+  owner: '@elastic/appex-sharedux'
+  sourceRoot: src/core/packages/chrome/feature-flags
+dependsOn:
+  - '@kbn/core-feature-flags-browser'
+tags:
+  - shared-browser
+  - package
+  - prod
+  - group-platform
+  - shared
+  - jest-unit-tests
+fileGroups:
+  src:
+    - '**/*.ts'
+    - '**/*.tsx'
+    - '!target/**/*'
+tasks:
+  jest:
+    command: node
+    args:
+      - '--no-experimental-require-module'
+      - $workspaceRoot/scripts/jest
+      - '--config'
+      - $projectRoot/jest.config.js
+    options:
+      runFromWorkspaceRoot: true
+    inputs:
+      - '@group(src)'
+  jestCI:
+    command: node
+    args:
+      - '--no-experimental-require-module'
+      - $workspaceRoot/scripts/jest
+      - '--config'
+      - $projectRoot/jest.config.js
+    options:
+      runFromWorkspaceRoot: true
+    inputs:
+      - '@group(src)'
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/moon.yml b/src/core/packages/chrome/layout/core-chrome-layout/moon.yml
index a8e2ed5cea9fc..bd8f9d79c1f65 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/moon.yml
+++ b/src/core/packages/chrome/layout/core-chrome-layout/moon.yml
@@ -27,6 +27,8 @@ dependsOn:
   - '@kbn/core-chrome-layout-constants'
   - '@kbn/core-chrome-browser-components'
   - '@kbn/core-chrome-browser-hooks'
+  - '@kbn/core-feature-flags-browser'
+  - '@kbn/core-chrome-feature-flags'
 tags:
   - shared-browser
   - package

From 69815c68c4113285a33dd934682e8221e30fe9aa Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 25 Mar 2026 13:11:04 +0100
Subject: [PATCH 04/77] [Chrome Next] Basic title and menu (#259544)

## Summary

<img width="1624" height="1056" alt="Screenshot 2026-03-25 at 12 08 38"
src="https://github.com/user-attachments/assets/4dec64b8-c55d-4df9-a362-8a82f27ed6c4"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../src/application_service.tsx               |  9 ++-
 .../src/application_service.mock.ts           |  2 +
 .../application/browser/src/contracts.ts      |  7 ++
 .../chrome/browser-components/index.ts        |  1 +
 .../chrome/browser-components/src/context.tsx |  2 +-
 .../src/project_next/app_menu.tsx             | 53 +++++++++++++
 .../src/project_next/header.tsx               | 52 +++++++++++++
 .../src/project_next/hooks/index.ts           | 13 ++++
 .../project_next/hooks/use_project_header.ts  | 24 ++++++
 .../hooks/use_project_next_app_menu.ts        | 22 ++++++
 .../hooks/use_report_top_bar_height.ts        | 62 ++++++++++++++++
 .../src/project_next/hooks/use_title.test.tsx | 74 +++++++++++++++++++
 .../src/project_next/hooks/use_title.ts       | 23 ++++++
 .../src/project_next/index.ts                 | 10 +++
 .../src/shared/chrome_hooks.ts                | 12 ---
 .../chrome/browser-components/tsconfig.json   |  1 +
 .../layouts/grid/grid_layout.tsx              |  8 +-
 17 files changed, 357 insertions(+), 18 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/header.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/index.ts

diff --git a/src/core/packages/application/browser-internal/src/application_service.tsx b/src/core/packages/application/browser-internal/src/application_service.tsx
index 583b9914e50fd..c477f4ceea0bc 100644
--- a/src/core/packages/application/browser-internal/src/application_service.tsx
+++ b/src/core/packages/application/browser-internal/src/application_service.tsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import { flushSync } from 'react-dom';
 import { BehaviorSubject, firstValueFrom, type Observable, Subject, type Subscription } from 'rxjs';
-import { map, shareReplay, takeUntil, distinctUntilChanged, filter, take } from 'rxjs';
+import { map, shareReplay, switchMap, takeUntil, distinctUntilChanged, filter, take } from 'rxjs';
 import type { History } from 'history';
 import { createBrowserHistory } from 'history';
 
@@ -330,6 +330,13 @@ export class ApplicationService {
         distinctUntilChanged(),
         takeUntil(this.stop$)
       ),
+      currentAppTitle$: this.currentAppId$.pipe(
+        filter((appId) => appId !== undefined),
+        distinctUntilChanged(),
+        switchMap((appId) => applications$.pipe(map((apps) => apps.get(appId)?.title))),
+        distinctUntilChanged(),
+        takeUntil(this.stop$)
+      ),
       currentActionMenu$: this.currentActionMenu$.pipe(
         distinctUntilChanged(),
         takeUntil(this.stop$)
diff --git a/src/core/packages/application/browser-mocks/src/application_service.mock.ts b/src/core/packages/application/browser-mocks/src/application_service.mock.ts
index 31951853011e6..cf0d0e6aec5f4 100644
--- a/src/core/packages/application/browser-mocks/src/application_service.mock.ts
+++ b/src/core/packages/application/browser-mocks/src/application_service.mock.ts
@@ -49,6 +49,7 @@ const createStartContractMock = (): jest.Mocked<ApplicationStart> => {
   return lazyObject({
     applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(new Map()),
     currentAppId$: currentAppId$.asObservable(),
+    currentAppTitle$: new BehaviorSubject<string | undefined>(undefined),
     currentLocation$: currentLocation$.asObservable(),
     capabilities: capabilitiesServiceMock.createStartContract().capabilities,
     navigateToApp: jest.fn(),
@@ -92,6 +93,7 @@ const createInternalStartContractMock = (
     applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(new Map()),
     capabilities: capabilitiesServiceMock.createStartContract().capabilities,
     currentAppId$: currentAppId$.asObservable(),
+    currentAppTitle$: new BehaviorSubject<string | undefined>(undefined),
     currentLocation$: currentLocation$.asObservable(),
     currentActionMenu$: new BehaviorSubject<MountPoint | undefined>(undefined),
     getComponent: jest.fn(),
diff --git a/src/core/packages/application/browser/src/contracts.ts b/src/core/packages/application/browser/src/contracts.ts
index caa336c1b37d2..827b498ddeab1 100644
--- a/src/core/packages/application/browser/src/contracts.ts
+++ b/src/core/packages/application/browser/src/contracts.ts
@@ -152,6 +152,13 @@ export interface ApplicationStart {
    */
   currentAppId$: Observable<string | undefined>;
 
+  /**
+   * An observable that emits the title of the currently mounted application.
+   * Derived from {@link ApplicationStart.currentAppId$ | currentAppId$} and
+   * {@link ApplicationStart.applications$ | applications$}.
+   */
+  currentAppTitle$: Observable<string | undefined>;
+
   /**
    * An observable that emits the current path#hash and each subsequent update using the global history instance
    */
diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 0363b8818bb99..23a63c5679c71 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -12,6 +12,7 @@ export type { ChromeComponentsDeps } from './src/context';
 
 export { ClassicHeader } from './src/classic';
 export { ProjectHeader } from './src/project';
+export { ProjectNextHeader } from './src/project_next';
 export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_sidenav';
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
diff --git a/src/core/packages/chrome/browser-components/src/context.tsx b/src/core/packages/chrome/browser-components/src/context.tsx
index c9c584e400601..1f77579dac6b4 100644
--- a/src/core/packages/chrome/browser-components/src/context.tsx
+++ b/src/core/packages/chrome/browser-components/src/context.tsx
@@ -17,7 +17,7 @@ import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
 export interface ChromeComponentsDeps {
   application: Pick<
     InternalApplicationStart,
-    'navigateToUrl' | 'currentAppId$' | 'currentActionMenu$'
+    'navigateToUrl' | 'currentAppId$' | 'currentAppTitle$' | 'currentActionMenu$'
   >;
   http: Pick<HttpStart, 'basePath' | 'getLoadingCount$'>;
   docLinks: DocLinksStart;
diff --git a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx b/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
new file mode 100644
index 0000000000000..5bea0717f4242
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+import React, { lazy, Suspense } from 'react';
+import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
+import { HeaderActionMenu } from '../shared/header_action_menu';
+import { useProjectNextAppMenu } from './hooks';
+
+const AppMenuComponent = lazy(async () => {
+  const { AppMenuComponent: Component } = await import('@kbn/core-chrome-app-menu-components');
+  return { default: Component };
+});
+
+const styles = css`
+  margin-left: auto;
+  flex-shrink: 0;
+`;
+
+/**
+ * Renders the app menu for the Chrome-Next project header.
+ * Fallback chain: merged AppMenuConfig -> legacy HeaderActionMenu -> nothing.
+ */
+export const ProjectNextAppMenu = React.memo(() => {
+  const appMenuConfig = useProjectNextAppMenu();
+  const hasLegacyActionMenu = useHasLegacyActionMenu();
+
+  if (appMenuConfig) {
+    return (
+      <div css={styles}>
+        <Suspense>
+          <AppMenuComponent config={appMenuConfig} />
+        </Suspense>
+      </div>
+    );
+  }
+
+  if (hasLegacyActionMenu) {
+    return (
+      <div css={styles}>
+        <HeaderActionMenu />
+      </div>
+    );
+  }
+
+  return null;
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/header.tsx b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
new file mode 100644
index 0000000000000..5c1bc404b6788
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useEuiTheme, type UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { useReportTopBarHeight, useTitle } from './hooks';
+import { ProjectNextAppMenu } from './app_menu';
+
+const useStyles = (euiTheme: UseEuiTheme['euiTheme']) =>
+  useMemo(() => {
+    const root = css`
+      display: flex;
+      align-items: center;
+      padding: ${euiTheme.size.s};
+      background: ${euiTheme.colors.backgroundBasePlain};
+      border-bottom: ${euiTheme.border.thin};
+      margin-bottom: -${euiTheme.border.width.thin};
+    `;
+
+    const title = css`
+      font-size: ${euiTheme.size.base};
+      font-weight: ${euiTheme.font.weight.semiBold};
+      line-height: ${euiTheme.size.l};
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+
+    return { root, title };
+  }, [euiTheme]);
+
+export const ProjectNextHeader = React.memo(() => {
+  const title = useTitle();
+  const { euiTheme } = useEuiTheme();
+  const styles = useStyles(euiTheme);
+  const heightRef = useReportTopBarHeight();
+
+  return (
+    <div ref={heightRef} css={styles.root} data-test-subj="chromeProjectNextHeader">
+      <h1 css={styles.title}>{title}</h1>
+      <ProjectNextAppMenu />
+    </div>
+  );
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
new file mode 100644
index 0000000000000..d6a179845c2b9
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { useProjectHeader } from './use_project_header';
+export { useTitle } from './use_title';
+export { useProjectNextAppMenu } from './use_project_next_app_menu';
+export { useReportTopBarHeight } from './use_report_top_bar_height';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts
new file mode 100644
index 0000000000000..309246fdffaa0
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useMemo } from 'react';
+import type { ChromeProjectHeaderConfig } from '@kbn/core-chrome-browser';
+import { useObservable } from '@kbn/use-observable';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+
+/**
+ * Returns the current project header configuration set via
+ * `chrome.projectHeader.set()`, or `undefined` if not set.
+ * Used by Chrome-Next top bar components.
+ */
+export function useProjectHeader(): ChromeProjectHeaderConfig | undefined {
+  const chrome = useChromeService();
+  const config$ = useMemo(() => chrome.projectHeader.get$(), [chrome]);
+  return useObservable(config$, undefined);
+}
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
new file mode 100644
index 0000000000000..def6921eadfdc
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
+import { useAppMenu } from '../../shared/chrome_hooks';
+import { useProjectHeader } from './use_project_header';
+
+/**
+ * Returns the app menu config for the Chrome-Next project header.
+ * Fallback: `config.appMenu` from `projectHeader.set()` -> global `chrome.getAppMenu$()`.
+ */
+export function useProjectNextAppMenu(): AppMenuConfigNext | undefined {
+  const config = useProjectHeader();
+  const globalAppMenu = useAppMenu();
+  return config?.appMenu ?? globalAppMenu;
+}
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts
new file mode 100644
index 0000000000000..046223bcef46a
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useCallback, useRef, useEffect } from 'react';
+import { useLayoutUpdate } from '@kbn/core-chrome-layout-components';
+
+/**
+ * Measures the height of the application top bar via ResizeObserver and
+ * reports it to the layout system through `useLayoutUpdate`.
+ *
+ * Returns a ref callback to attach to the top bar root element.
+ * Reports `0` when the element is removed or on unmount.
+ */
+export const useReportTopBarHeight = (): ((node: HTMLElement | null) => void) => {
+  const updateLayout = useLayoutUpdate();
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const lastHeightRef = useRef<number>(0);
+
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+      updateLayout({ applicationTopBarHeight: 0 });
+    };
+  }, [updateLayout]);
+
+  const refCallback = useCallback(
+    (node: HTMLElement | null) => {
+      observerRef.current?.disconnect();
+
+      if (!node) {
+        if (lastHeightRef.current !== 0) {
+          lastHeightRef.current = 0;
+          updateLayout({ applicationTopBarHeight: 0 });
+        }
+        return;
+      }
+
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+
+        const height = Math.round(entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height);
+        if (height !== lastHeightRef.current) {
+          lastHeightRef.current = height;
+          updateLayout({ applicationTopBarHeight: height });
+        }
+      });
+
+      observer.observe(node, { box: 'border-box' });
+      observerRef.current = observer;
+    },
+    [updateLayout]
+  );
+
+  return refCallback;
+};
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
new file mode 100644
index 0000000000000..b8d4d86140093
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import type { BehaviorSubject } from 'rxjs';
+import type { ChromeProjectHeaderConfig } from '@kbn/core-chrome-browser';
+import { createMockChromeComponentsDeps, TestChromeProviders } from '../../test_helpers';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { useTitle } from './use_title';
+
+describe('useTitle', () => {
+  it('returns the app title from currentAppTitle$', () => {
+    const deps = createMockChromeComponentsDeps();
+    (deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>).next('Discover');
+
+    const { result } = renderHook(() => useTitle(), {
+      wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
+    });
+
+    expect(result.current).toBe('Discover');
+  });
+
+  it('returns "Unknown" when no app title is available', () => {
+    const deps = createMockChromeComponentsDeps();
+
+    const { result } = renderHook(() => useTitle(), {
+      wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
+    });
+
+    expect(result.current).toBe('Unknown');
+  });
+
+  it('prefers projectHeader config title over app title', () => {
+    const deps = createMockChromeComponentsDeps();
+    (deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>).next('Dashboards');
+
+    const chrome = chromeServiceMock.createStartContract();
+    (chrome.projectHeader.get$() as BehaviorSubject<ChromeProjectHeaderConfig | undefined>).next({
+      title: 'My Dashboard',
+    });
+
+    const { result } = renderHook(() => useTitle(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toBe('My Dashboard');
+  });
+
+  it('updates when currentAppTitle$ emits a new value', () => {
+    const deps = createMockChromeComponentsDeps();
+    const title$ = deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>;
+    title$.next('Dashboard');
+
+    const { result } = renderHook(() => useTitle(), {
+      wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
+    });
+
+    expect(result.current).toBe('Dashboard');
+
+    act(() => title$.next('Discover'));
+    expect(result.current).toBe('Discover');
+  });
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
new file mode 100644
index 0000000000000..10749b7b2c376
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useObservable } from '@kbn/use-observable';
+import { useChromeComponentsDeps } from '../../context';
+import { useProjectHeader } from './use_project_header';
+
+/**
+ * Returns the display title for the Chrome-Next project header.
+ * Fallback chain: explicit `config.title` -> current app title -> 'Unknown'.
+ */
+export function useTitle(): string {
+  const config = useProjectHeader();
+  const { application } = useChromeComponentsDeps();
+  const appTitle = useObservable(application.currentAppTitle$, undefined);
+  return config?.title ?? appTitle ?? 'Unknown';
+}
diff --git a/src/core/packages/chrome/browser-components/src/project_next/index.ts b/src/core/packages/chrome/browser-components/src/project_next/index.ts
new file mode 100644
index 0000000000000..1743a03c9c3b0
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { ProjectNextHeader } from './header';
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index 9ee588644654b..d18a0b9c7b38e 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -17,7 +17,6 @@ import type {
   ChromeHelpMenuLink,
   ChromeNavControl,
   ChromeNavLink,
-  ChromeProjectHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
@@ -280,14 +279,3 @@ export function useHasAppMenu(): boolean {
   const hasAppMenuConfig = useHasAppMenuConfig();
   return hasLegacyActionMenu || hasAppMenuConfig;
 }
-
-/**
- * Returns the current project header configuration set via
- * `chrome.projectHeader.set()`, or `undefined` if not set.
- * Used by Chrome-Next top bar components.
- */
-export function useProjectHeader(): ChromeProjectHeaderConfig | undefined {
-  const chrome = useChromeService();
-  const config$ = useMemo(() => chrome.projectHeader.get$(), [chrome]);
-  return useObservable(config$, undefined);
-}
diff --git a/src/core/packages/chrome/browser-components/tsconfig.json b/src/core/packages/chrome/browser-components/tsconfig.json
index 38dc478cc1910..35b90a152ab61 100644
--- a/src/core/packages/chrome/browser-components/tsconfig.json
+++ b/src/core/packages/chrome/browser-components/tsconfig.json
@@ -46,5 +46,6 @@
     "@kbn/shared-ux-label-formatter",
     "@kbn/test-jest-helpers",
     "@kbn/use-observable",
+    "@kbn/core-chrome-layout-components",
   ]
 }
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index 96d117a86ae7f..6bf80f3da59a8 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -15,6 +15,7 @@ import {
   ChromeComponentsProvider,
   ClassicHeader,
   ProjectHeader,
+  ProjectNextHeader,
   GridLayoutProjectSideNav,
   HeaderTopBanner,
   ChromelessHeader,
@@ -68,9 +69,8 @@ const layoutConfigs: {
     headerHeight: 0,
     bannerHeight: 32,
 
-    /** The application top bar renders the app specific menu */
-    /** we use it only in project style, because in classic it is included as part of the global header */
-    applicationTopBarHeight: 48,
+    /** Height is reported dynamically by ProjectNextHeader via useReportLayoutHeight */
+    applicationTopBarHeight: 0,
     applicationMarginRight: 8,
     applicationMarginBottom: 8,
     sidebarWidth: 0,
@@ -124,7 +124,7 @@ const useChromeSlots = (nextChrome: boolean): ChromeSlots => {
     return {
       ...base,
       navigation: <GridLayoutProjectSideNav />,
-      applicationTopBar: <>Chrome Next...</>,
+      applicationTopBar: <ProjectNextHeader />,
     };
   }
 

From 34dfc0a995c6a269a21c76899ba0ee26a4be0c01 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 25 Mar 2026 14:01:43 +0100
Subject: [PATCH 05/77] [Chrome Next] add ai agent button; rename projectHeader
 -> next (#259567)

## Summary

<img width="1624" height="1056" alt="Screenshot 2026-03-25 at 13 33 18"
src="https://github.com/user-attachments/assets/eb6d3dab-02d8-40c3-89d1-d8be0a75b67f"
/>
---
 .../src/project_next/ai_button_slot.tsx       | 25 +++++++++++++
 .../src/project_next/hooks/index.ts           |  5 +--
 .../src/project_next/hooks/use_ai_button.ts   | 23 ++++++++++++
 .../src/shared/chrome_hooks.ts                | 12 ++++++
 .../chrome/browser-internal-types/index.ts    | 18 ++++-----
 .../browser-internal/src/chrome_api.tsx       | 19 ++++++----
 .../browser-internal/src/chrome_service.tsx   | 14 +++----
 .../{project_header => next_header}/index.ts  |  2 +-
 .../next_header_service.ts}                   |  8 ++--
 .../src/side_effects/app_change_handler.ts    | 12 +++---
 .../src/state/chrome_state.ts                 |  3 ++
 .../browser-mocks/src/chrome_service.mock.ts  | 12 ++++--
 src/core/packages/chrome/browser/index.ts     | 10 ++---
 .../packages/chrome/browser/src/contracts.ts  | 37 ++++++++++++-------
 src/core/packages/chrome/browser/src/index.ts | 12 +++---
 .../src/{project_header.ts => next_header.ts} | 22 +++++------
 .../shared/agent_builder/public/plugin.tsx    |  8 ++++
 17 files changed, 165 insertions(+), 77 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
 rename src/core/packages/chrome/browser-internal/src/services/{project_header => next_header}/index.ts (87%)
 rename src/core/packages/chrome/browser-internal/src/services/{project_header/project_header_service.ts => next_header/next_header_service.ts} (76%)
 rename src/core/packages/chrome/browser/src/{project_header.ts => next_header.ts} (82%)

diff --git a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx b/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
new file mode 100644
index 0000000000000..489577b63482a
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { useAiButton } from './hooks';
+
+/**
+ * Renders the AI button in the Chrome-Next project header.
+ * The plugin owns the component; Chrome just places it in the slot.
+ */
+export const AiButtonSlot = React.memo(() => {
+  const node = useAiButton();
+
+  if (!node) {
+    return null;
+  }
+
+  return <>{node}</>;
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
index d6a179845c2b9..e85302f90fc89 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
@@ -7,7 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { useProjectHeader } from './use_project_header';
-export { useTitle } from './use_title';
-export { useProjectNextAppMenu } from './use_project_next_app_menu';
-export { useReportTopBarHeight } from './use_report_top_bar_height';
+export { useAiButton } from './use_ai_button';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
new file mode 100644
index 0000000000000..46ada8f9ce7cf
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { useObservable } from '@kbn/use-observable';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+
+/**
+ * Returns the AI button ReactNode set via `chrome.next.aiButton.set()`,
+ * or `undefined` if not set. Used by the Chrome-Next header.
+ */
+export function useAiButton(): ReactNode | undefined {
+  const chrome = useChromeService();
+  const node$ = useMemo(() => chrome.next.aiButton.get$(), [chrome]);
+  return useObservable(node$, undefined);
+}
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index d18a0b9c7b38e..71a73ec7ce4a4 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -17,6 +17,7 @@ import type {
   ChromeHelpMenuLink,
   ChromeNavControl,
   ChromeNavLink,
+  ChromeNextHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
@@ -279,3 +280,14 @@ export function useHasAppMenu(): boolean {
   const hasAppMenuConfig = useHasAppMenuConfig();
   return hasLegacyActionMenu || hasAppMenuConfig;
 }
+
+/**
+ * Returns the current Chrome-Next header configuration set via
+ * `chrome.next.header.set()`, or `undefined` if not set.
+ * Used by Chrome-Next top bar components.
+ */
+export function useNextHeader(): ChromeNextHeaderConfig | undefined {
+  const chrome = useChromeService();
+  const config$ = useMemo(() => chrome.next.header.get$(), [chrome]);
+  return useObservable(config$, undefined);
+}
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index a4eed585080e5..fd688bcc0e8f9 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -15,7 +15,7 @@ import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeBreadcrumbsAppendExtension,
-  ChromeProjectHeaderConfig,
+  ChromeNextHeaderConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -106,13 +106,13 @@ export interface InternalChromeStart extends ChromeStart {
     ): void;
   };
 
-  /** @internal Extends the public projectHeader with `get$` for Chrome layout components. */
-  projectHeader: ChromeStart['projectHeader'] & {
-    /**
-     * Get an observable of the current project header configuration.
-     * Used by Chrome-Next layout components to render the title area,
-     * global actions, and app menu.
-     */
-    get$(): Observable<ChromeProjectHeaderConfig | undefined>;
+  /** @internal Extends public `next` with `get$` for Chrome layout components. */
+  next: ChromeStart['next'] & {
+    header: ChromeStart['next']['header'] & {
+      get$(): Observable<ChromeNextHeaderConfig | undefined>;
+    };
+    aiButton: ChromeStart['next']['aiButton'] & {
+      get$(): Observable<ReactNode | undefined>;
+    };
   };
 }
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 2840ad4ae2d3d..b9e797727f314 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -18,13 +18,13 @@ import type { ChromeState } from './state/chrome_state';
 import type { NavControlsService } from './services/nav_controls';
 import type { NavLinksService } from './services/nav_links';
 import type { ProjectNavigationService } from './services/project_navigation';
-import type { ProjectHeaderService } from './services/project_header';
+import type { NextHeaderService } from './services/next_header';
 import type { DocTitleService } from './services/doc_title';
 
 type NavControlsStart = ReturnType<NavControlsService['start']>;
 type NavLinksStart = ReturnType<NavLinksService['start']>;
 type ProjectNavigationStart = ReturnType<ProjectNavigationService['start']>;
-type ProjectHeaderStart = ReturnType<ProjectHeaderService['start']>;
+type NextHeaderStart = ReturnType<NextHeaderService['start']>;
 type DocTitleStart = ReturnType<DocTitleService['start']>;
 type RecentlyAccessedStart = ReturnType<RecentlyAccessedService['start']>;
 
@@ -36,7 +36,7 @@ export interface ChromeApiDeps {
     recentlyAccessed: RecentlyAccessedStart;
     docTitle: DocTitleStart;
     projectNavigation: ProjectNavigationStart;
-    projectHeader: ProjectHeaderStart;
+    nextHeader: NextHeaderStart;
   };
   sidebar: SidebarStart;
 }
@@ -170,10 +170,15 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
     getActiveSolutionNavId: () => projectNavigation.getActiveSolutionNavId(),
     project,
 
-    // Project Header
-    projectHeader: {
-      get$: services.projectHeader.get$,
-      set: services.projectHeader.set,
+    next: {
+      header: {
+        get$: services.nextHeader.get$,
+        set: services.nextHeader.set,
+      },
+      aiButton: {
+        get$: () => state.aiButton.$,
+        set: state.aiButton.set,
+      },
     },
 
     sidebar,
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
index 59e64d4ba4225..0086de3da4623 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
@@ -30,7 +30,7 @@ import { DocTitleService } from './services/doc_title';
 import { NavControlsService } from './services/nav_controls';
 import { NavLinksService } from './services/nav_links';
 import { ProjectNavigationService } from './services/project_navigation';
-import { ProjectHeaderService } from './services/project_header';
+import { NextHeaderService } from './services/next_header';
 import { registerAnalyticsContextProvider } from './register_analytics_context_provider';
 import type { InternalChromeSetup, InternalChromeStart } from './types';
 import { createChromeState } from './state';
@@ -76,7 +76,7 @@ export class ChromeService {
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
   private readonly projectNavigation: ProjectNavigationService;
-  private readonly projectHeader: ProjectHeaderService;
+  private readonly nextHeader: NextHeaderService;
   private readonly sidebar: SidebarService;
   private readonly logger: Logger;
   private readonly isServerless: boolean;
@@ -85,7 +85,7 @@ export class ChromeService {
     this.logger = params.coreContext.logger.get('chrome-browser');
     this.isServerless = params.coreContext.env.packageInfo.buildFlavor === 'serverless';
     this.projectNavigation = new ProjectNavigationService(this.isServerless);
-    this.projectHeader = new ProjectHeaderService();
+    this.nextHeader = new NextHeaderService();
     this.sidebar = new SidebarService({ basePath: params.basePath });
   }
 
@@ -167,7 +167,7 @@ export class ChromeService {
       chromeBreadcrumbs$: state.breadcrumbs.classic.$,
     });
 
-    const projectHeader = this.projectHeader.start();
+    const nextHeaderStart = this.nextHeader.start();
 
     const sidebar = this.sidebar.start();
 
@@ -177,7 +177,7 @@ export class ChromeService {
       stop$: this.stop$,
       state,
       docTitle,
-      projectHeader,
+      nextHeader: nextHeaderStart,
     });
 
     // 6. Return chrome API
@@ -189,7 +189,7 @@ export class ChromeService {
         recentlyAccessed,
         docTitle,
         projectNavigation,
-        projectHeader,
+        nextHeader: nextHeaderStart,
       },
       sidebar,
     });
@@ -201,7 +201,7 @@ export class ChromeService {
     this.navControls.stop();
     this.navLinks.stop();
     this.projectNavigation.stop();
-    this.projectHeader.stop();
+    this.nextHeader.stop();
     this.sidebar.stop();
     this.stop$.next();
   }
diff --git a/src/core/packages/chrome/browser-internal/src/services/project_header/index.ts b/src/core/packages/chrome/browser-internal/src/services/next_header/index.ts
similarity index 87%
rename from src/core/packages/chrome/browser-internal/src/services/project_header/index.ts
rename to src/core/packages/chrome/browser-internal/src/services/next_header/index.ts
index 3dfb5d216fb89..e4f9347526f4e 100644
--- a/src/core/packages/chrome/browser-internal/src/services/project_header/index.ts
+++ b/src/core/packages/chrome/browser-internal/src/services/next_header/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ProjectHeaderService } from './project_header_service';
+export { NextHeaderService } from './next_header_service';
diff --git a/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts b/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
similarity index 76%
rename from src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
rename to src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
index 5d643a979118f..488502d43c280 100644
--- a/src/core/packages/chrome/browser-internal/src/services/project_header/project_header_service.ts
+++ b/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
@@ -8,17 +8,17 @@
  */
 
 import { ReplaySubject } from 'rxjs';
-import type { ChromeProjectHeaderConfig } from '@kbn/core-chrome-browser';
+import type { ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
 import { createState } from '../../state/state_helpers';
 
-export class ProjectHeaderService {
+export class NextHeaderService {
   private readonly stop$ = new ReplaySubject<void>(1);
-  private readonly config = createState<ChromeProjectHeaderConfig | undefined>(undefined);
+  private readonly config = createState<ChromeNextHeaderConfig | undefined>(undefined);
 
   public start() {
     return {
       get$: () => this.config.$,
-      set: (value?: ChromeProjectHeaderConfig) => this.config.set(value),
+      set: (value?: ChromeNextHeaderConfig) => this.config.set(value),
       /** @internal Reset to initial state (e.g. on app change). */
       reset: () => this.config.set(undefined),
     };
diff --git a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
index 59dd7ba151e80..f9b72f7ed230d 100644
--- a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
+++ b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
@@ -11,16 +11,16 @@ import type { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs';
 import type { ChromeDocTitle } from '@kbn/core-chrome-browser';
 import type { ChromeState } from '../state/chrome_state';
-import type { ProjectHeaderService } from '../services/project_header';
+import type { NextHeaderService } from '../services/next_header';
 
-type ProjectHeaderStart = ReturnType<ProjectHeaderService['start']>;
+type NextHeaderStart = ReturnType<NextHeaderService['start']>;
 
 export interface AppChangeHandlerDeps {
   currentAppId$: Observable<string | undefined>;
   stop$: Observable<void>;
   state: ChromeState;
   docTitle: ChromeDocTitle;
-  projectHeader: ProjectHeaderStart;
+  nextHeader: NextHeaderStart;
 }
 
 /**
@@ -32,7 +32,7 @@ export function setupAppChangeHandler({
   stop$,
   state,
   docTitle,
-  projectHeader,
+  nextHeader,
 }: AppChangeHandlerDeps): void {
   currentAppId$.pipe(takeUntil(stop$)).subscribe(() => {
     // Reset UI elements
@@ -49,7 +49,7 @@ export function setupAppChangeHandler({
     // Reset document title
     docTitle.reset();
 
-    // Reset Chrome-Next project header
-    projectHeader.reset();
+    // Reset Chrome-Next header config (AI button is global and not cleared here)
+    nextHeader.reset();
   });
 }
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 918e0e1897a6c..4084d3645818b 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -64,6 +64,7 @@ export interface ChromeState {
   globalFooter: State<ReactNode>;
   customNavLink: State<ChromeNavLink | undefined>;
   appMenu: State<AppMenuConfig | undefined>;
+  aiButton: State<ReactNode>;
 
   /** Help system */
   help: {
@@ -107,6 +108,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
 
   // UI Elements (not reset on app change)
   const globalFooter = createState<ReactNode>(null);
+  const aiButton = createState<ReactNode>(undefined);
   const customNavLink = createState<ChromeNavLink | undefined>(undefined);
 
   // Help System
@@ -130,6 +132,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
     },
     headerBanner,
     globalFooter,
+    aiButton,
     customNavLink,
     appMenu,
     help: {
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index bdfc1abf92c9e..069bd2f5018f7 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -98,9 +98,15 @@ const createStartContractMock = () => {
       getNavigation$: jest.fn().mockReturnValue(new BehaviorSubject({} as any)),
       getProjectHome$: jest.fn().mockReturnValue(of('/')),
     }),
-    projectHeader: lazyObject({
-      get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
-      set: jest.fn(),
+    next: lazyObject({
+      header: lazyObject({
+        get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
+        set: jest.fn(),
+      }),
+      aiButton: lazyObject({
+        get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
+        set: jest.fn(),
+      }),
     }),
     setGlobalFooter: jest.fn(),
     getGlobalFooter$: jest.fn().mockReturnValue(new BehaviorSubject(null)),
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index 9c66bf3926540..86a28a77de342 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -55,9 +55,9 @@ export type {
   SidebarAppDefinition,
   SidebarSetup,
   SidebarStart,
-  ChromeProjectHeaderConfig,
-  ChromeProjectHeaderMetadataItem,
-  ChromeProjectHeaderGlobalActions,
-  ChromeProjectHeaderTab,
-  ChromeProjectHeaderCallout,
+  ChromeNextHeaderConfig,
+  ChromeNextHeaderMetadataItem,
+  ChromeNextHeaderGlobalActions,
+  ChromeNextHeaderTab,
+  ChromeNextHeaderCallout,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 4a3cb6c3eba41..6630fc272b756 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -10,7 +10,7 @@
 import type { ReactNode } from 'react';
 import type { Observable } from 'rxjs';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
-import type { ChromeProjectHeaderConfig } from './project_header';
+import type { ChromeNextHeaderConfig } from './next_header';
 import type { ChromeNavLink, ChromeNavLinks } from './nav_links';
 import type { ChromeRecentlyAccessed } from './recently_accessed';
 import type { ChromeDocTitle } from './doc_title';
@@ -324,19 +324,28 @@ export interface ChromeStart {
   getActiveSolutionNavId(): SolutionId | null;
 
   /**
-   * APIs for the Chrome-controlled project header (Chrome-Next).
-   * Provides a unified configuration surface for page identity, global
-   * actions, and app menu — all rendered by Chrome rather than by individual apps.
-   */
-  projectHeader: {
-    /**
-     * Set the project header configuration for the current page.
-     * Chrome renders the title, metadata, global actions, and app menu.
-     *
-     * Pass `undefined` to clear (e.g. on unmount or route change).
-     * Automatically cleared on app change.
-     */
-    set(config?: ChromeProjectHeaderConfig): void;
+   * Chrome-Next APIs: header configuration, AI button slot, and future slots.
+   */
+  next: {
+    header: {
+      /**
+       * Set the Chrome-Next header configuration for the current page.
+       * Chrome renders the title, metadata, global actions, and app menu.
+       *
+       * Pass `undefined` to clear (e.g. on unmount or route change).
+       * Automatically cleared on app change.
+       */
+      set(config?: ChromeNextHeaderConfig): void;
+    };
+    aiButton: {
+      /**
+       * Set the AI button component for the Chrome-Next header.
+       * The plugin owns the full component (rendering, state, tooltips, shortcuts).
+       * Chrome renders it in a fixed slot at the far right of the header.
+       * Pass `undefined` to remove. Global — persists across app changes.
+       */
+      set(node?: ReactNode): void;
+    };
   };
 
   /**
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 1ce6b4e67f1be..2725c37168ac1 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -61,9 +61,9 @@ export type {
 } from './sidebar';
 
 export type {
-  ChromeProjectHeaderConfig,
-  ChromeProjectHeaderMetadataItem,
-  ChromeProjectHeaderGlobalActions,
-  ChromeProjectHeaderTab,
-  ChromeProjectHeaderCallout,
-} from './project_header';
+  ChromeNextHeaderConfig,
+  ChromeNextHeaderMetadataItem,
+  ChromeNextHeaderGlobalActions,
+  ChromeNextHeaderTab,
+  ChromeNextHeaderCallout,
+} from './next_header';
diff --git a/src/core/packages/chrome/browser/src/project_header.ts b/src/core/packages/chrome/browser/src/next_header.ts
similarity index 82%
rename from src/core/packages/chrome/browser/src/project_header.ts
rename to src/core/packages/chrome/browser/src/next_header.ts
index 0d82f550a02a7..73586c96c9a5d 100644
--- a/src/core/packages/chrome/browser/src/project_header.ts
+++ b/src/core/packages/chrome/browser/src/next_header.ts
@@ -10,11 +10,11 @@
 import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
 
 /**
- * Unified configuration for the Chrome-controlled project header.
- * Apps provide structured data via `chrome.projectHeader.set(config)`;
+ * Unified configuration for the Chrome-controlled Chrome-Next header.
+ * Apps provide structured data via `chrome.next.header.set(config)`;
  * Chrome renders title area, global actions, and app menu.
  */
-export interface ChromeProjectHeaderConfig {
+export interface ChromeNextHeaderConfig {
   /**
    * Page title displayed in the Chrome-controlled header.
    * Can be the app name (e.g. "Discover") or a viewed object
@@ -27,7 +27,7 @@ export interface ChromeProjectHeaderConfig {
    * E.g. "Managed", "Read-only", creation date, severity.
    * Limited to a single row; Chrome controls layout.
    */
-  metadata?: ChromeProjectHeaderMetadataItem[];
+  metadata?: ChromeNextHeaderMetadataItem[];
 
   /**
    * Global object actions whose icon, label, and position are fixed by Chrome.
@@ -35,19 +35,19 @@ export interface ChromeProjectHeaderConfig {
    *
    * Rendering order (fixed by Chrome): edit, share, favorite.
    */
-  globalActions?: ChromeProjectHeaderGlobalActions;
+  globalActions?: ChromeNextHeaderGlobalActions;
 
   /**
    * Optional tabs rendered as part of the header.
    * When provided, increases the top bar height dynamically.
    */
-  tabs?: ChromeProjectHeaderTab[];
+  tabs?: ChromeNextHeaderTab[];
 
   /**
    * Optional single callout rendered below the title/tabs area.
    * Only one callout at a time. Chrome controls styling.
    */
-  callout?: ChromeProjectHeaderCallout;
+  callout?: ChromeNextHeaderCallout;
 
   /**
    * App menu (toolbar actions). Items, primary action, secondary action.
@@ -56,7 +56,7 @@ export interface ChromeProjectHeaderConfig {
   appMenu?: AppMenuConfigNext;
 }
 
-export interface ChromeProjectHeaderMetadataItem {
+export interface ChromeNextHeaderMetadataItem {
   label: string;
   type: 'badge' | 'text';
   /** Badge color (EUI badge color). Only used when type is 'badge'. */
@@ -68,7 +68,7 @@ export interface ChromeProjectHeaderMetadataItem {
  * Global actions whose icon, label, and position are fixed by Chrome.
  * Apps provide only the behavioral handlers.
  */
-export interface ChromeProjectHeaderGlobalActions {
+export interface ChromeNextHeaderGlobalActions {
   /** Edit action. Chrome renders a pencil icon next to the title. */
   edit?: {
     onClick: () => void;
@@ -84,7 +84,7 @@ export interface ChromeProjectHeaderGlobalActions {
   };
 }
 
-export interface ChromeProjectHeaderTab {
+export interface ChromeNextHeaderTab {
   id: string;
   label: string;
   isSelected?: boolean;
@@ -93,7 +93,7 @@ export interface ChromeProjectHeaderTab {
   badge?: number;
 }
 
-export interface ChromeProjectHeaderCallout {
+export interface ChromeNextHeaderCallout {
   title: string;
   color: 'primary' | 'warning' | 'danger' | 'success';
   text?: string;
diff --git a/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx b/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx
index 7af8f70fd5e06..f77dc12b81c25 100644
--- a/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx
+++ b/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx
@@ -289,6 +289,14 @@ export class AgentBuilderPlugin
         // right before the user profile
         order: 1001,
       });
+
+      core.chrome.next.aiButton.set(
+        <AgentBuilderNavControlInitiator
+          coreStart={core}
+          pluginsStart={startDependencies}
+          agentBuilderService={agentBuilderService}
+        />
+      );
     }
 
     return agentBuilderService;

From ff03905f9156b7bd03c07d984018453519dcdbec Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 25 Mar 2026 15:06:30 +0100
Subject: [PATCH 06/77] applicationMarginTop: 8

---
 .../layout/core-chrome-layout/layouts/grid/grid_layout.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index 6bf80f3da59a8..c460774506af2 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -73,6 +73,7 @@ const layoutConfigs: {
     applicationTopBarHeight: 0,
     applicationMarginRight: 8,
     applicationMarginBottom: 8,
+    applicationMarginTop: 8,
     sidebarWidth: 0,
     footerHeight: 0,
     navigationWidth: 0,

From b6a4d9a3622248f2190a64532a3a9f96310d63e3 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 25 Mar 2026 15:15:08 +0100
Subject: [PATCH 07/77] fix post merge issues

---
 .../src/project_next/hooks/index.ts           |  3 +++
 .../project_next/hooks/use_project_header.ts  | 24 -------------------
 .../hooks/use_project_next_app_menu.ts        |  7 +++---
 .../src/project_next/hooks/use_title.test.tsx |  6 ++---
 .../src/project_next/hooks/use_title.ts       |  4 ++--
 5 files changed, 11 insertions(+), 33 deletions(-)
 delete mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts

diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
index e85302f90fc89..4d785ed63cb42 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
@@ -8,3 +8,6 @@
  */
 
 export { useAiButton } from './use_ai_button';
+export { useProjectNextAppMenu } from './use_project_next_app_menu';
+export { useReportTopBarHeight } from './use_report_top_bar_height';
+export { useTitle } from './use_title';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts
deleted file mode 100644
index 309246fdffaa0..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_header.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useMemo } from 'react';
-import type { ChromeProjectHeaderConfig } from '@kbn/core-chrome-browser';
-import { useObservable } from '@kbn/use-observable';
-import { useChromeService } from '@kbn/core-chrome-browser-context';
-
-/**
- * Returns the current project header configuration set via
- * `chrome.projectHeader.set()`, or `undefined` if not set.
- * Used by Chrome-Next top bar components.
- */
-export function useProjectHeader(): ChromeProjectHeaderConfig | undefined {
-  const chrome = useChromeService();
-  const config$ = useMemo(() => chrome.projectHeader.get$(), [chrome]);
-  return useObservable(config$, undefined);
-}
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
index def6921eadfdc..1a7815e88af9c 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
@@ -8,15 +8,14 @@
  */
 
 import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
-import { useAppMenu } from '../../shared/chrome_hooks';
-import { useProjectHeader } from './use_project_header';
+import { useAppMenu, useNextHeader } from '../../shared/chrome_hooks';
 
 /**
  * Returns the app menu config for the Chrome-Next project header.
- * Fallback: `config.appMenu` from `projectHeader.set()` -> global `chrome.getAppMenu$()`.
+ * Fallback: `config.appMenu` from `chrome.next.header.set()` -> global `chrome.getAppMenu$()`.
  */
 export function useProjectNextAppMenu(): AppMenuConfigNext | undefined {
-  const config = useProjectHeader();
+  const config = useNextHeader();
   const globalAppMenu = useAppMenu();
   return config?.appMenu ?? globalAppMenu;
 }
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
index b8d4d86140093..5ab83c92ce4a3 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import { renderHook, act } from '@testing-library/react';
 import type { BehaviorSubject } from 'rxjs';
-import type { ChromeProjectHeaderConfig } from '@kbn/core-chrome-browser';
+import type { ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
 import { createMockChromeComponentsDeps, TestChromeProviders } from '../../test_helpers';
 import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { useTitle } from './use_title';
@@ -37,12 +37,12 @@ describe('useTitle', () => {
     expect(result.current).toBe('Unknown');
   });
 
-  it('prefers projectHeader config title over app title', () => {
+  it('prefers chrome.next.header config title over app title', () => {
     const deps = createMockChromeComponentsDeps();
     (deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>).next('Dashboards');
 
     const chrome = chromeServiceMock.createStartContract();
-    (chrome.projectHeader.get$() as BehaviorSubject<ChromeProjectHeaderConfig | undefined>).next({
+    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
       title: 'My Dashboard',
     });
 
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
index 10749b7b2c376..782a036564491 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
@@ -9,14 +9,14 @@
 
 import { useObservable } from '@kbn/use-observable';
 import { useChromeComponentsDeps } from '../../context';
-import { useProjectHeader } from './use_project_header';
+import { useNextHeader } from '../../shared/chrome_hooks';
 
 /**
  * Returns the display title for the Chrome-Next project header.
  * Fallback chain: explicit `config.title` -> current app title -> 'Unknown'.
  */
 export function useTitle(): string {
-  const config = useProjectHeader();
+  const config = useNextHeader();
   const { application } = useChromeComponentsDeps();
   const appTitle = useObservable(application.currentAppTitle$, undefined);
   return config?.title ?? appTitle ?? 'Unknown';

From 06068df81de32475e4cf377aa19038f2be0e6e48 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 26 Mar 2026 13:21:55 +0100
Subject: [PATCH 08/77] [Chrome Next] Back button, use breadcrumbs for title
 fallback (#259748)

## Summary

- back button, ~use root breadcrumb as href~ use last not current
breadcrumbs as link
- for title use the last breadcrumb
- revert `currentAppTitle`, it isn't useful
- layout improvements

<img width="1624" height="1056" alt="Screenshot 2026-03-26 at 12 30 50"
src="https://github.com/user-attachments/assets/c589ef94-0c2b-4b33-91ef-6d40f4339db0"
/>
---
 .../src/application_service.tsx               |   9 +-
 .../src/application_service.mock.ts           |   2 -
 .../application/browser/src/contracts.ts      |   7 -
 .../chrome/browser-components/src/context.tsx |   2 +-
 .../src/project_next/app_menu.tsx             |  20 +-
 .../src/project_next/back_button.tsx          |  52 +++++
 .../src/project_next/header.tsx               |  44 ++--
 .../src/project_next/hooks/index.ts           |   1 +
 .../hooks/use_back_button.test.tsx            | 199 ++++++++++++++++++
 .../src/project_next/hooks/use_back_button.ts |  53 +++++
 .../src/project_next/hooks/use_title.test.tsx |  87 ++++++--
 .../src/project_next/hooks/use_title.ts       |  31 ++-
 .../src/project_next/title.tsx                |  48 +++++
 .../project_next/trailing_actions.test.tsx    |  47 +++++
 .../src/project_next/trailing_actions.tsx     |  56 +++++
 .../src/shared/breadcrumb_utils.ts            |  14 ++
 src/core/packages/chrome/browser/index.ts     |   1 +
 src/core/packages/chrome/browser/src/index.ts |   1 +
 .../chrome/browser/src/next_header.ts         |  13 ++
 19 files changed, 603 insertions(+), 84 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/title.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx

diff --git a/src/core/packages/application/browser-internal/src/application_service.tsx b/src/core/packages/application/browser-internal/src/application_service.tsx
index c477f4ceea0bc..583b9914e50fd 100644
--- a/src/core/packages/application/browser-internal/src/application_service.tsx
+++ b/src/core/packages/application/browser-internal/src/application_service.tsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import { flushSync } from 'react-dom';
 import { BehaviorSubject, firstValueFrom, type Observable, Subject, type Subscription } from 'rxjs';
-import { map, shareReplay, switchMap, takeUntil, distinctUntilChanged, filter, take } from 'rxjs';
+import { map, shareReplay, takeUntil, distinctUntilChanged, filter, take } from 'rxjs';
 import type { History } from 'history';
 import { createBrowserHistory } from 'history';
 
@@ -330,13 +330,6 @@ export class ApplicationService {
         distinctUntilChanged(),
         takeUntil(this.stop$)
       ),
-      currentAppTitle$: this.currentAppId$.pipe(
-        filter((appId) => appId !== undefined),
-        distinctUntilChanged(),
-        switchMap((appId) => applications$.pipe(map((apps) => apps.get(appId)?.title))),
-        distinctUntilChanged(),
-        takeUntil(this.stop$)
-      ),
       currentActionMenu$: this.currentActionMenu$.pipe(
         distinctUntilChanged(),
         takeUntil(this.stop$)
diff --git a/src/core/packages/application/browser-mocks/src/application_service.mock.ts b/src/core/packages/application/browser-mocks/src/application_service.mock.ts
index cf0d0e6aec5f4..31951853011e6 100644
--- a/src/core/packages/application/browser-mocks/src/application_service.mock.ts
+++ b/src/core/packages/application/browser-mocks/src/application_service.mock.ts
@@ -49,7 +49,6 @@ const createStartContractMock = (): jest.Mocked<ApplicationStart> => {
   return lazyObject({
     applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(new Map()),
     currentAppId$: currentAppId$.asObservable(),
-    currentAppTitle$: new BehaviorSubject<string | undefined>(undefined),
     currentLocation$: currentLocation$.asObservable(),
     capabilities: capabilitiesServiceMock.createStartContract().capabilities,
     navigateToApp: jest.fn(),
@@ -93,7 +92,6 @@ const createInternalStartContractMock = (
     applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(new Map()),
     capabilities: capabilitiesServiceMock.createStartContract().capabilities,
     currentAppId$: currentAppId$.asObservable(),
-    currentAppTitle$: new BehaviorSubject<string | undefined>(undefined),
     currentLocation$: currentLocation$.asObservable(),
     currentActionMenu$: new BehaviorSubject<MountPoint | undefined>(undefined),
     getComponent: jest.fn(),
diff --git a/src/core/packages/application/browser/src/contracts.ts b/src/core/packages/application/browser/src/contracts.ts
index 827b498ddeab1..caa336c1b37d2 100644
--- a/src/core/packages/application/browser/src/contracts.ts
+++ b/src/core/packages/application/browser/src/contracts.ts
@@ -152,13 +152,6 @@ export interface ApplicationStart {
    */
   currentAppId$: Observable<string | undefined>;
 
-  /**
-   * An observable that emits the title of the currently mounted application.
-   * Derived from {@link ApplicationStart.currentAppId$ | currentAppId$} and
-   * {@link ApplicationStart.applications$ | applications$}.
-   */
-  currentAppTitle$: Observable<string | undefined>;
-
   /**
    * An observable that emits the current path#hash and each subsequent update using the global history instance
    */
diff --git a/src/core/packages/chrome/browser-components/src/context.tsx b/src/core/packages/chrome/browser-components/src/context.tsx
index 1f77579dac6b4..c9c584e400601 100644
--- a/src/core/packages/chrome/browser-components/src/context.tsx
+++ b/src/core/packages/chrome/browser-components/src/context.tsx
@@ -17,7 +17,7 @@ import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
 export interface ChromeComponentsDeps {
   application: Pick<
     InternalApplicationStart,
-    'navigateToUrl' | 'currentAppId$' | 'currentAppTitle$' | 'currentActionMenu$'
+    'navigateToUrl' | 'currentAppId$' | 'currentActionMenu$'
   >;
   http: Pick<HttpStart, 'basePath' | 'getLoadingCount$'>;
   docLinks: DocLinksStart;
diff --git a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx b/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
index 5bea0717f4242..7069b337cf65f 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { css } from '@emotion/react';
 import React, { lazy, Suspense } from 'react';
 import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
 import { HeaderActionMenu } from '../shared/header_action_menu';
@@ -18,11 +17,6 @@ const AppMenuComponent = lazy(async () => {
   return { default: Component };
 });
 
-const styles = css`
-  margin-left: auto;
-  flex-shrink: 0;
-`;
-
 /**
  * Renders the app menu for the Chrome-Next project header.
  * Fallback chain: merged AppMenuConfig -> legacy HeaderActionMenu -> nothing.
@@ -33,20 +27,14 @@ export const ProjectNextAppMenu = React.memo(() => {
 
   if (appMenuConfig) {
     return (
-      <div css={styles}>
-        <Suspense>
-          <AppMenuComponent config={appMenuConfig} />
-        </Suspense>
-      </div>
+      <Suspense>
+        <AppMenuComponent config={appMenuConfig} />
+      </Suspense>
     );
   }
 
   if (hasLegacyActionMenu) {
-    return (
-      <div css={styles}>
-        <HeaderActionMenu />
-      </div>
-    );
+    return <HeaderActionMenu />;
   }
 
   return null;
diff --git a/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx b/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
new file mode 100644
index 0000000000000..5ba22942dae8e
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useMemo } from 'react';
+import { useBackButton } from './hooks';
+
+/**
+ * Back control for Chrome-Next project header: uses explicit `chrome.next.header` `back` when
+ * set; otherwise the last non-last project breadcrumb with an `href` (≥2 crumbs; scanning
+ * right to left). Renders nothing when neither applies.
+ */
+export const ProjectNextBackButton = React.memo(() => {
+  const back = useBackButton();
+
+  const ariaLabel = useMemo(() => {
+    if (!back) {
+      return '';
+    }
+    if (back.backDestinationLabel) {
+      return i18n.translate('core.ui.chrome.projectNextHeader.backButtonAriaLabelWithDestination', {
+        defaultMessage: 'Back to {destination}',
+        values: { destination: back.backDestinationLabel },
+      });
+    }
+    return i18n.translate('core.ui.chrome.projectNextHeader.backButtonAriaLabel', {
+      defaultMessage: 'Back',
+    });
+  }, [back]);
+
+  if (!back) {
+    return null;
+  }
+
+  return (
+    <EuiButtonIcon
+      iconType="arrowLeft"
+      display="empty"
+      size="s"
+      aria-label={ariaLabel}
+      data-test-subj="chromeProjectNextHeaderBack"
+      href={back.backHref}
+    />
+  );
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/header.tsx b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
index 5c1bc404b6788..74643fb35dee4 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/header.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
@@ -7,46 +7,50 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { useEuiTheme, type UseEuiTheme } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
-import { useReportTopBarHeight, useTitle } from './hooks';
-import { ProjectNextAppMenu } from './app_menu';
+import { ProjectNextBackButton } from './back_button';
+import { useReportTopBarHeight } from './hooks';
+import { ProjectNextTitle } from './title';
+import { ProjectNextTrailingActions } from './trailing_actions';
 
-const useStyles = (euiTheme: UseEuiTheme['euiTheme']) =>
-  useMemo(() => {
+const useHeaderStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
     const root = css`
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      min-width: 0;
       padding: ${euiTheme.size.s};
       background: ${euiTheme.colors.backgroundBasePlain};
       border-bottom: ${euiTheme.border.thin};
       margin-bottom: -${euiTheme.border.width.thin};
     `;
 
-    const title = css`
-      font-size: ${euiTheme.size.base};
-      font-weight: ${euiTheme.font.weight.semiBold};
-      line-height: ${euiTheme.size.l};
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    const primaryRow = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+      min-width: 0;
     `;
 
-    return { root, title };
+    return { root, primaryRow };
   }, [euiTheme]);
+};
 
 export const ProjectNextHeader = React.memo(() => {
-  const title = useTitle();
-  const { euiTheme } = useEuiTheme();
-  const styles = useStyles(euiTheme);
+  const styles = useHeaderStyles();
   const heightRef = useReportTopBarHeight();
 
   return (
     <div ref={heightRef} css={styles.root} data-test-subj="chromeProjectNextHeader">
-      <h1 css={styles.title}>{title}</h1>
-      <ProjectNextAppMenu />
+      <div css={styles.primaryRow}>
+        <ProjectNextBackButton />
+        <ProjectNextTitle />
+        <ProjectNextTrailingActions />
+      </div>
     </div>
   );
 });
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
index 4d785ed63cb42..6aa997cbcd06d 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
@@ -9,5 +9,6 @@
 
 export { useAiButton } from './use_ai_button';
 export { useProjectNextAppMenu } from './use_project_next_app_menu';
+export { useBackButton } from './use_back_button';
 export { useReportTopBarHeight } from './use_report_top_bar_height';
 export { useTitle } from './use_title';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx
new file mode 100644
index 0000000000000..cea15b0a0bdeb
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx
@@ -0,0 +1,199 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { renderHook } from '@testing-library/react';
+import type { BehaviorSubject } from 'rxjs';
+import type { ChromeBreadcrumb, ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
+import { createMockChromeComponentsDeps, TestChromeProviders } from '../../test_helpers';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { useBackButton } from './use_back_button';
+
+describe('useBackButton', () => {
+  it('prefers explicit chrome.next.header back over breadcrumbs', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([
+      { text: 'Root', href: '/app/r' },
+      { text: 'Section', href: '/app/section' },
+      { text: 'Current' },
+    ]);
+
+    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
+      title: 'T',
+      back: { href: '/app/explicit', label: 'Explicit' },
+    });
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toEqual({
+      backHref: '/app/explicit',
+      backDestinationLabel: 'Explicit',
+    });
+  });
+
+  it('uses explicit back href without label when label is omitted', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Root', href: '/app/r' }, { text: 'Leaf' }]);
+
+    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
+      title: 'T',
+      back: { href: '/app/only-href' },
+    });
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toEqual({
+      backHref: '/app/only-href',
+      backDestinationLabel: undefined,
+    });
+  });
+
+  it('uses explicit back when there is only one breadcrumb', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Only', href: '/app/one' }]);
+
+    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
+      title: 'T',
+      back: { href: '/app/back' },
+    });
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toEqual({
+      backHref: '/app/back',
+      backDestinationLabel: undefined,
+    });
+  });
+
+  it('returns undefined when there are fewer than two breadcrumbs', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Only', href: '/app/one' }]);
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('uses the only non-last crumb with an href when there are two crumbs', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Root', href: '/app/r' }, { text: 'Leaf' }]);
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toEqual({
+      backHref: '/app/r',
+      backDestinationLabel: 'Root',
+    });
+  });
+
+  it('uses the last non-last crumb with an href when several preceding crumbs have hrefs', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([
+      { text: 'Root', href: '/app/r' },
+      { text: 'Section', href: '/app/section' },
+      { text: 'Current' },
+    ]);
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toEqual({
+      backHref: '/app/section',
+      backDestinationLabel: 'Section',
+    });
+  });
+
+  it('uses the last non-last crumb with an href when the root has no href', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([
+      { text: 'Root' },
+      { text: 'Section', href: '/app/section' },
+      { text: 'Current' },
+    ]);
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toEqual({
+      backHref: '/app/section',
+      backDestinationLabel: 'Section',
+    });
+  });
+
+  it('returns undefined when no non-last crumb has an href', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Root' }, { text: 'Leaf' }]);
+
+    const { result } = renderHook(() => useBackButton(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
+
+    expect(result.current).toBeUndefined();
+  });
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts
new file mode 100644
index 0000000000000..20719383c6028
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useMemo } from 'react';
+import { useNextHeader, useProjectBreadcrumbs } from '../../shared/chrome_hooks';
+import { getBreadcrumbPlainText } from '../../shared/breadcrumb_utils';
+
+export interface BackNavigation {
+  backHref: string;
+  /** Plain-text title of the destination crumb (for `aria-label` on the back control). */
+  backDestinationLabel?: string;
+}
+
+/**
+ * Resolution: explicit `chrome.next.header` `back.href` (and optional `back.label`) → else the
+ * last non-last project breadcrumb with a truthy `href` (scanning right to left). Returns
+ * `undefined` if neither applies.
+ */
+export function useBackButton(): BackNavigation | undefined {
+  const config = useNextHeader();
+  const breadcrumbs = useProjectBreadcrumbs();
+
+  return useMemo(() => {
+    const explicitHref = config?.back?.href?.trim();
+    if (explicitHref) {
+      return {
+        backHref: explicitHref,
+        backDestinationLabel: config?.back?.label,
+      };
+    }
+
+    if (breadcrumbs.length < 2) {
+      return undefined;
+    }
+    for (let i = breadcrumbs.length - 2; i >= 0; i--) {
+      const crumb = breadcrumbs[i];
+      const href = crumb.href;
+      if (href) {
+        return {
+          backHref: href,
+          backDestinationLabel: getBreadcrumbPlainText(crumb),
+        };
+      }
+    }
+    return undefined;
+  }, [breadcrumbs, config]);
+}
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
index 5ab83c92ce4a3..800c2c5f48fa8 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
@@ -8,44 +8,69 @@
  */
 
 import React from 'react';
-import { renderHook, act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import type { BehaviorSubject } from 'rxjs';
-import type { ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
+import type { ChromeBreadcrumb, ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
 import { createMockChromeComponentsDeps, TestChromeProviders } from '../../test_helpers';
 import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { useTitle } from './use_title';
 
 describe('useTitle', () => {
-  it('returns the app title from currentAppTitle$', () => {
+  it('returns undefined when there is no config title and project breadcrumbs are empty', () => {
     const deps = createMockChromeComponentsDeps();
-    (deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>).next('Discover');
 
     const { result } = renderHook(() => useTitle(), {
       wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
     });
 
-    expect(result.current).toBe('Discover');
+    expect(result.current).toBeUndefined();
   });
 
-  it('returns "Unknown" when no app title is available', () => {
+  it('prefers chrome.next.header config title over breadcrumbs', () => {
     const deps = createMockChromeComponentsDeps();
 
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'From breadcrumbs' }]);
+
+    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
+      title: 'My Dashboard',
+    });
+
     const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
     });
 
-    expect(result.current).toBe('Unknown');
+    expect(result.current).toBe('My Dashboard');
   });
 
-  it('prefers chrome.next.header config title over app title', () => {
+  it('uses a single project breadcrumb string text as title', () => {
     const deps = createMockChromeComponentsDeps();
-    (deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>).next('Dashboards');
-
     const chrome = chromeServiceMock.createStartContract();
-    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
-      title: 'My Dashboard',
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Section' }]);
+
+    const { result } = renderHook(() => useTitle(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
     });
 
+    expect(result.current).toBe('Section');
+  });
+
+  it('uses the last project breadcrumb text when multiple crumbs', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Root', href: '/app/r' }, { text: 'Leaf' }]);
+
     const { result } = renderHook(() => useTitle(), {
       wrapper: ({ children }) => (
         <TestChromeProviders deps={deps} chrome={chrome}>
@@ -54,21 +79,41 @@ describe('useTitle', () => {
       ),
     });
 
-    expect(result.current).toBe('My Dashboard');
+    expect(result.current).toBe('Leaf');
   });
 
-  it('updates when currentAppTitle$ emits a new value', () => {
+  it('prefers string text over aria-label when both are present on the chosen crumb', () => {
     const deps = createMockChromeComponentsDeps();
-    const title$ = deps.application.currentAppTitle$ as BehaviorSubject<string | undefined>;
-    title$.next('Dashboard');
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: 'Visible', 'aria-label': 'Aria title' }]);
 
     const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
     });
 
-    expect(result.current).toBe('Dashboard');
+    expect(result.current).toBe('Visible');
+  });
+
+  it('returns undefined when breadcrumb text is not a plain string', () => {
+    const deps = createMockChromeComponentsDeps();
+
+    const chrome = chromeServiceMock.createStartContract();
+    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
+    breadcrumbs$.next([{ text: <span>Rich</span> }]);
+
+    const { result } = renderHook(() => useTitle(), {
+      wrapper: ({ children }) => (
+        <TestChromeProviders deps={deps} chrome={chrome}>
+          {children}
+        </TestChromeProviders>
+      ),
+    });
 
-    act(() => title$.next('Discover'));
-    expect(result.current).toBe('Discover');
+    expect(result.current).toBeUndefined();
   });
 });
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
index 782a036564491..c2f084c5decc1 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
@@ -7,17 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { useObservable } from '@kbn/use-observable';
-import { useChromeComponentsDeps } from '../../context';
-import { useNextHeader } from '../../shared/chrome_hooks';
+import { useNextHeader, useProjectBreadcrumbs } from '../../shared/chrome_hooks';
+import { getBreadcrumbPlainText } from '../../shared/breadcrumb_utils';
 
 /**
- * Returns the display title for the Chrome-Next project header.
- * Fallback chain: explicit `config.title` -> current app title -> 'Unknown'.
+ * Returns the display title for the Chrome-Next project header, or `undefined` when none.
+ * Resolution: explicit `config.title` -> project breadcrumb text (last crumb) -> `undefined`.
  */
-export function useTitle(): string {
+export function useTitle(): string | undefined {
   const config = useNextHeader();
-  const { application } = useChromeComponentsDeps();
-  const appTitle = useObservable(application.currentAppTitle$, undefined);
-  return config?.title ?? appTitle ?? 'Unknown';
+  const breadcrumbs = useProjectBreadcrumbs();
+
+  if (config?.title) {
+    return config.title;
+  }
+
+  if (breadcrumbs.length === 0) {
+    return undefined;
+  }
+
+  const crumbForTitle = breadcrumbs[breadcrumbs.length - 1];
+  const plain = getBreadcrumbPlainText(crumbForTitle);
+  if (plain) {
+    return plain;
+  }
+
+  return undefined;
 }
diff --git a/src/core/packages/chrome/browser-components/src/project_next/title.tsx b/src/core/packages/chrome/browser-components/src/project_next/title.tsx
new file mode 100644
index 0000000000000..317172bebfba3
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/title.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { useTitle } from './hooks';
+
+const useTitleStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const title = css`
+      flex: 1;
+      min-width: 0;
+      font-size: ${euiTheme.size.base};
+      font-weight: ${euiTheme.font.weight.semiBold};
+      line-height: ${euiTheme.size.l};
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+
+    return { title };
+  }, [euiTheme]);
+};
+
+/**
+ * Title region for the Chrome-Next project header: renders nothing when
+ * `useTitle()` has no string; otherwise an `h1` with Emotion styles.
+ */
+export const ProjectNextTitle = React.memo(() => {
+  const title = useTitle();
+  const styles = useTitleStyles();
+
+  if (!title) {
+    return null;
+  }
+
+  return <h1 css={styles.title}>{title}</h1>;
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx
new file mode 100644
index 0000000000000..f581b5116125a
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type { BehaviorSubject } from 'rxjs';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { createMockChromeComponentsDeps, TestChromeProviders } from '../test_helpers';
+import { ProjectNextTrailingActions } from './trailing_actions';
+
+describe('ProjectNextTrailingActions', () => {
+  it('renders nothing when no app menu, legacy action menu, or AI button', () => {
+    const deps = createMockChromeComponentsDeps();
+
+    const { container } = render(
+      <TestChromeProviders deps={deps}>
+        <ProjectNextTrailingActions />
+      </TestChromeProviders>
+    );
+
+    expect(
+      container.querySelector('[data-test-subj="chromeProjectNextHeaderTrailing"]')
+    ).toBeNull();
+  });
+
+  it('renders the trailing region when the AI button slot is set', () => {
+    const deps = createMockChromeComponentsDeps();
+    const chrome = chromeServiceMock.createStartContract();
+    const aiButton$ = chrome.next.aiButton.get$() as BehaviorSubject<React.ReactNode | undefined>;
+    aiButton$.next(<span data-test-subj="aiButtonTest">AI</span>);
+
+    render(
+      <TestChromeProviders deps={deps} chrome={chrome}>
+        <ProjectNextTrailingActions />
+      </TestChromeProviders>
+    );
+
+    expect(screen.getByTestId('chromeProjectNextHeaderTrailing')).toBeInTheDocument();
+    expect(screen.getByTestId('aiButtonTest')).toBeInTheDocument();
+  });
+});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
new file mode 100644
index 0000000000000..b285a5d378ac6
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
+import { AiButtonSlot } from './ai_button_slot';
+import { ProjectNextAppMenu } from './app_menu';
+import { useAiButton, useProjectNextAppMenu } from './hooks';
+
+const useTrailingStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const root = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.s};
+      flex-shrink: 0;
+      margin-left: auto;
+    `;
+
+    return { root };
+  }, [euiTheme]);
+};
+
+/**
+ * Trailing region of the Chrome-Next project header (app menu, AI button, future global actions).
+ * Renders nothing when no trailing content is available.
+ */
+export const ProjectNextTrailingActions = React.memo(() => {
+  const appMenuConfig = useProjectNextAppMenu();
+  const hasLegacyActionMenu = useHasLegacyActionMenu();
+  const aiButton = useAiButton();
+  const styles = useTrailingStyles();
+
+  const hasTrailingContent = !!appMenuConfig || hasLegacyActionMenu || !!aiButton;
+
+  if (!hasTrailingContent) {
+    return null;
+  }
+
+  return (
+    <div css={styles.root} data-test-subj="chromeProjectNextHeaderTrailing">
+      <ProjectNextAppMenu />
+      <AiButtonSlot />
+    </div>
+  );
+});
diff --git a/src/core/packages/chrome/browser-components/src/shared/breadcrumb_utils.ts b/src/core/packages/chrome/browser-components/src/shared/breadcrumb_utils.ts
index 8baadb4d402ea..cccfff6bd869f 100644
--- a/src/core/packages/chrome/browser-components/src/shared/breadcrumb_utils.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/breadcrumb_utils.ts
@@ -10,6 +10,20 @@
 import classNames from 'classnames';
 import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
 
+/**
+ * Returns a plain string for breadcrumb display: prefers `text`, then `aria-label` when strings.
+ * Returns `undefined` for React node `text`.
+ */
+export function getBreadcrumbPlainText(crumb: ChromeBreadcrumb): string | undefined {
+  if (typeof crumb.text === 'string') {
+    return crumb.text;
+  }
+  if (typeof crumb['aria-label'] === 'string') {
+    return crumb['aria-label'];
+  }
+  return undefined;
+}
+
 /** Maps raw ChromeBreadcrumb[] to EUI-compatible breadcrumb props */
 export function prepareBreadcrumbs(breadcrumbs: ChromeBreadcrumb[]) {
   const crumbs = breadcrumbs.length === 0 ? [{ text: 'Kibana' } as ChromeBreadcrumb] : breadcrumbs;
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index 86a28a77de342..5d95ff72b282b 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -55,6 +55,7 @@ export type {
   SidebarAppDefinition,
   SidebarSetup,
   SidebarStart,
+  ChromeNextHeaderBack,
   ChromeNextHeaderConfig,
   ChromeNextHeaderMetadataItem,
   ChromeNextHeaderGlobalActions,
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 2725c37168ac1..1c13769e1223f 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -61,6 +61,7 @@ export type {
 } from './sidebar';
 
 export type {
+  ChromeNextHeaderBack,
   ChromeNextHeaderConfig,
   ChromeNextHeaderMetadataItem,
   ChromeNextHeaderGlobalActions,
diff --git a/src/core/packages/chrome/browser/src/next_header.ts b/src/core/packages/chrome/browser/src/next_header.ts
index 73586c96c9a5d..f2bdf88a5afb8 100644
--- a/src/core/packages/chrome/browser/src/next_header.ts
+++ b/src/core/packages/chrome/browser/src/next_header.ts
@@ -54,6 +54,19 @@ export interface ChromeNextHeaderConfig {
    * TODO: Consider strict type independent from `@kbn/core-chrome-app-menu-components`
    */
   appMenu?: AppMenuConfigNext;
+
+  /**
+   * Optional explicit back navigation for the Chrome-Next header back control.
+   * When `href` is set, overrides breadcrumb-derived back destination.
+   */
+  back?: ChromeNextHeaderBack;
+}
+
+/** Explicit back target for {@link ChromeNextHeaderConfig.back}. */
+export interface ChromeNextHeaderBack {
+  href: string;
+  /** Destination name for accessibility (e.g. "Back to {label}"). */
+  label?: string;
 }
 
 export interface ChromeNextHeaderMetadataItem {

From 6c7a091994c6d6bf2150ab53304c2001ec1a90a7 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Fri, 27 Mar 2026 11:42:04 +0100
Subject: [PATCH 09/77] [Chrome Next] Remove AppMenuConfigNext (#259946)

## Summary

This PR removes `AppMenuConfigNext` as we'll be modifying
`AppMenuConfig` and going straight to main with it
(https://github.com/elastic/kibana/pull/259949)
---
 .../chrome/app-menu/core-chrome-app-menu-components/index.ts | 1 -
 .../app-menu/core-chrome-app-menu-components/src/index.ts    | 1 -
 .../app-menu/core-chrome-app-menu-components/src/types.ts    | 2 --
 .../src/project_next/hooks/use_project_next_app_menu.ts      | 4 ++--
 src/core/packages/chrome/browser/src/next_header.ts          | 5 ++---
 5 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
index 476d5c43f0f88..9dfc6c78f738b 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
@@ -23,7 +23,6 @@ export type {
   AppMenuPrimaryActionItem,
   AppMenuPopoverItem,
   AppMenuSplitButtonProps,
-  AppMenuConfigNext,
 } from './src';
 
 export {
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
index 84b253be9a378..d738b52f43576 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
@@ -23,7 +23,6 @@ export type {
   AppMenuPrimaryActionItem,
   AppMenuPopoverItem,
   AppMenuSplitButtonProps,
-  AppMenuConfigNext,
 } from './types';
 
 export {
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
index cc294f62f0030..32ec560652f65 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
@@ -288,5 +288,3 @@ export interface AppMenuConfig {
    */
   secondaryActionItem?: AppMenuSecondaryActionItem;
 }
-
-export type AppMenuConfigNext = AppMenuConfig;
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
index 1a7815e88af9c..33c08b3d5c4dc 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
@@ -7,14 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useAppMenu, useNextHeader } from '../../shared/chrome_hooks';
 
 /**
  * Returns the app menu config for the Chrome-Next project header.
  * Fallback: `config.appMenu` from `chrome.next.header.set()` -> global `chrome.getAppMenu$()`.
  */
-export function useProjectNextAppMenu(): AppMenuConfigNext | undefined {
+export function useProjectNextAppMenu(): AppMenuConfig | undefined {
   const config = useNextHeader();
   const globalAppMenu = useAppMenu();
   return config?.appMenu ?? globalAppMenu;
diff --git a/src/core/packages/chrome/browser/src/next_header.ts b/src/core/packages/chrome/browser/src/next_header.ts
index f2bdf88a5afb8..df79ca72718fb 100644
--- a/src/core/packages/chrome/browser/src/next_header.ts
+++ b/src/core/packages/chrome/browser/src/next_header.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { AppMenuConfigNext } from '@kbn/core-chrome-app-menu-components';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 
 /**
  * Unified configuration for the Chrome-controlled Chrome-Next header.
@@ -51,9 +51,8 @@ export interface ChromeNextHeaderConfig {
 
   /**
    * App menu (toolbar actions). Items, primary action, secondary action.
-   * TODO: Consider strict type independent from `@kbn/core-chrome-app-menu-components`
    */
-  appMenu?: AppMenuConfigNext;
+  appMenu?: AppMenuConfig;
 
   /**
    * Optional explicit back navigation for the Chrome-Next header back control.

From 07be78dc419095e85656e9fbeab9f681496ae6ab Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Fri, 27 Mar 2026 12:30:45 +0100
Subject: [PATCH 10/77] [FeatureBranch/DoNotReview][Chrome Next] Global Actions
 Stub (#259824)

## Summary

<img width="1624" height="1056" alt="Screenshot 2026-03-26 at 17 03 58"
src="https://github.com/user-attachments/assets/150368f6-b90d-4c44-bada-ce74556059ea"
/>
---
 .../chrome/browser-components/moon.yml        |   1 +
 .../src/project_next/ai_button_slot.tsx       |   2 +
 .../src/project_next/app_menu.tsx             |   2 +
 .../src/project_next/back_button.tsx          |   3 +
 .../src/project_next/global_actions.tsx       |  85 ++++++++
 .../src/project_next/header.tsx               |  48 ++++-
 .../hooks/use_back_button.test.tsx            | 199 ------------------
 .../src/project_next/hooks/use_title.test.tsx | 119 -----------
 .../src/project_next/title.tsx                |   4 +-
 .../project_next/trailing_actions.test.tsx    |  47 -----
 .../src/project_next/trailing_actions.tsx     |   2 +
 .../browser-mocks/src/chrome_service.mock.ts  |  14 +-
 src/core/packages/chrome/browser/index.ts     |   3 +-
 src/core/packages/chrome/browser/src/index.ts |   3 +-
 .../chrome/browser/src/next_header.ts         |  57 +++--
 .../plugins/shared/dashboard/moon.extend.yml  |   2 +
 .../plugins/shared/dashboard/moon.yml         |   2 +
 .../top_nav/use_dashboard_menu_items.tsx      |  13 +-
 .../internal_dashboard_top_nav.tsx            |  38 +++-
 .../plugins/shared/dashboard/tsconfig.json    |   1 +
 20 files changed, 241 insertions(+), 404 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx
 delete mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx
 delete mode 100644 src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
 delete mode 100644 src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx
 create mode 100644 src/platform/plugins/shared/dashboard/moon.extend.yml

diff --git a/src/core/packages/chrome/browser-components/moon.yml b/src/core/packages/chrome/browser-components/moon.yml
index a49f5d98a55a9..c90d4a9dd6655 100644
--- a/src/core/packages/chrome/browser-components/moon.yml
+++ b/src/core/packages/chrome/browser-components/moon.yml
@@ -46,6 +46,7 @@ dependsOn:
   - '@kbn/shared-ux-label-formatter'
   - '@kbn/test-jest-helpers'
   - '@kbn/use-observable'
+  - '@kbn/core-chrome-layout-components'
 tags:
   - shared-browser
   - package
diff --git a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx b/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
index 489577b63482a..24e5ebfc552d5 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
@@ -23,3 +23,5 @@ export const AiButtonSlot = React.memo(() => {
 
   return <>{node}</>;
 });
+
+AiButtonSlot.displayName = 'AiButtonSlot';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx b/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
index 7069b337cf65f..ed2b371d66e5c 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
@@ -39,3 +39,5 @@ export const ProjectNextAppMenu = React.memo(() => {
 
   return null;
 });
+
+ProjectNextAppMenu.displayName = 'ProjectNextAppMenu';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx b/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
index 5ba22942dae8e..bc79b3ca3e3d5 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
@@ -42,6 +42,7 @@ export const ProjectNextBackButton = React.memo(() => {
   return (
     <EuiButtonIcon
       iconType="arrowLeft"
+      color="text"
       display="empty"
       size="s"
       aria-label={ariaLabel}
@@ -50,3 +51,5 @@ export const ProjectNextBackButton = React.memo(() => {
     />
   );
 });
+
+ProjectNextBackButton.displayName = 'ProjectNextBackButton';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx b/src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx
new file mode 100644
index 0000000000000..d298186962694
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import React, { useMemo } from 'react';
+import { useNextHeader } from '../shared/chrome_hooks';
+
+const SHARE_ARIA_LABEL = i18n.translate('core.ui.chrome.projectNextHeader.globalShareAriaLabel', {
+  defaultMessage: 'Share',
+});
+
+const useGlobalActionsStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const root = css`
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+    `;
+
+    const favoriteSlot = css`
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+    `;
+
+    return { root, favoriteSlot };
+  }, [euiTheme]);
+};
+
+/**
+ * Fixed-order global object actions (editTitle, share, favorite) next to the Chrome-Next title.
+ * Only renders actions the page opts into via `chrome.next.header.set({ globalActions })`.
+ *
+ * Favorite is a `ReactNode` slot so plugins own full behavior (clients, context, React Query).
+ */
+export const ProjectNextGlobalActions = React.memo(() => {
+  const config = useNextHeader();
+  const styles = useGlobalActionsStyles();
+  const globalActions = config?.globalActions;
+
+  if (!globalActions) {
+    return null;
+  }
+
+  const { share, favorite } = globalActions;
+
+  if (!share && !favorite) {
+    return null;
+  }
+
+  return (
+    <div css={styles.root} data-test-subj="chromeProjectNextHeaderGlobalActions">
+      {/* TODO: editTitle — Chrome-controlled inline title editor; wire onSave from config */}
+      {share ? (
+        <EuiButtonIcon
+          iconType="share"
+          color="text"
+          display="empty"
+          size="s"
+          aria-label={SHARE_ARIA_LABEL}
+          data-test-subj="chromeProjectNextHeaderGlobalShare"
+          onClick={share.onClick}
+        />
+      ) : null}
+      {favorite ? (
+        <div css={styles.favoriteSlot} data-test-subj="chromeProjectNextHeaderGlobalFavoriteSlot">
+          {favorite}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+ProjectNextGlobalActions.displayName = 'ProjectNextGlobalActions';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/header.tsx b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
index 74643fb35dee4..f2f20babb0b6b 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/header.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
@@ -11,10 +11,14 @@ import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { ProjectNextBackButton } from './back_button';
+import { ProjectNextGlobalActions } from './global_actions';
 import { useReportTopBarHeight } from './hooks';
 import { ProjectNextTitle } from './title';
 import { ProjectNextTrailingActions } from './trailing_actions';
 
+/** Application top bar height; aligns with project layout `applicationTopBarHeight`. */
+const APPLICATION_TOP_BAR_HEIGHT_PX = 48;
+
 const useHeaderStyles = () => {
   const { euiTheme } = useEuiTheme();
 
@@ -23,7 +27,10 @@ const useHeaderStyles = () => {
       display: flex;
       flex-direction: column;
       min-width: 0;
-      padding: ${euiTheme.size.s};
+      height: 100%;
+      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+      box-sizing: border-box;
+      padding: 0 ${euiTheme.size.s};
       background: ${euiTheme.colors.backgroundBasePlain};
       border-bottom: ${euiTheme.border.thin};
       margin-bottom: -${euiTheme.border.width.thin};
@@ -34,9 +41,36 @@ const useHeaderStyles = () => {
       align-items: center;
       gap: ${euiTheme.size.xs};
       min-width: 0;
+      flex: 1;
+      min-height: 0;
+    `;
+
+    const titleCluster = css`
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    `;
+
+    /**
+     * Keeps the title and global actions grouped on the left; the title truncates with ellipsis
+     * instead of growing and pushing icons toward the app menu (trailing) region.
+     */
+    const titleGroup = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
     `;
 
-    return { root, primaryRow };
+    const titleClusterSpacer = css`
+      flex: 1 1 auto;
+      min-width: 0;
+    `;
+
+    return { root, primaryRow, titleCluster, titleGroup, titleClusterSpacer };
   }, [euiTheme]);
 };
 
@@ -48,9 +82,17 @@ export const ProjectNextHeader = React.memo(() => {
     <div ref={heightRef} css={styles.root} data-test-subj="chromeProjectNextHeader">
       <div css={styles.primaryRow}>
         <ProjectNextBackButton />
-        <ProjectNextTitle />
+        <div css={styles.titleCluster}>
+          <div css={styles.titleGroup}>
+            <ProjectNextTitle />
+            <ProjectNextGlobalActions />
+          </div>
+          <div css={styles.titleClusterSpacer} aria-hidden />
+        </div>
         <ProjectNextTrailingActions />
       </div>
     </div>
   );
 });
+
+ProjectNextHeader.displayName = 'ProjectNextHeader';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx
deleted file mode 100644
index cea15b0a0bdeb..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.test.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { renderHook } from '@testing-library/react';
-import type { BehaviorSubject } from 'rxjs';
-import type { ChromeBreadcrumb, ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
-import { createMockChromeComponentsDeps, TestChromeProviders } from '../../test_helpers';
-import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
-import { useBackButton } from './use_back_button';
-
-describe('useBackButton', () => {
-  it('prefers explicit chrome.next.header back over breadcrumbs', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([
-      { text: 'Root', href: '/app/r' },
-      { text: 'Section', href: '/app/section' },
-      { text: 'Current' },
-    ]);
-
-    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
-      title: 'T',
-      back: { href: '/app/explicit', label: 'Explicit' },
-    });
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toEqual({
-      backHref: '/app/explicit',
-      backDestinationLabel: 'Explicit',
-    });
-  });
-
-  it('uses explicit back href without label when label is omitted', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Root', href: '/app/r' }, { text: 'Leaf' }]);
-
-    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
-      title: 'T',
-      back: { href: '/app/only-href' },
-    });
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toEqual({
-      backHref: '/app/only-href',
-      backDestinationLabel: undefined,
-    });
-  });
-
-  it('uses explicit back when there is only one breadcrumb', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Only', href: '/app/one' }]);
-
-    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
-      title: 'T',
-      back: { href: '/app/back' },
-    });
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toEqual({
-      backHref: '/app/back',
-      backDestinationLabel: undefined,
-    });
-  });
-
-  it('returns undefined when there are fewer than two breadcrumbs', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Only', href: '/app/one' }]);
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it('uses the only non-last crumb with an href when there are two crumbs', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Root', href: '/app/r' }, { text: 'Leaf' }]);
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toEqual({
-      backHref: '/app/r',
-      backDestinationLabel: 'Root',
-    });
-  });
-
-  it('uses the last non-last crumb with an href when several preceding crumbs have hrefs', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([
-      { text: 'Root', href: '/app/r' },
-      { text: 'Section', href: '/app/section' },
-      { text: 'Current' },
-    ]);
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toEqual({
-      backHref: '/app/section',
-      backDestinationLabel: 'Section',
-    });
-  });
-
-  it('uses the last non-last crumb with an href when the root has no href', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([
-      { text: 'Root' },
-      { text: 'Section', href: '/app/section' },
-      { text: 'Current' },
-    ]);
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toEqual({
-      backHref: '/app/section',
-      backDestinationLabel: 'Section',
-    });
-  });
-
-  it('returns undefined when no non-last crumb has an href', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Root' }, { text: 'Leaf' }]);
-
-    const { result } = renderHook(() => useBackButton(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBeUndefined();
-  });
-});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
deleted file mode 100644
index 800c2c5f48fa8..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.test.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { renderHook } from '@testing-library/react';
-import type { BehaviorSubject } from 'rxjs';
-import type { ChromeBreadcrumb, ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
-import { createMockChromeComponentsDeps, TestChromeProviders } from '../../test_helpers';
-import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
-import { useTitle } from './use_title';
-
-describe('useTitle', () => {
-  it('returns undefined when there is no config title and project breadcrumbs are empty', () => {
-    const deps = createMockChromeComponentsDeps();
-
-    const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => <TestChromeProviders deps={deps}>{children}</TestChromeProviders>,
-    });
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it('prefers chrome.next.header config title over breadcrumbs', () => {
-    const deps = createMockChromeComponentsDeps();
-
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'From breadcrumbs' }]);
-
-    (chrome.next.header.get$() as BehaviorSubject<ChromeNextHeaderConfig | undefined>).next({
-      title: 'My Dashboard',
-    });
-
-    const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBe('My Dashboard');
-  });
-
-  it('uses a single project breadcrumb string text as title', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Section' }]);
-
-    const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBe('Section');
-  });
-
-  it('uses the last project breadcrumb text when multiple crumbs', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Root', href: '/app/r' }, { text: 'Leaf' }]);
-
-    const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBe('Leaf');
-  });
-
-  it('prefers string text over aria-label when both are present on the chosen crumb', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: 'Visible', 'aria-label': 'Aria title' }]);
-
-    const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBe('Visible');
-  });
-
-  it('returns undefined when breadcrumb text is not a plain string', () => {
-    const deps = createMockChromeComponentsDeps();
-
-    const chrome = chromeServiceMock.createStartContract();
-    const breadcrumbs$ = chrome.project.getBreadcrumbs$() as BehaviorSubject<ChromeBreadcrumb[]>;
-    breadcrumbs$.next([{ text: <span>Rich</span> }]);
-
-    const { result } = renderHook(() => useTitle(), {
-      wrapper: ({ children }) => (
-        <TestChromeProviders deps={deps} chrome={chrome}>
-          {children}
-        </TestChromeProviders>
-      ),
-    });
-
-    expect(result.current).toBeUndefined();
-  });
-});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/title.tsx b/src/core/packages/chrome/browser-components/src/project_next/title.tsx
index 317172bebfba3..32bf62ce17f50 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/title.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/title.tsx
@@ -17,7 +17,7 @@ const useTitleStyles = () => {
 
   return useMemo(() => {
     const title = css`
-      flex: 1;
+      flex: 1 1 auto;
       min-width: 0;
       font-size: ${euiTheme.size.base};
       font-weight: ${euiTheme.font.weight.semiBold};
@@ -46,3 +46,5 @@ export const ProjectNextTitle = React.memo(() => {
 
   return <h1 css={styles.title}>{title}</h1>;
 });
+
+ProjectNextTitle.displayName = 'ProjectNextTitle';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx
deleted file mode 100644
index f581b5116125a..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import type { BehaviorSubject } from 'rxjs';
-import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
-import { createMockChromeComponentsDeps, TestChromeProviders } from '../test_helpers';
-import { ProjectNextTrailingActions } from './trailing_actions';
-
-describe('ProjectNextTrailingActions', () => {
-  it('renders nothing when no app menu, legacy action menu, or AI button', () => {
-    const deps = createMockChromeComponentsDeps();
-
-    const { container } = render(
-      <TestChromeProviders deps={deps}>
-        <ProjectNextTrailingActions />
-      </TestChromeProviders>
-    );
-
-    expect(
-      container.querySelector('[data-test-subj="chromeProjectNextHeaderTrailing"]')
-    ).toBeNull();
-  });
-
-  it('renders the trailing region when the AI button slot is set', () => {
-    const deps = createMockChromeComponentsDeps();
-    const chrome = chromeServiceMock.createStartContract();
-    const aiButton$ = chrome.next.aiButton.get$() as BehaviorSubject<React.ReactNode | undefined>;
-    aiButton$.next(<span data-test-subj="aiButtonTest">AI</span>);
-
-    render(
-      <TestChromeProviders deps={deps} chrome={chrome}>
-        <ProjectNextTrailingActions />
-      </TestChromeProviders>
-    );
-
-    expect(screen.getByTestId('chromeProjectNextHeaderTrailing')).toBeInTheDocument();
-    expect(screen.getByTestId('aiButtonTest')).toBeInTheDocument();
-  });
-});
diff --git a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
index b285a5d378ac6..0ed5e9974150a 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
@@ -54,3 +54,5 @@ export const ProjectNextTrailingActions = React.memo(() => {
     </div>
   );
 });
+
+ProjectNextTrailingActions.displayName = 'ProjectNextTrailingActions';
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 069bd2f5018f7..adfba103e454c 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -9,7 +9,11 @@
 
 import { BehaviorSubject, of } from 'rxjs';
 import type { DeeplyMockedKeys } from '@kbn/utility-types-jest';
-import type { ChromeBadge, ChromeBreadcrumb } from '@kbn/core-chrome-browser';
+import type {
+  ChromeBadge,
+  ChromeBreadcrumb,
+  ChromeNextHeaderConfig,
+} from '@kbn/core-chrome-browser';
 import type {
   InternalChromeSetup,
   InternalChromeStart,
@@ -24,6 +28,8 @@ const createSetupContractMock = (): DeeplyMockedKeys<InternalChromeSetup> => {
 };
 
 const createStartContractMock = () => {
+  const nextHeaderState$ = new BehaviorSubject<ChromeNextHeaderConfig | undefined>(undefined);
+
   const startContract: DeeplyMockedKeys<InternalChromeStart> = lazyObject({
     withProvider: jest.fn((children) => children),
     sidebar: lazyObject(sidebarServiceMock.createStartContract()),
@@ -100,8 +106,10 @@ const createStartContractMock = () => {
     }),
     next: lazyObject({
       header: lazyObject({
-        get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
-        set: jest.fn(),
+        get$: jest.fn().mockReturnValue(nextHeaderState$),
+        set: jest.fn((config?: ChromeNextHeaderConfig) => {
+          nextHeaderState$.next(config);
+        }),
       }),
       aiButton: lazyObject({
         get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index 5d95ff72b282b..08669b412fd58 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -56,8 +56,9 @@ export type {
   SidebarSetup,
   SidebarStart,
   ChromeNextHeaderBack,
+  ChromeNextHeaderBadge,
   ChromeNextHeaderConfig,
-  ChromeNextHeaderMetadataItem,
+  ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderTab,
   ChromeNextHeaderCallout,
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 1c13769e1223f..5057ff2511c9f 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -62,8 +62,9 @@ export type {
 
 export type {
   ChromeNextHeaderBack,
+  ChromeNextHeaderBadge,
   ChromeNextHeaderConfig,
-  ChromeNextHeaderMetadataItem,
+  ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderTab,
   ChromeNextHeaderCallout,
diff --git a/src/core/packages/chrome/browser/src/next_header.ts b/src/core/packages/chrome/browser/src/next_header.ts
index df79ca72718fb..e25127cf5bffd 100644
--- a/src/core/packages/chrome/browser/src/next_header.ts
+++ b/src/core/packages/chrome/browser/src/next_header.ts
@@ -6,7 +6,7 @@
  * your election, the "Elastic License 2.0", the "GNU Affero General Public
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
-
+import type { ReactNode } from 'react';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 
 /**
@@ -23,17 +23,22 @@ export interface ChromeNextHeaderConfig {
   title: string;
 
   /**
-   * Optional metadata badges/text rendered below the title.
-   * E.g. "Managed", "Read-only", creation date, severity.
-   * Limited to a single row; Chrome controls layout.
+   * Badges inline next to the title. Chrome shows 1–2 as-is; for 3+, first badge plus "+N" popover
+   * for the rest. Max 200px per badge; `filled` is not exposed. TODO: render in `ProjectNextHeader`.
+   */
+  badges?: ChromeNextHeaderBadge[];
+
+  /**
+   * Second row below the title (max 3 items, all visible). Text (`EuiText`) or button (`EuiButtonEmpty`).
+   * TODO: render in `ProjectNextHeader`.
    */
-  metadata?: ChromeNextHeaderMetadataItem[];
+  metadata?: ChromeNextHeaderMetadataSlotItem[];
 
   /**
-   * Global object actions whose icon, label, and position are fixed by Chrome.
-   * Apps opt-in by providing handlers; they cannot change icon or order.
+   * Global object actions next to the title. Edit title and share use fixed Chrome icons;
+   * favorite is an optional app-supplied `ReactNode` (e.g. content-management FavoriteButton).
    *
-   * Rendering order (fixed by Chrome): edit, share, favorite.
+   * Rendering order (fixed by Chrome): editTitle, share, favorite.
    */
   globalActions?: ChromeNextHeaderGlobalActions;
 
@@ -68,32 +73,38 @@ export interface ChromeNextHeaderBack {
   label?: string;
 }
 
-export interface ChromeNextHeaderMetadataItem {
+export interface ChromeNextHeaderBadge {
   label: string;
-  type: 'badge' | 'text';
-  /** Badge color (EUI badge color). Only used when type is 'badge'. */
-  color?: string;
+  /** EUI badge color. `filled` is intentionally excluded. */
+  color?: 'hollow' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'accent';
   tooltip?: string;
 }
 
 /**
- * Global actions whose icon, label, and position are fixed by Chrome.
- * Apps provide only the behavioral handlers.
+ * A single metadata slot item — either plain text or an interactive button.
+ * Text renders as `EuiText`; button renders as `EuiButtonEmpty`.
+ */
+export type ChromeNextHeaderMetadataSlotItem =
+  | { type: 'text'; label: string }
+  | { type: 'button'; label: string; onClick: () => void; iconType?: string };
+
+/**
+ * Global actions beside the Chrome-Next title.
  */
 export interface ChromeNextHeaderGlobalActions {
-  /** Edit action. Chrome renders a pencil icon next to the title. */
-  edit?: {
-    onClick: () => void;
+  /**
+   * Inline title edit (Chrome UI TBD). `onSave` runs when the user commits a new title.
+   */
+  editTitle?: {
+    onSave: (newTitle: string) => void;
   };
-  /** Share action. Chrome renders a share icon. */
+  /** Share; Chrome renders the icon. */
   share?: {
     onClick: () => void;
   };
-  /** Favorite/star action. Chrome renders a star icon. */
-  favorite?: {
-    isFavorited: boolean;
-    onClick: () => void;
-  };
+  /** Favorite control as `ReactNode` (e.g. FavoriteButton) so apps supply providers and clients. */
+  /** TODO: should become a structured API */
+  favorite?: ReactNode;
 }
 
 export interface ChromeNextHeaderTab {
diff --git a/src/platform/plugins/shared/dashboard/moon.extend.yml b/src/platform/plugins/shared/dashboard/moon.extend.yml
new file mode 100644
index 0000000000000..9f886f465f7c9
--- /dev/null
+++ b/src/platform/plugins/shared/dashboard/moon.extend.yml
@@ -0,0 +1,2 @@
+dependsOn:
+  - '@kbn/core-chrome-browser'
diff --git a/src/platform/plugins/shared/dashboard/moon.yml b/src/platform/plugins/shared/dashboard/moon.yml
index 1dacb2114a174..4560d45130b1d 100644
--- a/src/platform/plugins/shared/dashboard/moon.yml
+++ b/src/platform/plugins/shared/dashboard/moon.yml
@@ -114,9 +114,11 @@ dependsOn:
   - '@kbn/test'
   - '@kbn/core-chrome-app-menu-components'
   - '@kbn/core-chrome-app-menu'
+  - '@kbn/core-chrome-browser'
   - '@kbn/test-jest-helpers'
   - '@kbn/scout'
   - '@kbn/cps-utils'
+  - '@kbn/core-chrome-browser'
 tags:
   - plugin
   - prod
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
index 667e44fa5c3c2..99921e30c27f3 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
@@ -483,6 +483,13 @@ export const useDashboardMenuItems = ({
     isLabsEnabled,
   ]);
 
+  const chromeNextHeaderShareGlobalAction = useMemo(() => {
+    if (!shareService) {
+      return undefined;
+    }
+    return { onClick: showShare };
+  }, [showShare]);
+
   const editModeTopNavConfig = useMemo(() => {
     const { storeSearchSession } = getDashboardCapabilities();
 
@@ -525,5 +532,9 @@ export const useDashboardMenuItems = ({
     isLabsEnabled,
   ]);
 
-  return { viewModeTopNavConfig, editModeTopNavConfig };
+  return {
+    viewModeTopNavConfig,
+    editModeTopNavConfig,
+    chromeNextHeaderShareGlobalAction,
+  };
 };
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
index 5b7afd24ad21a..deaca8cdaaacf 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -31,6 +31,7 @@ import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyLabsFlyout, withSuspense } from '@kbn/presentation-util-plugin/public';
 
 import { AppMenu } from '@kbn/core-chrome-app-menu';
+import type { ChromeNextHeaderGlobalActions } from '@kbn/core-chrome-browser';
 import { UI_SETTINGS } from '../../common/constants';
 import { DASHBOARD_APP_ID } from '../../common/page_bundle_constants';
 import type { SaveDashboardReturn } from '../dashboard_api/save_modal/types';
@@ -118,6 +119,11 @@ export function InternalDashboardTopNav({
     dashboardInternalApi.unpublishedEsqlVariables$
   );
 
+  const chromeNextHeaderFavoriteGlobalAction = useMemo(
+    () => (lastSavedId ? <DashboardFavoriteButton dashboardId={lastSavedId} /> : undefined),
+    [lastSavedId]
+  );
+
   const hasUnpublishedFilters = useMemo(() => {
     return !deepEqual(publishedChildFilters ?? [], unpublishedChildFilters ?? []);
   }, [publishedChildFilters, unpublishedChildFilters]);
@@ -298,12 +304,31 @@ export function InternalDashboardTopNav({
     [redirectTo]
   );
 
-  const { viewModeTopNavConfig, editModeTopNavConfig } = useDashboardMenuItems({
-    isLabsShown,
-    setIsLabsShown,
-    maybeRedirect,
-    showResetChange,
-  });
+  const { viewModeTopNavConfig, editModeTopNavConfig, chromeNextHeaderShareGlobalAction } =
+    useDashboardMenuItems({
+      isLabsShown,
+      setIsLabsShown,
+      maybeRedirect,
+      showResetChange,
+    });
+
+  useEffect(() => {
+    const globalActions: ChromeNextHeaderGlobalActions = {};
+    if (chromeNextHeaderShareGlobalAction) {
+      globalActions.share = chromeNextHeaderShareGlobalAction;
+    }
+    if (chromeNextHeaderFavoriteGlobalAction) {
+      globalActions.favorite = chromeNextHeaderFavoriteGlobalAction;
+    }
+
+    coreServices.chrome.next.header.set({
+      title: title ?? '',
+      globalActions: Object.keys(globalActions).length > 0 ? globalActions : undefined,
+    });
+    return () => {
+      coreServices.chrome.next.header.set(undefined);
+    };
+  }, [title, chromeNextHeaderShareGlobalAction, chromeNextHeaderFavoriteGlobalAction]);
 
   UseUnmount(() => {
     dashboardApi.clearOverlays();
@@ -325,6 +350,7 @@ export function InternalDashboardTopNav({
           const badgeButton = <EuiBadge {...badgeProps}>{badgeText}</EuiBadge>;
           return (
             <EuiPopover
+              aria-label={dashboardManagedBadge.getBadgeAriaLabel()}
               button={badgeButton}
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
diff --git a/src/platform/plugins/shared/dashboard/tsconfig.json b/src/platform/plugins/shared/dashboard/tsconfig.json
index 895ece8180251..29654473397c8 100644
--- a/src/platform/plugins/shared/dashboard/tsconfig.json
+++ b/src/platform/plugins/shared/dashboard/tsconfig.json
@@ -112,6 +112,7 @@
     "@kbn/test",
     "@kbn/core-chrome-app-menu-components",
     "@kbn/core-chrome-app-menu",
+    "@kbn/core-chrome-browser",
     "@kbn/test-jest-helpers",
     "@kbn/scout",
     "@kbn/cps-utils",

From b2f28a51cd7ccc1ff892903463e32f7776bc88f2 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 1 Apr 2026 16:23:02 +0200
Subject: [PATCH 11/77] [ChromeNext] Sidenav tool slots, help pipeline, and
 global search API stub (#260460)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="1857" height="1163" alt="Screenshot 2026-03-31 at 14 37 16"
src="https://github.com/user-attachments/assets/3b68b243-f299-42f4-8e27-c97ffceb814d"
/>

<img width="1740" height="933" alt="Screenshot 2026-03-31 at 14 56 47"
src="https://github.com/user-attachments/assets/59a96b3c-a942-4bcc-b63a-cacdb3037499"
/>


## Changes

- Force logo to be "elastic" with dark text and no rendered lable
underneath when behind `chrome-next`
- Add header/footer slots into sidenav for injecting chrome
functionality
  - Stub search button into header
  - Map existing help menu into footer
- Rework help menu data generation to map to both the old popover and
sidenav section
- Expose stub global search api

## Implementation

### Sidenav tool slots (`@kbn/core-chrome-navigation`)

The `Navigation` component now accepts an optional `tools` prop
(`ToolSlots`) with two zones:

- **`headerTools`** — rendered below the logo (e.g. global search
button)
- **`footerTools`** — rendered above the collapse toggle (e.g. help
button)

To support this, the old monolithic `Footer` component (which mixed nav
links and the collapse button into one element) has been split into
three distinct sub-components on `SideNav`:

| New component | Role |
|---|---|
| `SideNav.FooterNav` | Keyboard-navigable `<nav>` for footer links |
| `SideNav.FooterToolbar` | `role="group"` container for footer tool
icons |
| `SideNav.HeaderToolbar` | `role="group"` container for header tool
icons (new) |

Tool items (`ToolItem`) follow the same popover pattern as navigation
items but are intentionally typed separately — they are controls, not
navigation destinations.

---

### New props on `SideNavLogo`:
- `hideLabel` — suppresses the text label below the icon in expanded
mode (aria-label still set)
- `iconColor` — `'default'` (brand colors) | `'text'` (monochromatic).
In next-chrome mode the Elastic logo is now always rendered as
`logoElastic` in `'text'` color.

---

### Help pipeline refactor (`@kbn/core-chrome-browser-components`)

All help-link sources (global extension links, default Kibana/doc links,
per-app extension links) are now normalised in one place and exposed as
a reactive stream:

- `help_menu_links.ts` — pure `buildHelpLinks()` function: takes raw
Chrome state and produces a stable `HelpLinks` shape (`{ global,
default, extension? }`)
- `help_links_hooks.ts` — `useHelpLinks$(): Observable<HelpLinks>` and
`useHelpLinks(): HelpLinks`, shareable across the header and sidenav

`HeaderHelpMenu` is simplified to consume `useHelpLinks()` directly
(removes inline `buildDefaultContentLinks` / `useMemo` logic previously
duplicated between classic and project modes).

The project sidenav uses `useHelpLinks$()` inside a `combineLatest` to
build the Help footer tool item without additional React re-renders.

---

### Global search API stub (`chrome.next.globalSearch`)

Adds `chrome.next.globalSearch.set(config?)` to the public `ChromeStart`
contract. Plugins call this to register (or clear) a search handler:

```ts
chrome.next.globalSearch.set({ onClick: () => openSearchModal() });
```

Chrome renders a search icon button in the sidenav header toolbar;
clicking it fires `onClick`. Passing `undefined` removes the button. The
config is global — persists across app changes, like `aiButton`.

This is a minimal stub — just enough to wire the button end-to-end. The
actual search UI is owned by the consumer plugin.
---
 .../chrome/browser-components/index.ts        |   2 +-
 .../chrome/browser-components/moon.yml        |   3 +
 .../chrome/browser-components/src/context.tsx |   2 +
 .../project/sidenav/navigation/navigation.tsx |  63 ++-
 .../navigation/to_chrome_tool_slots.ts        | 103 +++++
 .../src/shared/chrome_hooks.ts                |  52 +--
 .../src/shared/header_help_menu.tsx           | 225 ++++------
 .../src/shared/help_links_hooks.ts            |  52 +++
 .../src/shared/help_menu_links.ts             | 160 ++++++++
 .../browser-components/src/test_helpers.tsx   |   2 +
 .../chrome/browser-components/tsconfig.json   |   3 +
 .../chrome/browser-internal-types/index.ts    |   4 +
 .../browser-internal/src/chrome_api.tsx       |   4 +
 .../src/chrome_service.test.tsx               |   1 +
 .../src/state/chrome_state.ts                 |   4 +
 .../browser-mocks/src/chrome_service.mock.ts  |  10 +
 src/core/packages/chrome/browser/index.ts     |   1 +
 .../packages/chrome/browser/src/contracts.ts  |   9 +
 src/core/packages/chrome/browser/src/index.ts |   2 +
 .../chrome/browser/src/next_global_search.ts  |  16 +
 .../packages/chrome/feature-flags/moon.yml    |  26 +-
 .../layouts/grid/grid_layout.tsx              |   1 +
 .../packages/chrome/navigation/README.mdx     |  31 ++
 src/core/packages/chrome/navigation/index.ts  |   2 +
 .../chrome/navigation/packaging/README.md     |   3 +
 .../navigation/packaging/example/src/app.tsx  |  36 +-
 .../packaging/react/type_validation.ts        |  31 ++
 .../navigation/packaging/react/types.ts       |  35 +-
 .../src/__stories__/navigation.stories.tsx    |  61 +++
 .../__snapshots__/both_modes.test.tsx.snap    |  71 ++--
 .../collapsed_mode.test.tsx.snap              |  83 ++--
 .../__snapshots__/expanded_mode.test.tsx.snap |  71 ++--
 .../src/__tests__/both_modes.test.tsx         |   6 +-
 .../src/components/footer/index.tsx           | 133 +-----
 .../navigation/src/components/footer/item.tsx | 134 +-----
 .../navigation/src/components/footer/nav.tsx  | 118 ++++++
 .../src/components/footer/toolbar.tsx         |  73 ++++
 .../src/components/header/index.tsx           |  52 +++
 .../src/components/icon_button/index.tsx      | 122 ++++++
 .../src/components/menu_item/index.tsx        |   8 +-
 .../navigation/src/components/navigation.tsx  | 387 +++++++++++++-----
 .../src/components/side_nav/index.tsx         |  14 +-
 .../src/components/side_nav/logo.tsx          |  21 +-
 .../src/components/side_nav/side_panel.tsx    |   2 +-
 .../src/components/tool_item/index.tsx        |  36 ++
 .../navigation/src/hooks/use_navigation.ts    |   2 +-
 .../navigation/src/utils/get_has_submenu.ts   |   4 +-
 src/core/packages/chrome/navigation/types.ts  |  44 +-
 .../plugins/shared/dashboard/moon.yml         |   2 +-
 .../global_search_bar/public/plugin.tsx       |   8 +
 50 files changed, 1629 insertions(+), 706 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts
 create mode 100644 src/core/packages/chrome/browser/src/next_global_search.ts
 create mode 100644 src/core/packages/chrome/navigation/src/components/footer/nav.tsx
 create mode 100644 src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx
 create mode 100644 src/core/packages/chrome/navigation/src/components/header/index.tsx
 create mode 100644 src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
 create mode 100644 src/core/packages/chrome/navigation/src/components/tool_item/index.tsx

diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 23a63c5679c71..0ed6dac9d116e 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -17,4 +17,4 @@ export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_side
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
 export { HeaderBreadcrumbsBadges, HeaderTopBanner, ChromelessHeader } from './src/shared';
-export { useHasAppMenu } from './src/shared/chrome_hooks';
+export { useHasAppMenu, useIsNextChrome } from './src/shared/chrome_hooks';
diff --git a/src/core/packages/chrome/browser-components/moon.yml b/src/core/packages/chrome/browser-components/moon.yml
index e7791f8718e52..a64b7b61cc827 100644
--- a/src/core/packages/chrome/browser-components/moon.yml
+++ b/src/core/packages/chrome/browser-components/moon.yml
@@ -35,9 +35,12 @@ dependsOn:
   - '@kbn/core-chrome-layout-constants'
   - '@kbn/core-chrome-navigation'
   - '@kbn/core-chrome-sidebar-components'
+  - '@kbn/core-chrome-feature-flags'
   - '@kbn/core-custom-branding-browser'
   - '@kbn/core-custom-branding-common'
   - '@kbn/core-doc-links-browser'
+  - '@kbn/core-feature-flags-browser'
+  - '@kbn/core-feature-flags-browser-mocks'
   - '@kbn/core-doc-links-browser-mocks'
   - '@kbn/core-http-browser'
   - '@kbn/core-http-browser-mocks'
diff --git a/src/core/packages/chrome/browser-components/src/context.tsx b/src/core/packages/chrome/browser-components/src/context.tsx
index c9c584e400601..f275a45bf6343 100644
--- a/src/core/packages/chrome/browser-components/src/context.tsx
+++ b/src/core/packages/chrome/browser-components/src/context.tsx
@@ -13,6 +13,7 @@ import type { InternalApplicationStart } from '@kbn/core-application-browser-int
 import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
+import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
 
 export interface ChromeComponentsDeps {
   application: Pick<
@@ -22,6 +23,7 @@ export interface ChromeComponentsDeps {
   http: Pick<HttpStart, 'basePath' | 'getLoadingCount$'>;
   docLinks: DocLinksStart;
   customBranding: Pick<CustomBrandingStart, 'customBranding$'>;
+  featureFlags: Pick<FeatureFlagsStart, 'getBooleanValue' | 'getBooleanValue$'>;
 }
 
 const ChromeComponentsContext = createContext<ChromeComponentsDeps | null>(null);
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
index dc08155e97b55..287af2fb38645 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
@@ -8,16 +8,19 @@
  */
 
 import React, { useMemo } from 'react';
-import { map } from 'rxjs';
+import { combineLatest, map } from 'rxjs';
 import { Navigation as NavigationComponent } from '@kbn/core-chrome-navigation';
 import classnames from 'classnames';
 import type { SolutionId } from '@kbn/core-chrome-browser';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { KibanaSectionErrorBoundary } from '@kbn/shared-ux-error-boundary';
-import { useBasePath } from '../../../shared/chrome_hooks';
+import type { ToolSlots } from '@kbn/core-chrome-navigation/types';
+import { useBasePath, useIsNextChrome } from '../../../shared/chrome_hooks';
+import { useHelpLinks$ } from '../../../shared/help_links_hooks';
 import type { NavigationItems } from './to_navigation_items';
 import { toNavigationItems } from './to_navigation_items';
+import { buildToolSlots } from './to_chrome_tool_slots';
 import { PanelStateManager } from './panel_state_manager';
 
 export interface ChromeNavigationProps {
@@ -33,12 +36,13 @@ export const Navigation = (props: ChromeNavigationProps) => {
     return null;
   }
 
-  const { navItems, logoItem, activeItemId, solutionId } = state;
+  const { navItems, logoItem, activeItemId, solutionId, toolSlots } = state;
 
   return (
     <KibanaSectionErrorBoundary sectionName={'Navigation'} maxRetries={3}>
       <NavigationComponent
         items={navItems}
+        tools={toolSlots}
         logo={logoItem}
         isCollapsed={props.isCollapsed}
         setWidth={props.setWidth}
@@ -54,19 +58,60 @@ export const Navigation = (props: ChromeNavigationProps) => {
 // eslint-disable-next-line import/no-default-export
 export default Navigation;
 
-const useNavigationItems = (): (NavigationItems & { solutionId: SolutionId }) | null => {
+interface NavigationState extends NavigationItems {
+  solutionId: SolutionId;
+  toolSlots: ToolSlots;
+}
+
+const useNavigationItems = (): NavigationState | null => {
   const chrome = useChromeService();
   const basePath = useBasePath();
+  const helpLinks$ = useHelpLinks$();
+  const isNextChrome = useIsNextChrome();
 
   const items$ = useMemo(() => {
     const panelStateManager = new PanelStateManager(basePath.get());
-    return chrome.project.getNavigation$().pipe(
-      map((nav) => ({
-        ...toNavigationItems(nav.navigationTree, nav.activeNodes, panelStateManager),
-        solutionId: nav.solutionId,
+
+    const navState$ = chrome.project.getNavigation$().pipe(
+      map((nav) => {
+        const { navItems, logoItem, activeItemId } = toNavigationItems(
+          nav.navigationTree,
+          nav.activeNodes,
+          panelStateManager
+        );
+        return {
+          solutionId: nav.solutionId,
+          // In the `next-chrome` we want to show the elastic logo instead of the default product logo
+          logoItem: isNextChrome
+            ? {
+                ...logoItem,
+                iconType: 'logoElastic' as const,
+                iconColor: 'text' as const,
+                hideLabel: true,
+              }
+            : logoItem,
+          activeItemId,
+          navItems,
+        };
+      })
+    );
+
+    const toolSlots$ = combineLatest([chrome.next.globalSearch.get$(), helpLinks$]).pipe(
+      map(([searchConfig, helpLinks]) =>
+        buildToolSlots({
+          globalSearch: searchConfig,
+          helpLinks,
+        })
+      )
+    );
+
+    return combineLatest([navState$, toolSlots$]).pipe(
+      map(([navState, toolSlots]) => ({
+        ...navState,
+        toolSlots,
       }))
     );
-  }, [chrome, basePath]);
+  }, [chrome, basePath, helpLinks$, isNextChrome]);
 
   return useObservable(items$, null);
 };
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
new file mode 100644
index 0000000000000..4d042ec0998ba
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+import type { ChromeNextGlobalSearchConfig } from '@kbn/core-chrome-browser';
+import type {
+  SecondaryMenuItem,
+  SecondaryMenuSection,
+  ToolItem,
+  ToolSlots,
+} from '@kbn/core-chrome-navigation/types';
+import type { HelpLinks, HelpMenuLinkItem } from '../../../shared/help_menu_links';
+
+export interface ToolSlotsInput {
+  globalSearch?: ChromeNextGlobalSearchConfig;
+  helpLinks: HelpLinks;
+}
+
+export const buildToolSlots = (input: ToolSlotsInput): ToolSlots => ({
+  headerTools: getHeaderTools(input.globalSearch),
+  footerTools: getFooterTools(input.helpLinks),
+});
+
+const getHeaderTools = (globalSearch?: ChromeNextGlobalSearchConfig): ToolItem[] => {
+  if (!globalSearch) {
+    return [];
+  }
+
+  return [
+    {
+      id: 'globalSearch',
+      label: i18n.translate('core.chrome.projectSideNav.globalSearchLabel', {
+        defaultMessage: 'Search',
+      }),
+      iconType: 'search',
+      onClick: globalSearch.onClick,
+    },
+  ];
+};
+
+const getFooterTools = (helpLinks: HelpLinks): ToolItem[] => {
+  const helpItem = getHelpToolItem(helpLinks);
+  return helpItem ? [helpItem] : [];
+};
+
+const getHelpToolItem = (helpLinks: HelpLinks): ToolItem | undefined => {
+  const sections = buildHelpSections(helpLinks);
+
+  if (sections.length === 0) {
+    return undefined;
+  }
+
+  return {
+    id: 'help',
+    label: i18n.translate('core.chrome.projectSideNav.helpLabel', {
+      defaultMessage: 'Help',
+    }),
+    iconType: 'question',
+    sections,
+  };
+};
+
+const buildHelpSections = (helpLinks: HelpLinks): SecondaryMenuSection[] => {
+  const mainItems = toSecondaryItems([...helpLinks.global, ...helpLinks.default]);
+  const extensionItems = toSecondaryItems(helpLinks.extension?.items ?? []);
+
+  const sections: SecondaryMenuSection[] = [];
+  if (mainItems.length > 0) {
+    sections.push({ id: 'help', items: mainItems });
+  }
+  if (extensionItems.length > 0) {
+    sections.push({
+      id: 'helpExtension',
+      label: helpLinks.extension?.label,
+      items: extensionItems,
+    });
+  }
+  return sections;
+};
+
+const toSecondaryItems = (items: HelpMenuLinkItem[]): SecondaryMenuItem[] =>
+  items
+    .filter(
+      (
+        item
+      ): item is typeof item & {
+        href: string;
+        label: string;
+      } => Boolean(item.href) && typeof item.label === 'string'
+    )
+    .map(({ id, label, href, 'data-test-subj': dataTestSubj, isExternal }) => ({
+      id,
+      label,
+      href,
+      'data-test-subj': dataTestSubj,
+      isExternal,
+    }));
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index 71a73ec7ce4a4..c0983c11ac22a 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -8,13 +8,10 @@
  */
 
 import { useMemo } from 'react';
-import { combineLatest, debounceTime, map } from 'rxjs';
 import type { Observable } from 'rxjs';
+import { debounceTime, map } from 'rxjs';
 import type {
   ChromeBreadcrumb,
-  ChromeGlobalHelpExtensionMenuLink,
-  ChromeHelpExtension,
-  ChromeHelpMenuLink,
   ChromeNavControl,
   ChromeNavLink,
   ChromeNextHeaderConfig,
@@ -26,6 +23,7 @@ import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
+import { NEXT_CHROME_FEATURE_FLAG_KEY } from '@kbn/core-chrome-feature-flags';
 import { useChromeComponentsDeps } from '../context';
 
 /**
@@ -154,46 +152,6 @@ export function useNavControls(position: NavControlPosition): ChromeNavControl[]
   return useObservable(controls$, []);
 }
 
-interface HelpMenuState {
-  menuLinks: ChromeHelpMenuLink[];
-  extension: ChromeHelpExtension | undefined;
-  supportUrl: string;
-  globalExtensionMenuLinks: ChromeGlobalHelpExtensionMenuLink[];
-}
-
-const INITIAL_HELP_MENU: HelpMenuState = {
-  menuLinks: [],
-  extension: undefined,
-  supportUrl: '',
-  globalExtensionMenuLinks: [],
-};
-
-/**
- * Returns all help menu state as a single object (single subscription).
- * Used by `HeaderHelpMenu` (instantiated from both classic and project headers).
- */
-export function useHelpMenu(): HelpMenuState {
-  const chrome = useChromeService();
-  const helpMenu$ = useMemo(
-    () =>
-      combineLatest([
-        chrome.getHelpMenuLinks$(),
-        chrome.getHelpExtension$(),
-        chrome.getHelpSupportUrl$(),
-        chrome.getGlobalHelpExtensionMenuLinks$(),
-      ]).pipe(
-        map(([menuLinks, extension, supportUrl, globalExtensionMenuLinks]) => ({
-          menuLinks,
-          extension,
-          supportUrl,
-          globalExtensionMenuLinks,
-        }))
-      ),
-    [chrome]
-  );
-  return useObservable(helpMenu$, INITIAL_HELP_MENU);
-}
-
 /**
  * Returns the current side nav collapsed state and a toggle callback.
  * Used by `GridLayoutProjectSideNav`.
@@ -291,3 +249,9 @@ export function useNextHeader(): ChromeNextHeaderConfig | undefined {
   const config$ = useMemo(() => chrome.next.header.get$(), [chrome]);
   return useObservable(config$, undefined);
 }
+
+/** Returns whether the next-chrome experience is enabled via feature flag. */
+export function useIsNextChrome(): boolean {
+  const { featureFlags } = useChromeComponentsDeps();
+  return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
+}
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
index 27ea1cdcf9f14..1446bf56cfd96 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { Fragment, useState, useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { EuiButtonEmptyProps } from '@elastic/eui';
@@ -18,94 +18,47 @@ import {
   EuiHeaderSectionItemButton,
   EuiIcon,
   EuiPopover,
+  EuiPopoverFooter,
   EuiPopoverTitle,
   EuiSpacer,
-  EuiPopoverFooter,
   useEuiTheme,
 } from '@elastic/eui';
-
-import type { ChromeHelpMenuLink } from '@kbn/core-chrome-browser';
-import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import { useIsServerless, useKibanaVersion } from '@kbn/react-env';
-import { useChromeStyle } from '@kbn/core-chrome-browser-hooks';
-
 import { css } from '@emotion/react';
 import { isModifiedOrPrevented } from './nav_link';
-import { useHelpMenu, useNavigateToUrl, useDocLinks } from './chrome_hooks';
-
-const buildDefaultContentLinks = ({
-  kibanaDocLink,
-  docLinks,
-  helpSupportUrl,
-}: {
-  kibanaDocLink: string;
-  docLinks: DocLinksStart;
-  helpSupportUrl: string;
-}): ChromeHelpMenuLink[] => [
-  {
-    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuKibanaDocumentationTitle', {
-      defaultMessage: 'Kibana documentation',
-    }),
-    href: kibanaDocLink,
-  },
-  {
-    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuAskElasticTitle', {
-      defaultMessage: 'Ask Elastic',
-    }),
-    href: helpSupportUrl,
-  },
-  {
-    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuOpenGitHubIssueTitle', {
-      defaultMessage: 'Open an issue in GitHub',
-    }),
-    href: docLinks.links.kibana.createGithubIssue,
-  },
-];
+import { useNavigateToUrl } from './chrome_hooks';
+import { useHelpLinks } from './help_links_hooks';
 
 const createCustomLink = (
   index: number,
   text: React.ReactNode,
   addSpacer?: boolean,
   buttonProps?: EuiButtonEmptyProps
-) => {
-  return (
-    <Fragment key={`helpButton${index}`}>
-      <EuiButtonEmpty {...buttonProps} size="s" flush="left">
-        {text}
-      </EuiButtonEmpty>
-      {addSpacer && <EuiSpacer size="xs" />}
-    </Fragment>
-  );
-};
+) => (
+  <Fragment key={`helpButton${index}`}>
+    <EuiButtonEmpty {...buttonProps} size="s" flush="left">
+      {text}
+    </EuiButtonEmpty>
+    {addSpacer && <EuiSpacer size="xs" />}
+  </Fragment>
+);
 
 export const HeaderHelpMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const closeMenu = useCallback(() => setIsOpen(false), []);
+  const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
+
   const navigateToUrl = useNavigateToUrl();
-  const docLinks = useDocLinks();
   const { euiTheme } = useEuiTheme();
-  const [isOpen, setIsOpen] = useState(false);
   const isServerless = useIsServerless();
   const kibanaVersion = useKibanaVersion();
-  const chromeStyle = useChromeStyle();
-  const kibanaDocLink =
-    chromeStyle === 'project' ? docLinks.links.elasticStackGetStarted : docLinks.links.kibana.guide;
 
   const {
-    menuLinks: providedDefaultContentLinks,
-    extension: helpExtension,
-    supportUrl: helpSupportUrl,
-    globalExtensionMenuLinks: globalHelpExtensionMenuLinks,
-  } = useHelpMenu();
-
-  const defaultContentLinks = useMemo(
-    () =>
-      providedDefaultContentLinks.length === 0
-        ? buildDefaultContentLinks({ kibanaDocLink, docLinks, helpSupportUrl })
-        : providedDefaultContentLinks,
-    [providedDefaultContentLinks, kibanaDocLink, docLinks, helpSupportUrl]
-  );
-
-  const closeMenu = useCallback(() => setIsOpen(false), []);
-  const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
+    global: globalHelpLinks,
+    default: defaultContentLinks,
+    extension: helpExtensionLinks,
+  } = useHelpLinks();
+  const extensionLinks = helpExtensionLinks?.items ?? [];
 
   const createOnClickHandler = useCallback(
     (href: string) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -124,100 +77,79 @@ export const HeaderHelpMenu = () => {
 
   const defaultContent = (
     <Fragment>
-      {defaultContentLinks.map(({ href, title, onClick: _onClick, dataTestSubj }, idx) => {
-        const isLast = idx === defaultContentLinks.length - 1;
+      {defaultContentLinks.map(
+        ({ href, label, onClick: _onClick, 'data-test-subj': dataTestSubj, target }, idx) => {
+          if (href && _onClick) {
+            throw new Error(
+              'Only one of `href` and `onClick` should be provided for the help menu link.'
+            );
+          }
 
-        if (href && _onClick) {
-          throw new Error(
-            'Only one of `href` and `onClick` should be provided for the help menu link.'
+          const hrefProps = href ? { href, target } : {};
+          const onClick = () => {
+            if (!_onClick) return;
+            _onClick();
+            closeMenu();
+          };
+
+          const isLast = idx === defaultContentLinks.length - 1;
+          return (
+            <Fragment key={`defaultHelpLink${idx}`}>
+              <EuiButtonEmpty
+                {...hrefProps}
+                onClick={onClick}
+                size="s"
+                flush="left"
+                data-test-subj={dataTestSubj}
+              >
+                {label}
+              </EuiButtonEmpty>
+              {!isLast && <EuiSpacer size="xs" />}
+            </Fragment>
           );
         }
-
-        const hrefProps = href ? { href, target: '_blank' } : {};
-        const onClick = () => {
-          if (!_onClick) return;
-          _onClick();
-          closeMenu();
-        };
-
-        return (
-          <Fragment key={idx}>
-            <EuiButtonEmpty
-              {...hrefProps}
-              onClick={onClick}
-              size="s"
-              flush="left"
-              data-test-subj={dataTestSubj}
-            >
-              {title}
-            </EuiButtonEmpty>
-            {!isLast && <EuiSpacer size="xs" />}
-          </Fragment>
-        );
-      })}
+      )}
     </Fragment>
   );
 
-  const globalCustomContent = globalHelpExtensionMenuLinks
-    .sort((a, b) => b.priority - a.priority)
-    .map((link, index) => {
-      const { linkType, content: text, href, external, ...rest } = link;
-      return createCustomLink(index, text, true, {
-        href,
-        onClick: external ? undefined : createOnClickHandler(href),
-        ...rest,
-      });
-    });
+  const globalCustomContent = globalHelpLinks.map((link, index) =>
+    createCustomLink(index, link.label, true, {
+      href: link.href,
+      onClick:
+        link.onClick ??
+        (link.href && !link.isExternal ? createOnClickHandler(link.href) : undefined),
+      rel: link.rel,
+      target: link.target,
+      'data-test-subj': link['data-test-subj'],
+    })
+  );
 
   let customContent: React.ReactNode = null;
-  if (helpExtension) {
-    const { appName, links, content } = helpExtension;
-
-    const customLinks =
-      links &&
-      links.map((link, index) => {
-        const addSpacer = index < links.length - 1;
-        switch (link.linkType) {
-          case 'documentation': {
-            const { linkType, ...rest } = link;
-            return createCustomLink(
-              index,
-              <FormattedMessage
-                id="core.ui.chrome.headerGlobalNav.helpMenuDocumentation"
-                defaultMessage="Documentation"
-              />,
-              addSpacer,
-              {
-                target: '_blank',
-                rel: 'noopener',
-                ...rest,
-              }
-            );
-          }
-          case 'custom': {
-            const { linkType, content: text, href, external, ...rest } = link;
-            return createCustomLink(index, text, addSpacer, {
-              href,
-              onClick: createOnClickHandler(href),
-              ...rest,
-            });
-          }
-          default:
-            break;
-        }
-      });
+  if (helpExtensionLinks) {
+    const customLinks = extensionLinks.map((link, index) =>
+      createCustomLink(index, link.label, index < extensionLinks.length - 1, {
+        href: link.href,
+        onClick:
+          link.onClick ??
+          (link.href && !link.isExternal ? createOnClickHandler(link.href) : undefined),
+        rel: link.rel,
+        target: link.target,
+        'data-test-subj': link['data-test-subj'],
+      })
+    );
 
-    const extensionContent = content?.({ hideHelpMenu: closeMenu }) ?? null;
+    const extensionContent =
+      helpExtensionLinks.renderContent?.({ hideHelpMenu: closeMenu }) ?? null;
 
     customContent = (
       <>
         <EuiPopoverTitle>
-          <h3>{appName}</h3>
+          <h3>{helpExtensionLinks.label}</h3>
         </EuiPopoverTitle>
         {customLinks}
         {extensionContent && (
           <>
-            {customLinks && <EuiSpacer size="xs" />}
+            {extensionLinks.length > 0 && <EuiSpacer size="xs" />}
             {extensionContent}
           </>
         )}
@@ -240,6 +172,9 @@ export const HeaderHelpMenu = () => {
 
   return (
     <EuiPopover
+      aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuPopoverAriaLabel', {
+        defaultMessage: 'Help menu',
+      })}
       anchorPosition="downRight"
       button={button}
       closePopover={closeMenu}
diff --git a/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts
new file mode 100644
index 0000000000000..1661f8a94d2f9
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useMemo } from 'react';
+import type { Observable } from 'rxjs';
+import { combineLatest, distinctUntilChanged, map } from 'rxjs';
+import equal from 'fast-deep-equal';
+import { useObservable } from '@kbn/use-observable';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import { useChromeStyle } from '@kbn/core-chrome-browser-hooks';
+import type { HelpLinks } from './help_menu_links';
+import { buildHelpLinks } from './help_menu_links';
+import { useChromeComponentsDeps } from '../context';
+
+/**
+ * Returns an observable of pre-built help menu link groups for the given chrome style.
+ * Used by both `HeaderHelpMenu` (via `useObservable`) and the project sidenav (via `combineLatest`).
+ */
+export function useHelpLinks$(): Observable<HelpLinks> {
+  const chrome = useChromeService();
+  const chromeStyle = useChromeStyle();
+  const docLinks = useChromeComponentsDeps().docLinks;
+  return useMemo(
+    () =>
+      combineLatest([
+        chrome.getHelpMenuLinks$(),
+        chrome.getHelpExtension$(),
+        chrome.getHelpSupportUrl$(),
+        chrome.getGlobalHelpExtensionMenuLinks$(),
+      ]).pipe(
+        map(([menuLinks, extension, supportUrl, globalExtensionMenuLinks]) =>
+          buildHelpLinks({
+            chromeStyle,
+            helpData: { menuLinks, extension, supportUrl, globalExtensionMenuLinks, docLinks },
+          })
+        ),
+        distinctUntilChanged(equal)
+      ),
+    [chrome, chromeStyle, docLinks]
+  );
+}
+
+export function useHelpLinks(): HelpLinks {
+  const helpLinks$ = useHelpLinks$();
+  return useObservable(helpLinks$, { global: [], default: [] });
+}
diff --git a/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts b/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts
new file mode 100644
index 0000000000000..0d426238a8bdc
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts
@@ -0,0 +1,160 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+import type {
+  ChromeGlobalHelpExtensionMenuLink,
+  ChromeHelpExtension,
+  ChromeHelpMenuLink,
+  ChromeStyle,
+} from '@kbn/core-chrome-browser';
+import type { DocLinksStart } from '@kbn/core-doc-links-browser';
+import { i18n } from '@kbn/i18n';
+
+interface HelpData {
+  menuLinks: ChromeHelpMenuLink[];
+  extension: ChromeHelpExtension | undefined;
+  supportUrl: string;
+  globalExtensionMenuLinks: ChromeGlobalHelpExtensionMenuLink[];
+  docLinks: DocLinksStart;
+}
+
+export interface HelpMenuLinkItem {
+  id: string;
+  label: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  'data-test-subj'?: string;
+  isExternal?: boolean;
+  rel?: string;
+  target?: string;
+}
+
+export interface HelpLinks {
+  global: HelpMenuLinkItem[];
+  default: HelpMenuLinkItem[];
+  extension?: {
+    label?: string;
+    items: HelpMenuLinkItem[];
+    renderContent?: ChromeHelpExtension['content'];
+  };
+}
+
+export const buildDefaultContentLinks = ({
+  chromeStyle,
+  docLinks,
+  helpSupportUrl,
+}: {
+  chromeStyle: ChromeStyle;
+  docLinks: DocLinksStart;
+  helpSupportUrl: string;
+}): ChromeHelpMenuLink[] => [
+  {
+    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuKibanaDocumentationTitle', {
+      defaultMessage: 'Kibana documentation',
+    }),
+    href:
+      chromeStyle === 'project'
+        ? docLinks.links.elasticStackGetStarted
+        : docLinks.links.kibana.guide,
+  },
+  {
+    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuAskElasticTitle', {
+      defaultMessage: 'Ask Elastic',
+    }),
+    href: helpSupportUrl,
+  },
+  {
+    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuOpenGitHubIssueTitle', {
+      defaultMessage: 'Open an issue in GitHub',
+    }),
+    href: docLinks.links.kibana.createGithubIssue,
+  },
+];
+
+export const buildHelpLinks = ({
+  chromeStyle,
+  helpData,
+}: {
+  chromeStyle: ChromeStyle;
+  helpData: HelpData;
+}): HelpLinks => {
+  const global = [...helpData.globalExtensionMenuLinks]
+    .sort((a, b) => b.priority - a.priority)
+    .map(({ content, external, priority, ...link }, index) => ({
+      id: `help-global-${index}`,
+      label: content,
+      href: link.href,
+      'data-test-subj': link['data-test-subj'],
+      isExternal: external || link.target === '_blank',
+      rel: link.rel,
+      target: link.target,
+    }));
+
+  const rawDefaultLinks =
+    helpData.menuLinks.length > 0
+      ? helpData.menuLinks
+      : buildDefaultContentLinks({
+          chromeStyle,
+          docLinks: helpData.docLinks,
+          helpSupportUrl: helpData.supportUrl,
+        });
+
+  const defaultLinks = rawDefaultLinks.map(({ title, href, onClick, dataTestSubj }, index) => ({
+    id: `help-default-${index}`,
+    label: title,
+    href,
+    onClick,
+    'data-test-subj': dataTestSubj,
+    isExternal: Boolean(href),
+    target: href ? '_blank' : undefined,
+  }));
+
+  const extensionItems = helpData.extension?.links?.map((link, index) => {
+    if (link.linkType === 'documentation') {
+      return {
+        id: `help-extension-${index}`,
+        label: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuDocumentation', {
+          defaultMessage: 'Documentation',
+        }),
+        href: link.href,
+        'data-test-subj': link['data-test-subj'],
+        isExternal: true,
+        rel: link.rel ?? 'noopener',
+        target: link.target ?? '_blank',
+      };
+    }
+
+    return {
+      id: `help-extension-${index}`,
+      label: link.content,
+      href: link.href,
+      'data-test-subj': link['data-test-subj'],
+      isExternal: link.external || link.target === '_blank',
+      rel: link.rel,
+      target: link.target,
+    };
+  });
+
+  const hasExtension = (extensionItems?.length ?? 0) > 0 || helpData.extension?.content;
+
+  return {
+    global,
+    default: defaultLinks,
+    ...(hasExtension
+      ? {
+          extension: {
+            label: helpData.extension?.appName,
+            items: extensionItems ?? [],
+            renderContent: helpData.extension?.content,
+          },
+        }
+      : {}),
+  };
+};
diff --git a/src/core/packages/chrome/browser-components/src/test_helpers.tsx b/src/core/packages/chrome/browser-components/src/test_helpers.tsx
index 0753fff5b0e49..1159700428517 100644
--- a/src/core/packages/chrome/browser-components/src/test_helpers.tsx
+++ b/src/core/packages/chrome/browser-components/src/test_helpers.tsx
@@ -15,6 +15,7 @@ import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
 import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
 import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { coreContextMock } from '@kbn/core-base-browser-mocks';
+import { coreFeatureFlagsMock } from '@kbn/core-feature-flags-browser-mocks';
 import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
 import { CoreEnvContextProvider } from '@kbn/react-kibana-context-env';
 import type { InternalChromeStart } from '@kbn/core-chrome-browser-internal-types';
@@ -38,6 +39,7 @@ export const createMockChromeComponentsDeps = () => {
     customBranding: {
       customBranding$: new BehaviorSubject<CustomBranding>({}),
     },
+    featureFlags: coreFeatureFlagsMock.createStart(),
   } satisfies ChromeComponentsDeps;
 };
 
diff --git a/src/core/packages/chrome/browser-components/tsconfig.json b/src/core/packages/chrome/browser-components/tsconfig.json
index 35b90a152ab61..e2ecb2538e24a 100644
--- a/src/core/packages/chrome/browser-components/tsconfig.json
+++ b/src/core/packages/chrome/browser-components/tsconfig.json
@@ -35,9 +35,12 @@
     "@kbn/core-chrome-layout-constants",
     "@kbn/core-chrome-navigation",
     "@kbn/core-chrome-sidebar-components",
+    "@kbn/core-chrome-feature-flags",
     "@kbn/core-custom-branding-browser",
     "@kbn/core-custom-branding-common",
     "@kbn/core-doc-links-browser",
+    "@kbn/core-feature-flags-browser",
+    "@kbn/core-feature-flags-browser-mocks",
     "@kbn/core-doc-links-browser-mocks",
     "@kbn/core-http-browser",
     "@kbn/core-http-browser-mocks",
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index fd688bcc0e8f9..12664356cf6b5 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -16,6 +16,7 @@ import type {
   ChromeBreadcrumb,
   ChromeBreadcrumbsAppendExtension,
   ChromeNextHeaderConfig,
+  ChromeNextGlobalSearchConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -114,5 +115,8 @@ export interface InternalChromeStart extends ChromeStart {
     aiButton: ChromeStart['next']['aiButton'] & {
       get$(): Observable<ReactNode | undefined>;
     };
+    globalSearch: ChromeStart['next']['globalSearch'] & {
+      get$(): Observable<ChromeNextGlobalSearchConfig | undefined>;
+    };
   };
 }
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index b9e797727f314..d2395dc7b679d 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -179,6 +179,10 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
         get$: () => state.aiButton.$,
         set: state.aiButton.set,
       },
+      globalSearch: {
+        get$: () => state.globalSearch.$,
+        set: state.globalSearch.set,
+      },
     },
 
     sidebar,
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx b/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx
index 32e40875760e3..01562f553324f 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx
@@ -247,6 +247,7 @@ describe('start', () => {
       http: startDeps.http,
       docLinks: startDeps.docLinks,
       customBranding: startDeps.customBranding,
+      featureFlags: startDeps.featureFlags,
     });
 
     it('ClassicHeader renders within ChromeComponentsProvider', async () => {
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 4084d3645818b..a4188415c0966 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -19,6 +19,7 @@ import type {
   ChromeGlobalHelpExtensionMenuLink,
   ChromeHelpExtension,
   ChromeNavLink,
+  ChromeNextGlobalSearchConfig,
   ChromeUserBanner,
 } from '@kbn/core-chrome-browser';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
@@ -65,6 +66,7 @@ export interface ChromeState {
   customNavLink: State<ChromeNavLink | undefined>;
   appMenu: State<AppMenuConfig | undefined>;
   aiButton: State<ReactNode>;
+  globalSearch: State<ChromeNextGlobalSearchConfig | undefined>;
 
   /** Help system */
   help: {
@@ -109,6 +111,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   // UI Elements (not reset on app change)
   const globalFooter = createState<ReactNode>(null);
   const aiButton = createState<ReactNode>(undefined);
+  const globalSearch = createState<ChromeNextGlobalSearchConfig | undefined>(undefined);
   const customNavLink = createState<ChromeNavLink | undefined>(undefined);
 
   // Help System
@@ -133,6 +136,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
     headerBanner,
     globalFooter,
     aiButton,
+    globalSearch,
     customNavLink,
     appMenu,
     help: {
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index adfba103e454c..125195446c50c 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -13,6 +13,7 @@ import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeNextHeaderConfig,
+  ChromeNextGlobalSearchConfig,
 } from '@kbn/core-chrome-browser';
 import type {
   InternalChromeSetup,
@@ -29,6 +30,9 @@ const createSetupContractMock = (): DeeplyMockedKeys<InternalChromeSetup> => {
 
 const createStartContractMock = () => {
   const nextHeaderState$ = new BehaviorSubject<ChromeNextHeaderConfig | undefined>(undefined);
+  const nextGlobalSearchState$ = new BehaviorSubject<ChromeNextGlobalSearchConfig | undefined>(
+    undefined
+  );
 
   const startContract: DeeplyMockedKeys<InternalChromeStart> = lazyObject({
     withProvider: jest.fn((children) => children),
@@ -115,6 +119,12 @@ const createStartContractMock = () => {
         get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
         set: jest.fn(),
       }),
+      globalSearch: lazyObject({
+        get$: jest.fn().mockReturnValue(nextGlobalSearchState$),
+        set: jest.fn((config?: ChromeNextGlobalSearchConfig) => {
+          nextGlobalSearchState$.next(config);
+        }),
+      }),
     }),
     setGlobalFooter: jest.fn(),
     getGlobalFooter$: jest.fn().mockReturnValue(new BehaviorSubject(null)),
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index 08669b412fd58..4aa887a61adc3 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -62,4 +62,5 @@ export type {
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderTab,
   ChromeNextHeaderCallout,
+  ChromeNextGlobalSearchConfig,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 6630fc272b756..a22be6f9dd22c 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -11,6 +11,7 @@ import type { ReactNode } from 'react';
 import type { Observable } from 'rxjs';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import type { ChromeNextHeaderConfig } from './next_header';
+import type { ChromeNextGlobalSearchConfig } from './next_global_search';
 import type { ChromeNavLink, ChromeNavLinks } from './nav_links';
 import type { ChromeRecentlyAccessed } from './recently_accessed';
 import type { ChromeDocTitle } from './doc_title';
@@ -346,6 +347,14 @@ export interface ChromeStart {
        */
       set(node?: ReactNode): void;
     };
+    globalSearch: {
+      /**
+       * Set the global search configuration for the Chrome-Next sidenav.
+       * Chrome renders a search icon button in the sidenav header items; clicking it fires `onClick`.
+       * Pass `undefined` to remove the button. Global — persists across app changes.
+       */
+      set(config?: ChromeNextGlobalSearchConfig): void;
+    };
   };
 
   /**
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 5057ff2511c9f..b2e9c452da7a7 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -69,3 +69,5 @@ export type {
   ChromeNextHeaderTab,
   ChromeNextHeaderCallout,
 } from './next_header';
+
+export type { ChromeNextGlobalSearchConfig } from './next_global_search';
diff --git a/src/core/packages/chrome/browser/src/next_global_search.ts b/src/core/packages/chrome/browser/src/next_global_search.ts
new file mode 100644
index 0000000000000..3ae7cbf66193e
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/next_global_search.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/**
+ * Configuration for the global search button in the Chrome-Next sidenav.
+ */
+export interface ChromeNextGlobalSearchConfig {
+  /** Called when the search icon button in the sidenav is clicked. */
+  onClick: () => void;
+}
diff --git a/src/core/packages/chrome/feature-flags/moon.yml b/src/core/packages/chrome/feature-flags/moon.yml
index 029baef19cd36..33d66931e348f 100644
--- a/src/core/packages/chrome/feature-flags/moon.yml
+++ b/src/core/packages/chrome/feature-flags/moon.yml
@@ -30,26 +30,6 @@ fileGroups:
     - '**/*.ts'
     - '**/*.tsx'
     - '!target/**/*'
-tasks:
-  jest:
-    command: node
-    args:
-      - '--no-experimental-require-module'
-      - $workspaceRoot/scripts/jest
-      - '--config'
-      - $projectRoot/jest.config.js
-    options:
-      runFromWorkspaceRoot: true
-    inputs:
-      - '@group(src)'
-  jestCI:
-    command: node
-    args:
-      - '--no-experimental-require-module'
-      - $workspaceRoot/scripts/jest
-      - '--config'
-      - $projectRoot/jest.config.js
-    options:
-      runFromWorkspaceRoot: true
-    inputs:
-      - '@group(src)'
+  jest-config:
+    - jest.config.js
+tasks: {}
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index c460774506af2..6e2d44dc74e99 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -158,6 +158,7 @@ export class GridLayout implements LayoutService {
       http,
       docLinks,
       customBranding,
+      featureFlags,
     };
 
     const GridLayoutContent = React.memo(() => {
diff --git a/src/core/packages/chrome/navigation/README.mdx b/src/core/packages/chrome/navigation/README.mdx
index 0448bc52f49f1..c207be1058d8b 100644
--- a/src/core/packages/chrome/navigation/README.mdx
+++ b/src/core/packages/chrome/navigation/README.mdx
@@ -64,6 +64,30 @@ const navigationItems = {
   ],
 };
 
+const navigationTools = {
+  headerTools: [
+    {
+      id: 'search',
+      label: 'Search',
+      iconType: 'search',
+      onClick: () => {},
+    },
+  ],
+  footerTools: [
+    {
+      id: 'help',
+      label: 'Help',
+      iconType: 'question',
+      sections: [
+        {
+          id: 'help-links',
+          items: [{ id: 'docs', label: 'Documentation', href: '/docs' }],
+        },
+      ],
+    },
+  ],
+};
+
 function App() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [activeItemId, setActiveItemId] = useState('dashboard');
@@ -80,6 +104,7 @@ function App() {
         activeItemId={activeItemId}
         isCollapsed={isCollapsed}
         items={navigationItems}
+        tools={navigationTools}
         logo={{
           label: 'Observability',
           id: 'observability',
@@ -160,6 +185,12 @@ export const navigationItems = {
 };
 ```
 
+Navigable content uses `items` only. Optional chrome controls (global search, help menus, etc.) are passed separately through `tools` as `headerTools` and `footerTools`. Those render in dedicated tool groups; `onItemClick` applies only to the logo and navigable items from `items`, not to tool triggers or links shown inside tool popovers.
+
+### Logo
+
+Pass a `SideNavLogo` object as `logo`. Set `hideLabel: true` to omit the text under the icon while the navigation is expanded; `label` is still used for the link’s accessible name and for the tooltip when the navigation is collapsed.
+
 ## Navigation Badges
 
 Navigation badges are visual indicators used in the Kibana side navigation to highlight new or experimental features and improve feature discoverability. The system provides three types of visual indicators:
diff --git a/src/core/packages/chrome/navigation/index.ts b/src/core/packages/chrome/navigation/index.ts
index 544cc0d8bb42c..abf967ffa0a78 100644
--- a/src/core/packages/chrome/navigation/index.ts
+++ b/src/core/packages/chrome/navigation/index.ts
@@ -17,4 +17,6 @@ export type {
   SecondaryMenuItem,
   SecondaryMenuSection,
   SideNavLogo,
+  ToolItem,
+  ToolSlots,
 } from './types';
diff --git a/src/core/packages/chrome/navigation/packaging/README.md b/src/core/packages/chrome/navigation/packaging/README.md
index 3e1325301b599..15c5b4e433b71 100644
--- a/src/core/packages/chrome/navigation/packaging/README.md
+++ b/src/core/packages/chrome/navigation/packaging/README.md
@@ -27,6 +27,7 @@ import { OneNavigation } from '@kbn/one-navigation';
 
 <OneNavigation
   items={navigationItems}
+  tools={chromeTools}
   logo={logoConfig}
   isCollapsed={false}
   activeItemId="dashboard"
@@ -36,6 +37,8 @@ import { OneNavigation } from '@kbn/one-navigation';
 />
 ```
 
+`items` contains navigable content only. Optional chrome controls like search and help are passed separately through `tools` (`headerTools` / `footerTools`). `onItemClick` is only invoked for navigable items and the logo.
+
 ### Peer dependencies
 
 | Package | Version |
diff --git a/src/core/packages/chrome/navigation/packaging/example/src/app.tsx b/src/core/packages/chrome/navigation/packaging/example/src/app.tsx
index a0b82f9218095..739d6a2b669d9 100644
--- a/src/core/packages/chrome/navigation/packaging/example/src/app.tsx
+++ b/src/core/packages/chrome/navigation/packaging/example/src/app.tsx
@@ -16,7 +16,7 @@ import { EuiProvider, EuiSpacer, EuiText, EuiCode, useEuiTheme } from '@elastic/
 // @ts-expect-error — package must be built first.
 import { OneNavigation } from '@kbn/one-navigation';
 // @ts-expect-error — package must be built first.
-import type { MenuItem, SecondaryMenuItem, SideNavLogo } from '@kbn/one-navigation';
+import type { MenuItem, SecondaryMenuItem, SideNavLogo, ToolSlots } from '@kbn/one-navigation';
 
 /** Returns a `className` that adds a divider after the Dashboard nav item. */
 const useNavDividerClass = () => {
@@ -108,6 +108,39 @@ const App = () => {
     href: '#/',
   };
 
+  const tools: ToolSlots = {
+    headerTools: [
+      {
+        id: 'search',
+        label: 'Search',
+        iconType: 'search',
+        onClick: () => {
+          // eslint-disable-next-line no-console
+          console.log('Search tool clicked');
+        },
+      },
+    ],
+    footerTools: [
+      {
+        id: 'help',
+        label: 'Help',
+        iconType: 'question',
+        sections: [
+          {
+            id: 'help-links',
+            items: [
+              {
+                id: 'documentation',
+                label: 'Documentation',
+                href: '#/help/documentation',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
   const handleItemClick = (item: MenuItem | SecondaryMenuItem | SideNavLogo) => {
     // eslint-disable-next-line no-console
     console.log('Navigation item clicked:', item);
@@ -126,6 +159,7 @@ const App = () => {
         <OneNavigation
           {...{ activeItemId, logo }}
           items={navigationItems}
+          tools={tools}
           isCollapsed={isCollapsed}
           onItemClick={handleItemClick}
           onToggleCollapsed={setIsCollapsed}
diff --git a/src/core/packages/chrome/navigation/packaging/react/type_validation.ts b/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
index 411668d9146a7..828bb8da49319 100644
--- a/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
@@ -28,18 +28,26 @@
 import type { NavigationProps as SourceNavigationProps } from '../../src/components/navigation';
 import type {
   BadgeType as SourceBadgeType,
+  MenuItem as SourceMenuItem,
+  NavigationStructure as SourceNavigationStructure,
   SecondaryMenuItem as SourceSecondaryMenuItem,
   SecondaryMenuSection as SourceSecondaryMenuSection,
   SideNavLogo as SourceSideNavLogo,
+  ToolItem as SourceToolItem,
+  ToolSlots as SourceToolSlots,
 } from '../../types';
 
 // Packaged types.
 import type {
   BadgeType as PackagedBadgeType,
+  MenuItem as PackagedMenuItem,
+  NavigationStructure as PackagedNavigationStructure,
   NavigationProps as PackagedNavigationProps,
   SecondaryMenuItem as PackagedSecondaryMenuItem,
   SecondaryMenuSection as PackagedSecondaryMenuSection,
   SideNavLogo as PackagedSideNavLogo,
+  ToolItem as PackagedToolItem,
+  ToolSlots as PackagedToolSlots,
 } from './types';
 
 // Simple types must match exactly.
@@ -55,6 +63,25 @@ const _secondaryMenuItem: PackagedSecondaryMenuItem = {} as SourceSecondaryMenuI
 const _secondaryMenuSection: PackagedSecondaryMenuSection = {} as SourceSecondaryMenuSection;
 const _sideNavLogo: PackagedSideNavLogo = {} as SourceSideNavLogo;
 
+type NormalizedSourceMenuItem = Omit<SourceMenuItem, 'iconType'> & { iconType: string };
+type NormalizedSourceToolItem = Omit<SourceToolItem, 'iconType'> & { iconType: string };
+type NormalizedSourceNavigationStructure = Omit<
+  SourceNavigationStructure,
+  'footerItems' | 'primaryItems'
+> & {
+  footerItems: NormalizedSourceMenuItem[];
+  primaryItems: NormalizedSourceMenuItem[];
+};
+type NormalizedSourceToolSlots = Omit<SourceToolSlots, 'headerTools' | 'footerTools'> & {
+  headerTools?: NormalizedSourceToolItem[];
+  footerTools?: NormalizedSourceToolItem[];
+};
+
+const _menuItem: PackagedMenuItem = {} as NormalizedSourceMenuItem;
+const _toolItem: PackagedToolItem = {} as NormalizedSourceToolItem;
+const _toolSlots: PackagedToolSlots = {} as NormalizedSourceToolSlots;
+const _navigationStructure: PackagedNavigationStructure = {} as NormalizedSourceNavigationStructure;
+
 // `NavigationProps` validation — suppressed because `MenuItem.iconType` is
 // intentionally simplified from `IconType` (string | ComponentClass) to `string`.
 // @ts-expect-error — intentional simplification; see above.
@@ -64,6 +91,10 @@ void _badgeType;
 void _secondaryMenuItem;
 void _secondaryMenuSection;
 void _sideNavLogo;
+void _menuItem;
+void _toolItem;
+void _toolSlots;
+void _navigationStructure;
 void _navigationProps;
 
 export const TYPE_VALIDATION_PASSED = true;
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index 1df7bc44dd478..9a14c8ef9bd86 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -75,10 +75,31 @@ export interface MenuItem {
 }
 
 /**
- * The complete navigation structure containing primary and footer items.
+ * A chrome tool control (search, help, etc.) — not a primary navigation destination.
+ */
+export interface ToolItem {
+  id: string;
+  label: string;
+  iconType: string;
+  onClick?: () => void;
+  sections?: SecondaryMenuSection[];
+  badgeType?: BadgeType;
+  'data-test-subj'?: string;
+}
+
+/**
+ * Optional tool groupings for the sidenav header and footer toolbars.
+ */
+export interface ToolSlots {
+  headerTools?: ToolItem[];
+  footerTools?: ToolItem[];
+}
+
+/**
+ * Navigable sidenav structure: primary rail and footer links.
  */
 export interface NavigationStructure {
-  /** Items displayed in the footer area of the navigation. */
+  /** Items displayed in the footer navigation area. */
   footerItems: MenuItem[];
   /** Items displayed in the primary/main area of the navigation. */
   primaryItems: MenuItem[];
@@ -94,8 +115,12 @@ export interface SideNavLogo {
   href: string;
   /** The label for the logo, typically the product name. */
   label: string;
+  /** When `true`, the label is not shown under the icon while expanded; still used for accessibility and collapsed tooltip. */
+  hideLabel?: boolean;
   /** The logo type, e.g. `appObservability`, `appSecurity`, etc. */
   iconType: string;
+  /** Optional color of the logo icon. `'default'` uses brand colors; `'text'` renders monochromatically. */
+  iconColor?: 'default' | 'text';
   /** Optional `data-test-subj` attribute. */
   'data-test-subj'?: string;
 }
@@ -108,13 +133,15 @@ export interface NavigationProps {
   activeItemId?: string;
   /** Whether the navigation is collapsed. */
   isCollapsed: boolean;
-  /** The navigation structure containing primary, secondary, and footer items. */
+  /** Navigable items (primary and footer links). */
   items: NavigationStructure;
+  /** Optional header/footer tool controls (search, help, etc.). */
+  tools?: ToolSlots;
   /** The logo object containing the route ID, href, label, and type. */
   logo: SideNavLogo;
   /** Required by the grid layout to set the width of the navigation slot. */
   setWidth: (width: number) => void;
-  /** Callback fired when a navigation item is clicked. */
+  /** Callback fired when a navigable item or the logo is activated. */
   onItemClick?: (item: MenuItem | SecondaryMenuItem | SideNavLogo) => void;
   /** Callback fired when the collapse button is toggled. Omit to hide the toggle button. */
   onToggleCollapsed?: (isCollapsed: boolean) => void;
diff --git a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
index 85f4445d7df23..5f7cf0a5b5adb 100644
--- a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
+++ b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
@@ -42,6 +42,42 @@ const styles = ({ euiTheme }: UseEuiTheme) => {
 
 type PropsAndArgs = ComponentProps<typeof Navigation>;
 
+const CHROME_TOOLS: NonNullable<PropsAndArgs['tools']> = {
+  headerTools: [
+    {
+      id: 'search',
+      label: 'Search',
+      iconType: 'search',
+      onClick: () => {},
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      iconType: 'bell',
+      onClick: () => {},
+    },
+    {
+      id: 'quick_settings',
+      label: 'Quick settings',
+      iconType: 'gear',
+      onClick: () => {},
+    },
+  ],
+  footerTools: [
+    {
+      id: 'help',
+      label: 'Help',
+      iconType: 'question',
+      sections: [
+        {
+          id: 'help-links',
+          items: [{ id: 'documentation', label: 'Documentation', href: '/help/documentation' }],
+        },
+      ],
+    },
+  ],
+};
+
 const PreventLinkNavigation = (Story: StoryFn) => {
   usePreventLinkNavigation();
 
@@ -87,6 +123,31 @@ export const Default: StoryObj<PropsAndArgs> = {
   render: (args) => <ControlledNavigation {...args} />,
 };
 
+export const WithTools: StoryObj<PropsAndArgs> = {
+  name: 'With header and footer tools',
+  decorators: [
+    (Story) => {
+      return (
+        <>
+          <Global styles={styles} />
+          <Story />
+        </>
+      );
+    },
+  ],
+  args: {
+    tools: CHROME_TOOLS,
+    logo: {
+      id: 'observability',
+      href: LOGO.href,
+      label: LOGO.label,
+      iconType: LOGO.iconType,
+      hideLabel: true,
+    },
+  },
+  render: (args) => <ControlledNavigation {...args} />,
+};
+
 export const WithMinimalItems: StoryObj<PropsAndArgs> = {
   name: 'Navigation with Minimal Items',
   decorators: [
diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap
index b1a62356ca22f..75c8a9d96ae83 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap
+++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap
@@ -11,33 +11,37 @@ exports[`Both modes should render the side navigation 1`] = `
       class="kbnChromeNav-root css-vka7tb-getNavWrapperStyles"
     >
       <div
-        class="css-1ja8ujo-wrapperStyles"
-        data-test-subj="kbnChromeNav-logoWrapper"
+        class="css-yp66ul-getTopSectionStyles"
       >
-        <a
-          aria-label="Solution homepage"
-          class="css-r2tafp-buttonStyles"
-          data-highlighted="false"
-          data-menu-item="true"
-          data-test-subj="kbnChromeNav-logo"
-          href="/"
-          id="home"
+        <div
+          class="css-36kal1-wrapperStyles"
+          data-test-subj="kbnChromeNav-logoWrapper"
         >
-          <div
-            class="kbnChromeNav-iconWrapper"
+          <a
+            aria-label="Solution homepage"
+            class="css-r2tafp-buttonStyles"
+            data-highlighted="false"
+            data-menu-item="true"
+            data-test-subj="kbnChromeNav-logo"
+            href="/"
+            id="home"
           >
-            <span
-              aria-hidden="true"
-              color="currentColor"
-              data-euiicon-type="logoElastic"
-            />
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
-          >
-            Solution
-          </div>
-        </a>
+            <div
+              class="kbnChromeNav-iconWrapper"
+            >
+              <span
+                aria-hidden="true"
+                color="currentColor"
+                data-euiicon-type="logoElastic"
+              />
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
+            >
+              Solution
+            </div>
+          </a>
+        </div>
       </div>
       <p
         class="emotion-euiScreenReaderOnly"
@@ -175,9 +179,9 @@ exports[`Both modes should render the side navigation 1`] = `
       >
         You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.
       </p>
-      <footer
-        aria-label="Side navigation"
-        class="css-18gcnxt-root"
+      <nav
+        aria-label="Footer navigation"
+        class="css-q2ubd0-getFooterNavWrapperStyles"
         data-test-subj="kbnChromeNav-footer"
       >
         <div
@@ -363,9 +367,13 @@ exports[`Both modes should render the side navigation 1`] = `
             </span>
           </div>
         </div>
-        <hr
-          class="euiHorizontalRule emotion-euiHorizontalRule-full-xs-collapseDivider"
-        />
+      </nav>
+      <div
+        aria-label="Side navigation tools"
+        class="css-4egb9v-getFooterToolbarWrapperStyles"
+        data-test-subj="kbnChromeNav-footerToolbar"
+        role="group"
+      >
         <div
           class="sideNavCollapseButtonWrapper css-1y5smli-sideNavCollapseButtonWrapper"
         >
@@ -376,7 +384,6 @@ exports[`Both modes should render the side navigation 1`] = `
             aria-pressed="true"
             class="euiButtonIcon emotion-euiButtonIcon-s-empty-text-sideNavCollapseButton"
             data-test-subj="sideNavCollapseButton"
-            tabindex="-1"
             type="button"
           >
             <span
@@ -387,7 +394,7 @@ exports[`Both modes should render the side navigation 1`] = `
             />
           </button>
         </div>
-      </footer>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap
index bd3d8313bf8c7..c4de9479fb1f6 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap
+++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap
@@ -10,40 +10,44 @@ exports[`Collapsed mode should render the side navigation 1`] = `
     <div
       class="kbnChromeNav-root css-8nqrb0-getNavWrapperStyles"
     >
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-        id="generated-id_euiToolTipAnchor"
+      <div
+        class="css-yp66ul-getTopSectionStyles"
       >
-        <div
-          class="css-1lxxlvf-wrapperStyles"
-          data-test-subj="kbnChromeNav-logoWrapper"
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+          id="generated-id_euiToolTipAnchor"
         >
-          <a
-            aria-label="Solution homepage"
-            class="css-r2tafp-buttonStyles"
-            data-highlighted="false"
-            data-menu-item="true"
-            data-test-subj="kbnChromeNav-logo"
-            href="/"
-            id="home"
+          <div
+            class="css-1hzlhzk-wrapperStyles"
+            data-test-subj="kbnChromeNav-logoWrapper"
           >
-            <div
-              class="kbnChromeNav-iconWrapper"
-            >
-              <span
-                aria-hidden="true"
-                color="currentColor"
-                data-euiicon-type="logoElastic"
-              />
-            </div>
-            <div
-              class="euiText emotion-euiText-m-euiScreenReaderOnly"
+            <a
+              aria-label="Solution homepage"
+              class="css-r2tafp-buttonStyles"
+              data-highlighted="false"
+              data-menu-item="true"
+              data-test-subj="kbnChromeNav-logo"
+              href="/"
+              id="home"
             >
-              Solution
-            </div>
-          </a>
-        </div>
-      </span>
+              <div
+                class="kbnChromeNav-iconWrapper"
+              >
+                <span
+                  aria-hidden="true"
+                  color="currentColor"
+                  data-euiicon-type="logoElastic"
+                />
+              </div>
+              <div
+                class="euiText emotion-euiText-m-euiScreenReaderOnly"
+              >
+                Solution
+              </div>
+            </a>
+          </div>
+        </span>
+      </div>
       <p
         class="emotion-euiScreenReaderOnly"
         id="main-navigation-instructions_generated-id"
@@ -190,9 +194,9 @@ exports[`Collapsed mode should render the side navigation 1`] = `
       >
         You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.
       </p>
-      <footer
-        aria-label="Side navigation"
-        class="css-3mngca-root"
+      <nav
+        aria-label="Footer navigation"
+        class="css-gis2b3-getFooterNavWrapperStyles"
         data-test-subj="kbnChromeNav-footer"
       >
         <div
@@ -378,9 +382,13 @@ exports[`Collapsed mode should render the side navigation 1`] = `
             </span>
           </div>
         </div>
-        <hr
-          class="euiHorizontalRule emotion-euiHorizontalRule-full-xs-collapseDivider"
-        />
+      </nav>
+      <div
+        aria-label="Side navigation tools"
+        class="css-3mvpz9-getFooterToolbarWrapperStyles"
+        data-test-subj="kbnChromeNav-footerToolbar"
+        role="group"
+      >
         <div
           class="sideNavCollapseButtonWrapper css-1y5smli-sideNavCollapseButtonWrapper"
         >
@@ -391,7 +399,6 @@ exports[`Collapsed mode should render the side navigation 1`] = `
             aria-pressed="false"
             class="euiButtonIcon emotion-euiButtonIcon-s-empty-text-sideNavCollapseButton"
             data-test-subj="sideNavCollapseButton"
-            tabindex="-1"
             type="button"
           >
             <span
@@ -402,7 +409,7 @@ exports[`Collapsed mode should render the side navigation 1`] = `
             />
           </button>
         </div>
-      </footer>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap
index c61ec302b070b..2dd837f864d6f 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap
+++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap
@@ -11,33 +11,37 @@ exports[`Expanded mode should render the side navigation 1`] = `
       class="kbnChromeNav-root css-vka7tb-getNavWrapperStyles"
     >
       <div
-        class="css-1ja8ujo-wrapperStyles"
-        data-test-subj="kbnChromeNav-logoWrapper"
+        class="css-yp66ul-getTopSectionStyles"
       >
-        <a
-          aria-label="Solution homepage"
-          class="css-r2tafp-buttonStyles"
-          data-highlighted="false"
-          data-menu-item="true"
-          data-test-subj="kbnChromeNav-logo"
-          href="/"
-          id="home"
+        <div
+          class="css-36kal1-wrapperStyles"
+          data-test-subj="kbnChromeNav-logoWrapper"
         >
-          <div
-            class="kbnChromeNav-iconWrapper"
+          <a
+            aria-label="Solution homepage"
+            class="css-r2tafp-buttonStyles"
+            data-highlighted="false"
+            data-menu-item="true"
+            data-test-subj="kbnChromeNav-logo"
+            href="/"
+            id="home"
           >
-            <span
-              aria-hidden="true"
-              color="currentColor"
-              data-euiicon-type="logoElastic"
-            />
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
-          >
-            Solution
-          </div>
-        </a>
+            <div
+              class="kbnChromeNav-iconWrapper"
+            >
+              <span
+                aria-hidden="true"
+                color="currentColor"
+                data-euiicon-type="logoElastic"
+              />
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
+            >
+              Solution
+            </div>
+          </a>
+        </div>
       </div>
       <p
         class="emotion-euiScreenReaderOnly"
@@ -175,9 +179,9 @@ exports[`Expanded mode should render the side navigation 1`] = `
       >
         You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.
       </p>
-      <footer
-        aria-label="Side navigation"
-        class="css-18gcnxt-root"
+      <nav
+        aria-label="Footer navigation"
+        class="css-q2ubd0-getFooterNavWrapperStyles"
         data-test-subj="kbnChromeNav-footer"
       >
         <div
@@ -363,9 +367,13 @@ exports[`Expanded mode should render the side navigation 1`] = `
             </span>
           </div>
         </div>
-        <hr
-          class="euiHorizontalRule emotion-euiHorizontalRule-full-xs-collapseDivider"
-        />
+      </nav>
+      <div
+        aria-label="Side navigation tools"
+        class="css-4egb9v-getFooterToolbarWrapperStyles"
+        data-test-subj="kbnChromeNav-footerToolbar"
+        role="group"
+      >
         <div
           class="sideNavCollapseButtonWrapper css-1y5smli-sideNavCollapseButtonWrapper"
         >
@@ -376,7 +384,6 @@ exports[`Expanded mode should render the side navigation 1`] = `
             aria-pressed="true"
             class="euiButtonIcon emotion-euiButtonIcon-s-empty-text-sideNavCollapseButton"
             data-test-subj="sideNavCollapseButton"
-            tabindex="-1"
             type="button"
           >
             <span
@@ -387,7 +394,7 @@ exports[`Expanded mode should render the side navigation 1`] = `
             />
           </button>
         </div>
-      </footer>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx b/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx
index a6d9f340902b1..fe9cd020b085b 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx
+++ b/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx
@@ -1251,6 +1251,7 @@ describe('Both modes', () => {
         const serviceInventoryLink = within(sidePanel).getByTestId(
           sidePanelItemId('service-inventory')
         );
+        const collapseButton = screen.getByTestId('sideNavCollapseButton');
 
         act(() => {
           solutionLogo.focus();
@@ -1268,7 +1269,10 @@ describe('Both modes', () => {
 
         expect(gettingStartedLink).toHaveFocus();
 
-        // Tab to side panel - should land on first focusable item (Service inventory)
+        await user.tab();
+
+        expect(collapseButton).toHaveFocus();
+
         await user.tab();
 
         expect(serviceInventoryLink).toHaveFocus();
diff --git a/src/core/packages/chrome/navigation/src/components/footer/index.tsx b/src/core/packages/chrome/navigation/src/components/footer/index.tsx
index a6e64bbcfd96f..89979aca3f2d3 100644
--- a/src/core/packages/chrome/navigation/src/components/footer/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/footer/index.tsx
@@ -7,131 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { forwardRef, useMemo } from 'react';
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import { css } from '@emotion/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiHorizontalRule,
-  EuiScreenReaderOnly,
-  useEuiTheme,
-  useGeneratedHtmlId,
-  type UseEuiTheme,
-} from '@elastic/eui';
-
-import { FooterItem } from './item';
-import { getFocusableElements } from '../../utils/get_focusable_elements';
-import { handleRovingIndex } from '../../utils/handle_roving_index';
-import { updateTabIndices } from '../../utils/update_tab_indices';
-import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
-import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
-
-const getFooterWrapperStyles = (euiThemeContext: UseEuiTheme, isCollapsed: boolean) => {
-  const { euiTheme: theme } = euiThemeContext;
-  return {
-    root: css`
-      align-items: center;
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      gap: ${theme.size.xs};
-      justify-content: center;
-      padding-top: ${isCollapsed ? theme.size.s : theme.size.m};
-
-      ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
-    `,
-    collapseDivider: css`
-      position: relative;
-      background-color: transparent;
-
-      ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
-    `,
-  };
-};
-
-export interface FooterIds {
-  footerNavigationInstructionsId: string;
-}
-
-export type FooterChildren = ReactNode | ((ids: FooterIds) => ReactNode);
-
-export interface FooterProps {
-  children: FooterChildren;
-  isCollapsed: boolean;
-  collapseButton?: ReactNode;
-}
-
-interface FooterComponent
-  extends ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>> {
-  Item: typeof FooterItem;
-}
-
-const FooterBase = forwardRef<HTMLElement, FooterProps>(
-  ({ children, isCollapsed, collapseButton }, ref) => {
-    const euiThemeContext = useEuiTheme();
-    const footerNavigationInstructionsId = useGeneratedHtmlId({
-      prefix: 'footer-navigation-instructions',
-    });
-
-    const handleRef = (node: HTMLElement | null) => {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-
-      if (node) {
-        const elements = getFocusableElements(node);
-        updateTabIndices(elements);
-      }
-    };
-
-    const wrapperStyles = useMemo(
-      () => getFooterWrapperStyles(euiThemeContext, isCollapsed),
-      [euiThemeContext, isCollapsed]
-    );
-
-    const renderChildren = () => {
-      if (typeof children === 'function') {
-        return children({ footerNavigationInstructionsId });
-      }
-      return children;
-    };
-
-    return (
-      <>
-        <EuiScreenReaderOnly>
-          <p id={footerNavigationInstructionsId}>
-            {i18n.translate('core.ui.chrome.sideNavigation.footerInstructions', {
-              defaultMessage:
-                'You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.',
-            })}
-          </p>
-        </EuiScreenReaderOnly>
-        {/* The footer itself is not interactive but the children are */}
-        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-        <footer
-          aria-label={i18n.translate('core.ui.chrome.sideNavigation.footerAriaLabel', {
-            defaultMessage: 'Side navigation',
-          })}
-          css={wrapperStyles.root}
-          onKeyDown={handleRovingIndex}
-          ref={handleRef}
-          data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footer`}
-        >
-          {renderChildren()}
-          {collapseButton && (
-            <>
-              <EuiHorizontalRule margin="xs" css={wrapperStyles.collapseDivider} />
-              {collapseButton}
-            </>
-          )}
-        </footer>
-      </>
-    );
-  }
-);
-
-export const Footer = Object.assign(FooterBase, {
-  Item: FooterItem,
-}) satisfies FooterComponent;
+export { FooterNav } from './nav';
+export type { FooterNavProps, FooterNavIds, FooterNavChildren } from './nav';
+export { FooterToolbar } from './toolbar';
+export type { FooterToolbarProps } from './toolbar';
+export { FooterItem } from './item';
diff --git a/src/core/packages/chrome/navigation/src/components/footer/item.tsx b/src/core/packages/chrome/navigation/src/components/footer/item.tsx
index 984aed8939862..3b1747ba58b5e 100644
--- a/src/core/packages/chrome/navigation/src/components/footer/item.tsx
+++ b/src/core/packages/chrome/navigation/src/components/footer/item.tsx
@@ -7,135 +7,31 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { Suspense, forwardRef } from 'react';
-import type { KeyboardEvent, ForwardedRef, ComponentProps } from 'react';
-import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
-import type { EuiButtonIconProps, IconType } from '@elastic/eui';
-import { css } from '@emotion/react';
+import React, { forwardRef } from 'react';
+import type { KeyboardEvent, Ref } from 'react';
+import type { EuiButtonIconProps } from '@elastic/eui';
 
 import type { MenuItem } from '../../../types';
-import { BetaBadge } from '../beta_badge';
-import { NAVIGATION_SELECTOR_PREFIX, TOOLTIP_OFFSET } from '../../constants';
-import { focusMainContent } from '../../utils/focus_main_content';
-import { useHighContrastModeStyles } from '../../hooks/use_high_contrast_mode_styles';
-import { useTooltip } from '../../hooks/use_tooltip';
-import { NewItemIndicator } from '../new_item_indicator';
+import { IconButton } from '../icon_button';
+import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
 
-export interface FooterItemProps extends Omit<EuiButtonIconProps, 'iconType'>, MenuItem {
+export interface FooterItemProps
+  extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'>,
+    Omit<MenuItem, 'sections'> {
   hasContent?: boolean;
-  iconType: IconType;
   isCurrent?: boolean;
   isHighlighted: boolean;
   isNew: boolean;
-  label: string;
   onClick?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
 }
 
-/**
- * A footer item that leverages the "Toggle button" pattern from EUI.
- *
- * @see {@link https://eui.elastic.co/docs/components/navigation/buttons/button/#toggle-button}
- */
 export const FooterItem = forwardRef<HTMLAnchorElement, FooterItemProps>(
-  (
-    { badgeType, hasContent, iconType, id, isCurrent, isHighlighted, isNew, label, ...props },
-    ref: ForwardedRef<HTMLAnchorElement>
-  ) => {
-    const { euiTheme } = useEuiTheme();
-    const { tooltipRef, handleMouseOut } = useTooltip();
-    const highContrastModeStyles = useHighContrastModeStyles();
-
-    const handleFooterItemKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        // Required for entering the popover with Enter or Space key
-        // Otherwise the navigation happens immediately
-        e.preventDefault();
-        focusMainContent();
-      }
-    };
-
-    const wrapperStyles = css`
-      display: flex;
-      justify-content: center;
-      width: 100%;
-    `;
-
-    const buttonStyles = css`
-      --high-contrast-hover-indicator-color: ${isHighlighted
-        ? euiTheme.colors.textPrimary
-        : euiTheme.colors.textParagraph};
-      ${highContrastModeStyles}
-    `;
-
-    const buttonWrapperStyles = css`
-      position: relative;
-      display: inline-flex;
-    `;
-
-    const footerItemTestSubj = `${NAVIGATION_SELECTOR_PREFIX}-footerItem-${id}`;
-
-    const buttonProps: ComponentProps<typeof EuiButtonIcon> & {
-      'data-highlighted': string;
-      'data-menu-item': string;
-    } = {
-      'aria-current': isCurrent ? 'page' : undefined,
-      'aria-label': label,
-      buttonRef: ref,
-      color: isHighlighted ? 'primary' : 'text',
-      'data-highlighted': isHighlighted ? 'true' : 'false',
-      'data-test-subj': footerItemTestSubj,
-      'data-menu-item': 'true',
-      display: isHighlighted ? 'base' : 'empty',
-      iconType: 'empty', // `iconType` is passed in Suspense below
-      onKeyDown: handleFooterItemKeyDown,
-      size: 's',
-      css: buttonStyles,
-      ...props,
-    };
-
-    const menuItem = (
-      <div css={buttonWrapperStyles}>
-        <Suspense fallback={<EuiButtonIcon buttonRef={ref} {...buttonProps} />}>
-          <EuiButtonIcon buttonRef={ref} {...buttonProps} iconType={iconType || 'empty'} />
-        </Suspense>
-        {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
-      </div>
-    );
-
-    if (!hasContent) {
-      const tooltipStyles = css`
-        display: flex;
-        align-items: center;
-        gap: ${euiTheme.size.s};
-      `;
-      const tooltipContent = badgeType ? (
-        <span css={tooltipStyles}>
-          {label}
-          <BetaBadge type={badgeType} isInverted />
-        </span>
-      ) : (
-        label
-      );
-
-      return (
-        <EuiToolTip
-          anchorProps={{
-            css: wrapperStyles,
-          }}
-          content={tooltipContent}
-          disableScreenReaderOutput
-          onMouseOut={handleMouseOut}
-          position="right"
-          ref={tooltipRef}
-          repositionOnScroll
-          offset={TOOLTIP_OFFSET}
-        >
-          {menuItem}
-        </EuiToolTip>
-      );
-    }
-
-    return <div css={wrapperStyles}>{menuItem}</div>;
-  }
+  ({ id, ...props }, ref) => (
+    <IconButton
+      ref={ref as Ref<HTMLElement>}
+      data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footerItem-${id}`}
+      {...props}
+    />
+  )
 );
diff --git a/src/core/packages/chrome/navigation/src/components/footer/nav.tsx b/src/core/packages/chrome/navigation/src/components/footer/nav.tsx
new file mode 100644
index 0000000000000..19808bac162be
--- /dev/null
+++ b/src/core/packages/chrome/navigation/src/components/footer/nav.tsx
@@ -0,0 +1,118 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { forwardRef, useMemo } from 'react';
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiScreenReaderOnly,
+  useEuiTheme,
+  useGeneratedHtmlId,
+  type UseEuiTheme,
+} from '@elastic/eui';
+
+import { FooterItem } from './item';
+import { getFocusableElements } from '../../utils/get_focusable_elements';
+import { handleRovingIndex } from '../../utils/handle_roving_index';
+import { updateTabIndices } from '../../utils/update_tab_indices';
+import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
+import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
+
+const getFooterNavWrapperStyles = (euiThemeContext: UseEuiTheme, isCollapsed: boolean) => {
+  const { euiTheme: theme } = euiThemeContext;
+  return css`
+    align-items: center;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: ${theme.size.xs};
+    justify-content: center;
+    padding-top: ${isCollapsed ? theme.size.s : theme.size.m};
+
+    ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
+  `;
+};
+
+export interface FooterNavIds {
+  footerNavigationInstructionsId: string;
+}
+
+export type FooterNavChildren = ReactNode | ((ids: FooterNavIds) => ReactNode);
+
+export interface FooterNavProps {
+  children: FooterNavChildren;
+  isCollapsed: boolean;
+}
+
+interface FooterNavComponent
+  extends ForwardRefExoticComponent<FooterNavProps & RefAttributes<HTMLElement>> {
+  Item: typeof FooterItem;
+}
+
+const FooterNavBase = forwardRef<HTMLElement, FooterNavProps>(({ children, isCollapsed }, ref) => {
+  const euiThemeContext = useEuiTheme();
+  const footerNavigationInstructionsId = useGeneratedHtmlId({
+    prefix: 'footer-navigation-instructions',
+  });
+
+  const handleRef = (node: HTMLElement | null) => {
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+
+    if (node) {
+      const elements = getFocusableElements(node);
+      updateTabIndices(elements);
+    }
+  };
+
+  const wrapperStyles = useMemo(
+    () => getFooterNavWrapperStyles(euiThemeContext, isCollapsed),
+    [euiThemeContext, isCollapsed]
+  );
+
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children({ footerNavigationInstructionsId });
+    }
+    return children;
+  };
+
+  return (
+    <>
+      <EuiScreenReaderOnly>
+        <p id={footerNavigationInstructionsId}>
+          {i18n.translate('core.ui.chrome.sideNavigation.footerInstructions', {
+            defaultMessage:
+              'You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.',
+          })}
+        </p>
+      </EuiScreenReaderOnly>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <nav
+        aria-label={i18n.translate('core.ui.chrome.sideNavigation.footerNavAriaLabel', {
+          defaultMessage: 'Footer navigation',
+        })}
+        css={wrapperStyles}
+        onKeyDown={handleRovingIndex}
+        ref={handleRef}
+        data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footer`}
+      >
+        {renderChildren()}
+      </nav>
+    </>
+  );
+});
+
+export const FooterNav = Object.assign(FooterNavBase, {
+  Item: FooterItem,
+}) satisfies FooterNavComponent;
diff --git a/src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx b/src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx
new file mode 100644
index 0000000000000..ec5ee70b40e35
--- /dev/null
+++ b/src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { forwardRef, useMemo } from 'react';
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { css } from '@emotion/react';
+import { useEuiTheme, type UseEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { ToolItem } from '../tool_item';
+import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
+import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
+
+const getFooterToolbarWrapperStyles = (euiThemeContext: UseEuiTheme, isCollapsed: boolean) => {
+  const { euiTheme: theme } = euiThemeContext;
+  return css`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.size.xs};
+    justify-content: center;
+    padding-top: ${isCollapsed ? theme.size.s : theme.size.m};
+    position: relative;
+    width: 100%;
+
+    ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
+  `;
+};
+
+export interface FooterToolbarProps {
+  children?: ReactNode;
+  isCollapsed: boolean;
+}
+
+interface FooterToolbarComponent
+  extends ForwardRefExoticComponent<FooterToolbarProps & RefAttributes<HTMLDivElement>> {
+  Item: typeof ToolItem;
+}
+
+const FooterToolbarBase = forwardRef<HTMLDivElement, FooterToolbarProps>(
+  ({ children, isCollapsed }, ref) => {
+    const euiThemeContext = useEuiTheme();
+
+    const wrapperStyles = useMemo(
+      () => getFooterToolbarWrapperStyles(euiThemeContext, isCollapsed),
+      [euiThemeContext, isCollapsed]
+    );
+
+    return (
+      <div
+        aria-label={i18n.translate('core.ui.chrome.sideNavigation.footerToolbarAriaLabel', {
+          defaultMessage: 'Side navigation tools',
+        })}
+        css={wrapperStyles}
+        data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footerToolbar`}
+        ref={ref}
+        role="group"
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export const FooterToolbar = Object.assign(FooterToolbarBase, {
+  Item: ToolItem,
+}) satisfies FooterToolbarComponent;
diff --git a/src/core/packages/chrome/navigation/src/components/header/index.tsx b/src/core/packages/chrome/navigation/src/components/header/index.tsx
new file mode 100644
index 0000000000000..d97146f9f8424
--- /dev/null
+++ b/src/core/packages/chrome/navigation/src/components/header/index.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { forwardRef } from 'react';
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { useEuiTheme } from '@elastic/eui';
+
+import { ToolItem } from '../tool_item';
+import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
+
+export interface HeaderToolbarProps {
+  children: ReactNode;
+}
+
+export const HeaderToolbar = forwardRef<HTMLDivElement, HeaderToolbarProps>(({ children }, ref) => {
+  const { euiTheme } = useEuiTheme();
+
+  const wrapperStyles = css`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: ${euiTheme.size.xs};
+    justify-content: center;
+    width: 100%;
+  `;
+
+  return (
+    <div
+      aria-label={i18n.translate('core.ui.chrome.sideNavigation.headerToolbarAriaLabel', {
+        defaultMessage: 'Header tools',
+      })}
+      css={wrapperStyles}
+      data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-headerToolbar`}
+      ref={ref}
+      role="group"
+    >
+      {children}
+    </div>
+  );
+}) as ForwardRefExoticComponent<HeaderToolbarProps & RefAttributes<HTMLDivElement>> & {
+  Item: typeof ToolItem;
+};
+
+HeaderToolbar.Item = ToolItem;
diff --git a/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx b/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
new file mode 100644
index 0000000000000..a2ca9fae5a477
--- /dev/null
+++ b/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
@@ -0,0 +1,122 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { Suspense, forwardRef } from 'react';
+import type { KeyboardEvent, ComponentProps, Ref } from 'react';
+import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import type { EuiButtonIconProps, IconType } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+import type { BadgeType } from '../../../types';
+import { BetaBadge } from '../beta_badge';
+import { TOOLTIP_OFFSET } from '../../constants';
+import { useHighContrastModeStyles } from '../../hooks/use_high_contrast_mode_styles';
+import { useTooltip } from '../../hooks/use_tooltip';
+import { NewItemIndicator } from '../new_item_indicator';
+
+export interface IconButtonProps
+  extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'> {
+  badgeType?: BadgeType;
+  hasContent?: boolean;
+  iconType: IconType;
+  isCurrent?: boolean;
+  isHighlighted: boolean;
+  isNew: boolean;
+  label: string;
+  onClick?: () => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+}
+
+export const IconButton = forwardRef<HTMLElement, IconButtonProps>(
+  ({ badgeType, hasContent, iconType, isCurrent, isHighlighted, isNew, label, ...props }, ref) => {
+    const buttonRef = ref as Ref<HTMLButtonElement>;
+    const { euiTheme } = useEuiTheme();
+    const { tooltipRef, handleMouseOut } = useTooltip();
+    const highContrastModeStyles = useHighContrastModeStyles();
+
+    const wrapperStyles = css`
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    `;
+
+    const buttonStyles = css`
+      --high-contrast-hover-indicator-color: ${isHighlighted
+        ? euiTheme.colors.textPrimary
+        : euiTheme.colors.textParagraph};
+      ${highContrastModeStyles}
+    `;
+
+    const buttonWrapperStyles = css`
+      position: relative;
+      display: inline-flex;
+    `;
+
+    const buttonProps: ComponentProps<typeof EuiButtonIcon> & {
+      'data-highlighted': string;
+      'data-menu-item': string;
+    } = {
+      'aria-current': isCurrent ? 'page' : undefined,
+      'aria-label': label,
+      buttonRef,
+      color: isHighlighted ? 'primary' : 'text',
+      'data-highlighted': isHighlighted ? 'true' : 'false',
+      'data-menu-item': 'true',
+      display: isHighlighted ? 'base' : 'empty',
+      iconType: 'empty',
+      size: 's',
+      css: buttonStyles,
+      ...props,
+    };
+
+    const item = (
+      <div css={buttonWrapperStyles}>
+        <Suspense fallback={<EuiButtonIcon {...buttonProps} />}>
+          <EuiButtonIcon {...buttonProps} iconType={iconType || 'empty'} />
+        </Suspense>
+        {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
+      </div>
+    );
+
+    if (!hasContent) {
+      const tooltipStyles = css`
+        display: flex;
+        align-items: center;
+        gap: ${euiTheme.size.s};
+      `;
+      const tooltipContent = badgeType ? (
+        <span css={tooltipStyles}>
+          {label}
+          <BetaBadge type={badgeType} isInverted />
+        </span>
+      ) : (
+        label
+      );
+
+      return (
+        <EuiToolTip
+          anchorProps={{
+            css: wrapperStyles,
+          }}
+          content={tooltipContent}
+          disableScreenReaderOutput
+          onMouseOut={handleMouseOut}
+          position="right"
+          ref={tooltipRef}
+          repositionOnScroll
+          offset={TOOLTIP_OFFSET}
+        >
+          {item}
+        </EuiToolTip>
+      );
+    }
+
+    return <div css={wrapperStyles}>{item}</div>;
+  }
+);
diff --git a/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx b/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx
index 2082d94cdb256..47aceca945318 100644
--- a/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx
@@ -20,6 +20,7 @@ import { NewItemIndicator } from '../new_item_indicator';
 interface MenuItemBaseProps {
   children: ReactNode;
   iconType: IconType;
+  iconColor?: 'default' | 'text';
   id?: string;
   isCurrent?: boolean;
   isHighlighted: boolean;
@@ -54,6 +55,7 @@ export const MenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, MenuIt
     {
       children,
       iconType,
+      iconColor,
       id,
       isCurrent = false,
       isHighlighted,
@@ -166,7 +168,11 @@ export const MenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, MenuIt
       <>
         <div className={iconWrapperClassName}>
           <Suspense fallback={<EuiIcon aria-hidden color="currentColor" type="empty" />}>
-            <EuiIcon aria-hidden color="currentColor" type={iconType || 'empty'} />
+            <EuiIcon
+              aria-hidden
+              color={iconColor === 'text' ? 'text' : 'currentColor'}
+              type={iconType || 'empty'}
+            />
           </Suspense>
           {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
         </div>
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index 9a322be8e69d1..c0c56fec98be6 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -7,13 +7,26 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useState, type ReactNode } from 'react';
+import React, {
+  useMemo,
+  useState,
+  type ForwardRefExoticComponent,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { useIsWithinBreakpoints } from '@elastic/eui';
+import { useEuiTheme, useIsWithinBreakpoints, type UseEuiTheme } from '@elastic/eui';
 
-import type { NavigationStructure, SideNavLogo, MenuItem, SecondaryMenuItem } from '../../types';
+import type {
+  MenuItem,
+  NavigationStructure,
+  SecondaryMenuItem,
+  SideNavLogo,
+  ToolItem,
+  ToolSlots,
+} from '../../types';
 import {
   MAIN_PANEL_ID,
   MAX_FOOTER_ITEMS,
@@ -21,6 +34,7 @@ import {
   NAVIGATION_ROOT_SELECTOR,
   NAVIGATION_SELECTOR_PREFIX,
 } from '../constants';
+import type { ToolItemProps } from './tool_item';
 import { SideNav } from './side_nav';
 import { SideNavCollapseButton } from './collapse_button';
 import { focusMainContent } from '../utils/focus_main_content';
@@ -29,11 +43,30 @@ import { useLayoutWidth } from '../hooks/use_layout_width';
 import { useNavigation } from '../hooks/use_navigation';
 import { useNewItems } from '../hooks/use_new_items';
 import { useResponsiveMenu } from '../hooks/use_responsive_menu';
+import { getHighContrastSeparator } from '../hooks/use_high_contrast_mode_styles';
 
 const navigationWrapperStyles = css`
   display: flex;
 `;
 
+const getTopSectionStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return css`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: ${euiTheme.size.s};
+    justify-content: center;
+    padding-bottom: ${euiTheme.size.s};
+    position: relative;
+    width: 100%;
+
+    ${getHighContrastSeparator(euiThemeContext)}
+  `;
+};
+
+type SelectableNavigationItem = MenuItem | SecondaryMenuItem | SideNavLogo;
+
 export interface NavigationProps {
   /**
    * The active path for the navigation, used for highlighting the current item.
@@ -44,9 +77,13 @@ export interface NavigationProps {
    */
   isCollapsed: boolean;
   /**
-   * The navigation structure containing primary, secondary, and footer items.
+   * The navigation structure containing primary and footer navigable items.
    */
   items: NavigationStructure;
+  /**
+   * Optional chrome tools (search, help, etc.) rendered in header and footer toolbars.
+   */
+  tools?: ToolSlots;
   /**
    * The logo object containing the route ID, href, label, and type.
    */
@@ -56,9 +93,9 @@ export interface NavigationProps {
    */
   setWidth: (width: number) => void;
   /**
-   * (optional) Callback fired when a navigation item is clicked.
+   * (optional) Callback fired when a navigable item (or logo) is activated. Not called for tool controls.
    */
-  onItemClick?: (item: MenuItem | SecondaryMenuItem | SideNavLogo) => void;
+  onItemClick?: (item: SelectableNavigationItem) => void;
   /**
    * Callback fired when the collapse button is toggled.
    *
@@ -80,6 +117,7 @@ export const Navigation = ({
   activeItemId,
   isCollapsed: isCollapsedProp,
   items,
+  tools,
   logo,
   onItemClick,
   onToggleCollapsed,
@@ -87,13 +125,15 @@ export const Navigation = ({
   sidePanelFooter,
   ...rest
 }: NavigationProps) => {
+  const euiThemeContext = useEuiTheme();
   const forcedCollapsed = useIsWithinBreakpoints(['xs', 's']);
   const isCollapsed = forcedCollapsed || isCollapsedProp;
   const popoverItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverItem`;
   const popoverFooterItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverFooterItem`;
+  const popoverFooterToolPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverFooterTool`;
+  const popoverHeaderToolPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverHeaderTool`;
   const sidePanelItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-sidePanelItem`;
   const moreMenuTriggerTestSubj = `${NAVIGATION_SELECTOR_PREFIX}-moreMenuTrigger`;
-
   const {
     actualActiveItemId,
     visuallyActivePageId,
@@ -118,11 +158,18 @@ export const Navigation = ({
 
   useLayoutWidth({ isCollapsed, isSidePanelOpen, setWidth });
 
-  // Create the collapse button if a toggle callback is provided or if the navigation is not forced to be collapsed (e.g. on mobile)
-  const collapseButton =
-    onToggleCollapsed && !forcedCollapsed ? (
-      <SideNavCollapseButton isCollapsed={isCollapsed} toggle={onToggleCollapsed} />
-    ) : null;
+  const collapseToggle = onToggleCollapsed && !forcedCollapsed ? onToggleCollapsed : undefined;
+
+  const headerTools = tools?.headerTools ?? [];
+  const footerTools = tools?.footerTools ?? [];
+  const hasHeaderTools = headerTools.length > 0;
+  const hasFooterTools = footerTools.length > 0;
+  const showFooterToolbar = hasFooterTools || Boolean(collapseToggle);
+
+  const topSectionStyles = useMemo(() => getTopSectionStyles(euiThemeContext), [euiThemeContext]);
+
+  const footerNavItems = items.footerItems.slice(0, MAX_FOOTER_ITEMS);
+  const hasFooterNavItems = footerNavItems.length > 0;
 
   return (
     <div
@@ -131,13 +178,25 @@ export const Navigation = ({
       id={NAVIGATION_ROOT_SELECTOR}
     >
       <SideNav isCollapsed={isCollapsed}>
-        <SideNav.Logo
-          isCollapsed={isCollapsed}
-          isCurrent={actualActiveItemId === logo.id}
-          isHighlighted={visuallyActivePageId === logo.id}
-          onClick={() => onItemClick?.(logo)}
-          {...logo}
-        />
+        <div css={topSectionStyles}>
+          <SideNav.Logo
+            isCollapsed={isCollapsed}
+            isCurrent={actualActiveItemId === logo.id}
+            isHighlighted={visuallyActivePageId === logo.id}
+            onClick={() => onItemClick?.(logo)}
+            {...logo}
+          />
+          {hasHeaderTools && (
+            <SideNav.HeaderToolbar>
+              {renderToolItems({
+                items: headerTools,
+                itemComponent: SideNav.HeaderToolbar.Item,
+                isAnyPopoverLocked,
+                popoverItemPrefix: popoverHeaderToolPrefix,
+              })}
+            </SideNav.HeaderToolbar>
+          )}
+        </div>
 
         <SideNav.PrimaryMenu ref={primaryMenuRef} isCollapsed={isCollapsed}>
           {({ mainNavigationInstructionsId }) => (
@@ -341,84 +400,42 @@ export const Navigation = ({
           )}
         </SideNav.PrimaryMenu>
 
-        <SideNav.Footer isCollapsed={isCollapsed} collapseButton={collapseButton}>
-          {({ footerNavigationInstructionsId }) => (
-            <>
-              {items.footerItems.slice(0, MAX_FOOTER_ITEMS).map((item, index) => {
-                const { sections, ...itemProps } = item;
-                const isFirstItem = index === 0;
-                const ariaDescribedBy = isFirstItem ? footerNavigationInstructionsId : undefined;
-
-                return (
-                  <SideNav.Popover
-                    key={item.id}
-                    hasContent={getHasSubmenu(item)}
-                    isSidePanelOpen={!isCollapsed && item.id === openerNode?.id}
-                    isAnyPopoverLocked={isAnyPopoverLocked}
-                    label={item.label}
-                    persistent={false}
-                    trigger={
-                      <SideNav.Footer.Item
-                        aria-describedby={ariaDescribedBy}
-                        isHighlighted={item.id === visuallyActivePageId}
-                        isCurrent={actualActiveItemId === item.id}
-                        isNew={getIsNewPrimary(item.id)}
-                        hasContent={getHasSubmenu(item)}
-                        onClick={() => onItemClick?.(item)}
-                        {...itemProps}
-                      />
-                    }
-                  >
-                    {(closePopover, ids) => (
-                      <SideNav.SecondaryMenu
-                        title={item.label}
-                        badgeType={item.badgeType}
-                        isNew={getIsNewSecondary(item.id)}
-                      >
-                        {sections?.map((section, sectionIndex) => {
-                          const firstNonEmptySectionIndex = item.sections?.findIndex(
-                            (s) => s.items.length > 0
-                          );
-                          return (
-                            <SideNav.SecondaryMenu.Section key={section.id} label={section.label}>
-                              {section.items.map((subItem, subItemIndex) => {
-                                const isFirstSubItem =
-                                  sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
-                                const subItemAriaDescribedBy = isFirstSubItem
-                                  ? ids?.popoverNavigationInstructionsId
-                                  : undefined;
+        {hasFooterNavItems && (
+          <SideNav.FooterNav isCollapsed={isCollapsed}>
+            {({ footerNavigationInstructionsId }) =>
+              renderFooterNavItems({
+                items: footerNavItems,
+                itemComponent: SideNav.FooterNav.Item,
+                navigationInstructionsId: footerNavigationInstructionsId,
+                openerNode,
+                isCollapsed,
+                isAnyPopoverLocked,
+                visuallyActivePageId,
+                visuallyActiveSubpageId,
+                actualActiveItemId,
+                onItemClick,
+                getIsNewPrimary,
+                getIsNewSecondary,
+                popoverItemPrefix: popoverFooterItemPrefix,
+              })
+            }
+          </SideNav.FooterNav>
+        )}
 
-                                return (
-                                  <SideNav.SecondaryMenu.Item
-                                    aria-describedby={subItemAriaDescribedBy}
-                                    key={subItem.id}
-                                    isHighlighted={subItem.id === visuallyActiveSubpageId}
-                                    isCurrent={actualActiveItemId === subItem.id}
-                                    isNew={getIsNewSecondary(subItem.id)}
-                                    onClick={() => {
-                                      onItemClick?.(subItem);
-                                      if (subItem.href) {
-                                        closePopover();
-                                      }
-                                    }}
-                                    {...subItem}
-                                    testSubjPrefix={popoverFooterItemPrefix}
-                                  >
-                                    {subItem.label}
-                                  </SideNav.SecondaryMenu.Item>
-                                );
-                              })}
-                            </SideNav.SecondaryMenu.Section>
-                          );
-                        })}
-                      </SideNav.SecondaryMenu>
-                    )}
-                  </SideNav.Popover>
-                );
+        {showFooterToolbar && (
+          <SideNav.FooterToolbar isCollapsed={isCollapsed}>
+            {hasFooterTools &&
+              renderToolItems({
+                items: footerTools,
+                itemComponent: SideNav.FooterToolbar.Item,
+                isAnyPopoverLocked,
+                popoverItemPrefix: popoverFooterToolPrefix,
               })}
-            </>
-          )}
-        </SideNav.Footer>
+            {collapseToggle && (
+              <SideNavCollapseButton isCollapsed={isCollapsed} toggle={collapseToggle} />
+            )}
+          </SideNav.FooterToolbar>
+        )}
       </SideNav>
 
       {isSidePanelOpen && openerNode && (
@@ -469,3 +486,183 @@ export const Navigation = ({
     </div>
   );
 };
+
+interface RenderFooterNavItemsArgs {
+  actualActiveItemId?: string;
+  getIsNewPrimary: (itemId: string) => boolean;
+  getIsNewSecondary: (itemId: string) => boolean;
+  isAnyPopoverLocked: boolean;
+  isCollapsed: boolean;
+  itemComponent: typeof SideNav.FooterNav.Item;
+  items: MenuItem[];
+  navigationInstructionsId: string | undefined;
+  onItemClick?: (item: SelectableNavigationItem) => void;
+  openerNode: MenuItem | null;
+  popoverItemPrefix: string;
+  visuallyActivePageId?: string;
+  visuallyActiveSubpageId?: string;
+}
+
+const renderFooterNavItems = ({
+  actualActiveItemId,
+  getIsNewPrimary,
+  getIsNewSecondary,
+  isAnyPopoverLocked,
+  isCollapsed,
+  itemComponent: ItemComponent,
+  items,
+  navigationInstructionsId,
+  onItemClick,
+  openerNode,
+  popoverItemPrefix,
+  visuallyActivePageId,
+  visuallyActiveSubpageId,
+}: RenderFooterNavItemsArgs) =>
+  items.map((item, index) => {
+    const ariaDescribedBy = index === 0 ? navigationInstructionsId : undefined;
+    const { sections, ...itemProps } = item;
+
+    return (
+      <SideNav.Popover
+        key={item.id}
+        hasContent={getHasSubmenu(item)}
+        isSidePanelOpen={!isCollapsed && item.id === openerNode?.id}
+        isAnyPopoverLocked={isAnyPopoverLocked}
+        label={item.label}
+        persistent={false}
+        trigger={
+          <ItemComponent
+            aria-describedby={ariaDescribedBy}
+            isHighlighted={item.id === visuallyActivePageId}
+            isCurrent={actualActiveItemId === item.id}
+            isNew={getIsNewPrimary(item.id)}
+            hasContent={getHasSubmenu(item)}
+            onClick={() => onItemClick?.(item)}
+            {...itemProps}
+          />
+        }
+      >
+        {(closePopover, ids) => {
+          const firstNonEmptySectionIndex = sections?.findIndex(
+            (section) => section.items.length > 0
+          );
+          return (
+            <SideNav.SecondaryMenu
+              title={item.label}
+              badgeType={item.badgeType}
+              isNew={getIsNewSecondary(item.id)}
+            >
+              {sections?.map((section, sectionIndex) => (
+                <SideNav.SecondaryMenu.Section key={section.id} label={section.label}>
+                  {section.items.map((subItem, subItemIndex) => {
+                    const isFirstSubItem =
+                      sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
+                    const subItemAriaDescribedBy = isFirstSubItem
+                      ? ids?.popoverNavigationInstructionsId
+                      : undefined;
+
+                    return (
+                      <SideNav.SecondaryMenu.Item
+                        aria-describedby={subItemAriaDescribedBy}
+                        key={subItem.id}
+                        isHighlighted={subItem.id === visuallyActiveSubpageId}
+                        isCurrent={actualActiveItemId === subItem.id}
+                        isNew={getIsNewSecondary(subItem.id)}
+                        onClick={() => {
+                          onItemClick?.(subItem);
+                          if (subItem.href) {
+                            closePopover();
+                          }
+                        }}
+                        {...subItem}
+                        testSubjPrefix={popoverItemPrefix}
+                      >
+                        {subItem.label}
+                      </SideNav.SecondaryMenu.Item>
+                    );
+                  })}
+                </SideNav.SecondaryMenu.Section>
+              ))}
+            </SideNav.SecondaryMenu>
+          );
+        }}
+      </SideNav.Popover>
+    );
+  });
+
+interface RenderToolItemsArgs {
+  isAnyPopoverLocked: boolean;
+  itemComponent: ForwardRefExoticComponent<ToolItemProps & RefAttributes<HTMLButtonElement>>;
+  items: ToolItem[];
+  popoverItemPrefix: string;
+}
+
+const renderToolItems = ({
+  isAnyPopoverLocked,
+  itemComponent: ItemComponent,
+  items,
+  popoverItemPrefix,
+}: RenderToolItemsArgs) =>
+  items.map((item) => {
+    const { onClick: itemOnClick, sections, ...itemProps } = item;
+
+    return (
+      <SideNav.Popover
+        key={item.id}
+        hasContent={getHasSubmenu(item)}
+        isSidePanelOpen={false}
+        isAnyPopoverLocked={isAnyPopoverLocked}
+        label={item.label}
+        persistent={false}
+        trigger={
+          <ItemComponent
+            isHighlighted={false}
+            isNew={false}
+            hasContent={getHasSubmenu(item)}
+            onClick={() => {
+              itemOnClick?.();
+            }}
+            {...itemProps}
+          />
+        }
+      >
+        {(closePopover, ids) => {
+          const firstNonEmptySectionIndex = sections?.findIndex(
+            (section) => section.items.length > 0
+          );
+          return (
+            <SideNav.SecondaryMenu title={item.label} badgeType={item.badgeType} isNew={false}>
+              {sections?.map((section, sectionIndex) => (
+                <SideNav.SecondaryMenu.Section key={section.id} label={section.label}>
+                  {section.items.map((subItem, subItemIndex) => {
+                    const isFirstSubItem =
+                      sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
+                    const subItemAriaDescribedBy = isFirstSubItem
+                      ? ids?.popoverNavigationInstructionsId
+                      : undefined;
+
+                    return (
+                      <SideNav.SecondaryMenu.Item
+                        aria-describedby={subItemAriaDescribedBy}
+                        key={subItem.id}
+                        isHighlighted={false}
+                        isCurrent={false}
+                        isNew={false}
+                        onClick={() => {
+                          closePopover();
+                        }}
+                        {...subItem}
+                        testSubjPrefix={popoverItemPrefix}
+                      >
+                        {subItem.label}
+                      </SideNav.SecondaryMenu.Item>
+                    );
+                  })}
+                </SideNav.SecondaryMenu.Section>
+              ))}
+            </SideNav.SecondaryMenu>
+          );
+        }}
+      </SideNav.Popover>
+    );
+  });
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx
index f9a15f38e5b47..6eb31ffd09d06 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx
@@ -13,7 +13,8 @@ import { css } from '@emotion/react';
 import { useEuiTheme, type UseEuiTheme } from '@elastic/eui';
 
 import { COLLAPSED_WIDTH, EXPANDED_WIDTH } from '../../hooks/use_layout_width';
-import { Footer } from '../footer';
+import { FooterNav, FooterToolbar } from '../footer';
+import { HeaderToolbar } from '../header';
 import { Logo } from './logo';
 import { NestedSecondaryMenu } from '../nested_secondary_menu';
 import { Popover } from './popover';
@@ -40,21 +41,24 @@ export interface SideNavProps {
 
 interface SideNavComponent extends FC<SideNavProps> {
   Logo: typeof Logo;
+  HeaderToolbar: typeof HeaderToolbar;
   PrimaryMenu: typeof PrimaryMenu;
   Popover: typeof Popover;
   SecondaryMenu: typeof SecondaryMenu;
   NestedSecondaryMenu: typeof NestedSecondaryMenu;
-  Footer: typeof Footer;
+  FooterNav: typeof FooterNav;
+  FooterToolbar: typeof FooterToolbar;
   SidePanel: typeof SidePanel;
 }
 
 /**
  * A wrapper component for the side navigation that encapsulates:
  * - the logo,
+ * - header and footer toolbars,
  * - the primary menu,
  * - the secondary menu used in the popover and in the side panel,
  * - the nested secondary menu used in the "More" menu,
- * - the footer,
+ * - the footer navigation and toolbar,
  * - the side panel.
  */
 export const SideNav: SideNavComponent = ({ children, isCollapsed }) => {
@@ -73,9 +77,11 @@ export const SideNav: SideNavComponent = ({ children, isCollapsed }) => {
 };
 
 SideNav.Logo = Logo;
+SideNav.HeaderToolbar = HeaderToolbar;
 SideNav.PrimaryMenu = PrimaryMenu;
 SideNav.Popover = Popover;
 SideNav.SecondaryMenu = SecondaryMenu;
 SideNav.NestedSecondaryMenu = NestedSecondaryMenu;
-SideNav.Footer = Footer;
+SideNav.FooterNav = FooterNav;
+SideNav.FooterToolbar = FooterToolbar;
 SideNav.SidePanel = SidePanel;
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx
index c9edaefa15c88..8b5008a3f903e 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx
@@ -17,7 +17,6 @@ import type { SideNavLogo } from '../../../types';
 import { MenuItem } from '../menu_item';
 import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
 import { useTooltip } from '../../hooks/use_tooltip';
-import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
 
 export interface LogoProps extends Omit<HTMLAttributes<HTMLAnchorElement>, 'onClick'>, SideNavLogo {
   id: string;
@@ -31,30 +30,16 @@ export const Logo = ({
   isCollapsed,
   isCurrent,
   isHighlighted,
+  hideLabel,
   label,
   ...props
 }: LogoProps): JSX.Element => {
-  const euiThemeContext = useEuiTheme();
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme } = useEuiTheme();
   const { tooltipRef, handleMouseOut } = useTooltip();
 
-  /**
-   * **Icon size**
-   *
-   * In Figma, the logo icon is 20x20.
-   * `EuiIcon` supports `l` which is 24x24 and `m` which is 16x16.
-   *
-   * **Padding**
-   *
-   * 7px aligns better with other elements in the layout.
-   * We cannot use `euiTheme.size.s` because it's 8px.
-   */
   const wrapperStyles = css`
     position: relative;
     padding-top: ${isCollapsed ? euiTheme.size.s : euiTheme.size.m};
-    padding-bottom: ${isCollapsed ? euiTheme.size.s : euiTheme.size.m};
-
-    ${getHighContrastSeparator(euiThemeContext)}
 
     .euiText {
       font-weight: ${euiTheme.font.weight.bold};
@@ -79,7 +64,7 @@ export const Logo = ({
         data-test-subj={logoTestSubj}
         isHighlighted={isHighlighted}
         isCurrent={isCurrent}
-        isLabelVisible={!isCollapsed}
+        isLabelVisible={!isCollapsed && !hideLabel}
         isTruncated={false}
         {...props}
       >
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx
index 2e4f837ef5b8d..6bc9fe5efb2f6 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx
@@ -59,7 +59,7 @@ export interface SidePanelProps {
 }
 
 /**
- * Side navigation panel that opens on mouse click if the primary menu item contains a submenu.
+ * Side navigation panel that opens on mouse click if the top-level item contains a submenu.
  * Shows only in expanded mode.
  */
 export const SidePanel = ({ children, footer, openerNode }: SidePanelProps): JSX.Element => {
diff --git a/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx b/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
new file mode 100644
index 0000000000000..ec4b27dbf0a21
--- /dev/null
+++ b/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { forwardRef } from 'react';
+import type { KeyboardEvent, Ref } from 'react';
+import type { EuiButtonIconProps } from '@elastic/eui';
+
+import type { ToolItem as ToolItemData } from '../../../types';
+import { IconButton } from '../icon_button';
+import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
+
+export interface ToolItemProps
+  extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'>,
+    Omit<ToolItemData, 'sections'> {
+  hasContent?: boolean;
+  isHighlighted: boolean;
+  isNew: boolean;
+  onClick?: () => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+}
+
+export const ToolItem = forwardRef<HTMLButtonElement, ToolItemProps>(
+  ({ id, ...props }, ref) => (
+    <IconButton
+      ref={ref as Ref<HTMLElement>}
+      data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-toolItem-${id}`}
+      {...props}
+    />
+  )
+);
diff --git a/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts b/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
index 01620f070cfe5..a94a690fa2d83 100644
--- a/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
+++ b/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
@@ -32,7 +32,7 @@ interface NavigationState {
  * - `actualActiveItemId` - the actual active item ID. There can only be one `aria-current=page` link on the page.
  * - `visuallyActivePageId` - the visually active page ID. The link does not have to be `aria-current=page`, it can be a parent of an active page.
  * - `visuallyActiveSubpageId` - the visually active subpage ID.
- * - `openerNode` - the primary menu item whose submenu is shown in the side panel.
+ * - `openerNode` - the top-level item whose submenu is shown in the side panel.
  * - `isCollapsed` - whether the side nav is collapsed.
  * - `isSidePanelOpen` - whether the side panel is open.
  */
diff --git a/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts b/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
index 3fc92540427c1..70ac2e41938ec 100644
--- a/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
+++ b/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
@@ -7,14 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { MenuItem } from '../../types';
-
 /**
  * Utility function for checking whether the menu item has a submenu.
  *
  * @param item - the menu item to check.
  * @returns `true` if the menu item has a submenu, `false` otherwise.
  */
-export const getHasSubmenu = (item: MenuItem): boolean => {
+export const getHasSubmenu = (item: { sections?: ReadonlyArray<unknown> }): boolean => {
   return !!item.sections && item.sections.length > 0;
 };
diff --git a/src/core/packages/chrome/navigation/types.ts b/src/core/packages/chrome/navigation/types.ts
index ad53ab969ba16..690fd4f73f9b5 100644
--- a/src/core/packages/chrome/navigation/types.ts
+++ b/src/core/packages/chrome/navigation/types.ts
@@ -13,7 +13,7 @@ export type BadgeType = 'beta' | 'techPreview' | 'new';
 
 /**
  * A navigation item within a secondary/nested menu.
- * Secondary items appear when a primary menu item with sections is clicked or hovered.
+ * Secondary items appear when a top-level navigation item with sections is clicked or hovered.
  */
 export interface SecondaryMenuItem {
   /**
@@ -63,7 +63,7 @@ export interface SecondaryMenuSection {
 
 /**
  * A primary navigation menu item that appears in the main navigation sidebar.
- * Can optionally contain nested secondary menu sections.
+ * Primary items must always be navigable links.
  */
 export interface MenuItem {
   /**
@@ -97,12 +97,36 @@ export interface MenuItem {
 }
 
 /**
- * The complete navigation structure containing primary and footer menu items.
- * This is the main data structure passed to the Navigation component.
+ * A chrome tool control (search, help, profile, etc.) — not a navigation destination.
+ * Tool items can perform an action via `onClick` or expose submenu content via `sections`.
+ */
+export interface ToolItem {
+  id: string;
+  label: string;
+  iconType: IconType;
+  onClick?: () => void;
+  /**
+   * Optional submenu content shown for the tool control.
+   */
+  sections?: SecondaryMenuSection[];
+  badgeType?: BadgeType;
+  'data-test-subj'?: string;
+}
+
+/**
+ * Optional groupings of tool controls for the sidenav header and footer toolbars.
+ */
+export interface ToolSlots {
+  headerTools?: ToolItem[];
+  footerTools?: ToolItem[];
+}
+
+/**
+ * Navigable sidenav content: primary rail and footer links.
  */
 export interface NavigationStructure {
   /**
-   * The items to be displayed in the navigation footer.
+   * The items to be displayed in the navigation footer (navigable links).
    */
   footerItems: MenuItem[];
   /**
@@ -139,10 +163,20 @@ export interface SideNavLogo {
    * The label for the logo, typically the product name.
    */
   label: string;
+  /**
+   * When `true`, the label is not rendered under the icon while the navigation is expanded.
+   * The logo link still uses `label` for `aria-label` and for the collapsed-mode tooltip.
+   */
+  hideLabel?: boolean;
   /**
    * The logo type, e.g. `appObservability`, `appSecurity`, etc.
    */
   iconType: string;
+  /**
+   * (optional) Color of the logo icon. `'default'` renders the icon in its brand colors;
+   * `'text'` renders it monochromatically using the current text color.
+   */
+  iconColor?: 'default' | 'text';
   /**
    * (optional) `data-test-subj` attribute for testing and tracking purposes.
    */
diff --git a/src/platform/plugins/shared/dashboard/moon.yml b/src/platform/plugins/shared/dashboard/moon.yml
index 8380b6aef1f8a..771445293aef7 100644
--- a/src/platform/plugins/shared/dashboard/moon.yml
+++ b/src/platform/plugins/shared/dashboard/moon.yml
@@ -118,8 +118,8 @@ dependsOn:
   - '@kbn/test-jest-helpers'
   - '@kbn/scout'
   - '@kbn/cps-utils'
-  - '@kbn/core-chrome-browser'
   - '@kbn/as-code-shared-schemas'
+  - '@kbn/core-chrome-browser'
 tags:
   - plugin
   - prod
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx b/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
index 3b9ecfa6d024f..80ec27848aacf 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
+++ b/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
@@ -40,6 +40,14 @@ export class GlobalSearchBarPlugin implements Plugin<{}, {}, {}, GlobalSearchBar
     const { application, http } = core;
     const reportEvent = new EventReporter({ analytics: core.analytics, usageCollection });
 
+    core.chrome.next.globalSearch.set({
+      onClick: () => {
+        // TODO: open search modal
+        // eslint-disable-next-line no-console
+        console.log('[GlobalSearch] search button clicked — modal not yet implemented');
+      },
+    });
+
     core.chrome.navControls.registerCenter({
       order: 1000,
       content: (

From 9cdd1286dff04389616839b24172a73186930837 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 2 Apr 2026 13:22:29 +0200
Subject: [PATCH 12/77] fix sidebar margin-offset

---
 .../sidebar/layout_sidebar.styles.ts                            | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.styles.ts
index 56505dc5570bf..29dc67df81c61 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.styles.ts
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.styles.ts
@@ -18,6 +18,8 @@ const root = css`
     100% - ${layoutVar('application.marginTop')} - ${layoutVar('application.marginBottom')}
   );
   width: calc(100% - ${layoutVar('application.marginRight')});
+  margin-top: ${layoutVar('application.marginTop')};
+  margin-bottom: ${layoutVar('application.marginBottom')};
   z-index: ${layoutLevels.sidebar};
   min-height: 0; // to allow flex children to shrink properly
 `;

From f9e3ae42a32b37a43c467c24c92532ffa0e200fd Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 2 Apr 2026 13:22:55 +0200
Subject: [PATCH 13/77] put sidenav tools behind feature flag

---
 .../project/sidenav/navigation/navigation.tsx | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
index 287af2fb38645..0bdcd314a5448 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
@@ -96,14 +96,18 @@ const useNavigationItems = (): NavigationState | null => {
       })
     );
 
-    const toolSlots$ = combineLatest([chrome.next.globalSearch.get$(), helpLinks$]).pipe(
-      map(([searchConfig, helpLinks]) =>
-        buildToolSlots({
-          globalSearch: searchConfig,
-          helpLinks,
-        })
-      )
-    );
+    const emptyToolSlots: ToolSlots = { headerTools: [], footerTools: [] };
+
+    const toolSlots$ = isNextChrome
+      ? combineLatest([chrome.next.globalSearch.get$(), helpLinks$]).pipe(
+          map(([searchConfig, helpLinks]) =>
+            buildToolSlots({
+              globalSearch: searchConfig,
+              helpLinks,
+            })
+          )
+        )
+      : [emptyToolSlots];
 
     return combineLatest([navState$, toolSlots$]).pipe(
       map(([navState, toolSlots]) => ({

From c63aacee830ba92d8835d4bb54336531b4eecda9 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 2 Apr 2026 13:23:21 +0200
Subject: [PATCH 14/77] fix securty-solution not rendered without ai assistant

---
 .../plugins/security_solution/public/assistant/provider.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx b/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx
index 74535ab610cef..f706e7128ea48 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx
@@ -56,7 +56,11 @@ export const AssistantProvider: FC<PropsWithChildren<unknown>> = ({ children })
   }, [elasticAssistantSharedState.promptContexts, promptContext, promptContexts]);
 
   if (!assistantContextValue) {
-    return null;
+    // TODO: Chrome-Next quick mitigation — was `return null` which blocked the entire route tree.
+    // With Chrome Next, the elastic_assistant nav control never mounts (no HeaderNavControls),
+    // so setAssistantContextValue is never called and this stays undefined.
+    // See https://github.com/elastic/kibana/issues/260010
+    return <>{children}</>;
   }
 
   return (

From bc6afc7986298213ec493f66d01104e8a355b091 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 2 Apr 2026 17:26:06 +0200
Subject: [PATCH 15/77] [FeatureBranch/DoNotReview][Chrome Next] Keep all AI
 buttons  (#260937)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fixes the AI assistant buttons not appearing in the Chrome Next header.

Relates to https://github.com/elastic/kibana/issues/260010

### Problem

Chrome Next renders the header differently from the legacy chrome — it
does **not** render `HeaderNavControls` (the
`chrome.navControls.registerRight` mount points). All AI assistant
buttons (Security, Observability, Search, AI experience picker) relied
exclusively on `registerRight`, so they were invisible when Chrome Next
was enabled.

Additionally, the existing `chrome.next.aiButton.set()` API was a
single-slot, last-write-wins design — only the Agent Builder could use
it, and other AI experiences had no way to register their buttons.

### Changes

**1. Multi-registration `aiButton.register()` API**

Replaced `chrome.next.aiButton.set(node)` with
`chrome.next.aiButton.register(button)`:
- Multiple plugins can register buttons; each call returns an unregister
callback
- Accepts `ReactNode | MountPoint` as content (via
`ChromeExtensionContent`), so plugins can reuse their existing `mount`
functions
- Internal state uses `BehaviorSubject<ReadonlySet<ChromeNextAiButton>>`
to manage registrations
- Chrome Next header renders all registered buttons via `AiButtonSlot`

**2. Dual registration in all AI plugins**

Each AI plugin now registers with **both**
`chrome.navControls.registerRight` (legacy) and
`chrome.next.aiButton.register` (Chrome Next). This ensures buttons
appear regardless of which chrome is active. All dual registrations are
marked with `// TODO: Chrome-Next hack` comments linking to #260010 for
cleanup once Chrome Next is the only chrome.

Plugins updated:
- `elastic_assistant` (Security AI Assistant)
- `observability_ai_assistant_app` (Observability AI Assistant)
- `search_assistant` (Search AI Assistant)
- `ai_assistant_management/selection` (AI experience picker)
- `agent_builder` (Agent Builder — already had Chrome Next registration,
updated to new API)

**3. Type consolidation**

Moved all Chrome Next types into
`src/core/packages/chrome/browser/src/chrome_next/`:
- `ChromeNextAiButton`, `ChromeNextHeaderConfig`,
`ChromeNextGlobalSearchConfig`, `ChromeNext`
- Extracted `InternalChromeNext` interface in `browser-internal-types`

**4. Empty mount point layout fix**

Fixed phantom gaps in the Chrome Next trailing actions caused by AI
buttons that register but render nothing (e.g., when a solution's
assistant is not enabled). Applied `mountPointContainerCss` to both the
`MountPoint` and `ReactNode` branches in `HeaderExtension` so empty
wrappers collapse out of the flex layout.
---
 .../src/project_next/ai_button_slot.tsx       | 19 ++++---
 .../src/project_next/hooks/index.ts           |  2 +-
 .../src/project_next/hooks/use_ai_button.ts   | 14 +++---
 .../src/project_next/trailing_actions.tsx     |  6 +--
 .../src/shared/header_extension.tsx           |  2 +-
 .../chrome/browser-internal-types/index.ts    | 25 ++++++----
 .../browser-internal/src/chrome_api.tsx       | 14 +++++-
 .../src/state/chrome_state.ts                 |  5 +-
 .../browser-mocks/src/chrome_service.mock.ts  |  4 +-
 src/core/packages/chrome/browser/index.ts     |  8 +--
 .../browser/src/chrome_next/ai_button.ts      | 15 ++++++
 .../browser/src/chrome_next/chrome_next.ts    | 47 +++++++++++++++++
 .../global_search.ts}                         |  0
 .../{next_header.ts => chrome_next/header.ts} |  0
 .../chrome/browser/src/chrome_next/index.ts   | 21 ++++++++
 .../packages/chrome/browser/src/contracts.ts  | 37 ++------------
 src/core/packages/chrome/browser/src/index.ts | 11 ++--
 .../selection/public/plugin.tsx               | 50 +++++++++++--------
 .../shared/agent_builder/public/plugin.tsx    | 19 ++++---
 .../public/plugin.tsx                         | 42 +++++++++-------
 .../search_assistant/public/plugin.tsx        | 40 +++++++++------
 .../elastic_assistant/public/plugin.tsx       | 10 ++++
 .../public/assistant/provider.tsx             |  6 +--
 23 files changed, 252 insertions(+), 145 deletions(-)
 create mode 100644 src/core/packages/chrome/browser/src/chrome_next/ai_button.ts
 create mode 100644 src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
 rename src/core/packages/chrome/browser/src/{next_global_search.ts => chrome_next/global_search.ts} (100%)
 rename src/core/packages/chrome/browser/src/{next_header.ts => chrome_next/header.ts} (100%)
 create mode 100644 src/core/packages/chrome/browser/src/chrome_next/index.ts

diff --git a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx b/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
index 24e5ebfc552d5..97765863b4771 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
@@ -8,20 +8,23 @@
  */
 
 import React from 'react';
-import { useAiButton } from './hooks';
+import { HeaderExtension } from '../shared/header_extension';
+import { useAiButtons } from './hooks';
 
-/**
- * Renders the AI button in the Chrome-Next project header.
- * The plugin owns the component; Chrome just places it in the slot.
- */
 export const AiButtonSlot = React.memo(() => {
-  const node = useAiButton();
+  const buttons = useAiButtons();
 
-  if (!node) {
+  if (buttons.length === 0) {
     return null;
   }
 
-  return <>{node}</>;
+  return (
+    <>
+      {buttons.map((button, index) => (
+        <HeaderExtension key={index} extension={button.content} />
+      ))}
+    </>
+  );
 });
 
 AiButtonSlot.displayName = 'AiButtonSlot';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
index 6aa997cbcd06d..0b3ba150d2b3c 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { useAiButton } from './use_ai_button';
+export { useAiButtons } from './use_ai_button';
 export { useProjectNextAppMenu } from './use_project_next_app_menu';
 export { useBackButton } from './use_back_button';
 export { useReportTopBarHeight } from './use_report_top_bar_height';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
index 46ada8f9ce7cf..3e7dc5341b0ed 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
+++ b/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
@@ -7,17 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ReactNode } from 'react';
 import { useMemo } from 'react';
+import type { ChromeNextAiButton } from '@kbn/core-chrome-browser';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 
-/**
- * Returns the AI button ReactNode set via `chrome.next.aiButton.set()`,
- * or `undefined` if not set. Used by the Chrome-Next header.
- */
-export function useAiButton(): ReactNode | undefined {
+const EMPTY: ChromeNextAiButton[] = [];
+
+export function useAiButtons(): ChromeNextAiButton[] {
   const chrome = useChromeService();
-  const node$ = useMemo(() => chrome.next.aiButton.get$(), [chrome]);
-  return useObservable(node$, undefined);
+  const buttons$ = useMemo(() => chrome.next.aiButton.get$(), [chrome]);
+  return useObservable(buttons$, EMPTY);
 }
diff --git a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
index 0ed5e9974150a..cc5ec747af9f8 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
+++ b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
@@ -13,7 +13,7 @@ import React, { useMemo } from 'react';
 import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
 import { AiButtonSlot } from './ai_button_slot';
 import { ProjectNextAppMenu } from './app_menu';
-import { useAiButton, useProjectNextAppMenu } from './hooks';
+import { useAiButtons, useProjectNextAppMenu } from './hooks';
 
 const useTrailingStyles = () => {
   const { euiTheme } = useEuiTheme();
@@ -38,10 +38,10 @@ const useTrailingStyles = () => {
 export const ProjectNextTrailingActions = React.memo(() => {
   const appMenuConfig = useProjectNextAppMenu();
   const hasLegacyActionMenu = useHasLegacyActionMenu();
-  const aiButton = useAiButton();
+  const aiButtons = useAiButtons();
   const styles = useTrailingStyles();
 
-  const hasTrailingContent = !!appMenuConfig || hasLegacyActionMenu || !!aiButton;
+  const hasTrailingContent = !!appMenuConfig || hasLegacyActionMenu || aiButtons.length > 0;
 
   if (!hasTrailingContent) {
     return null;
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_extension.tsx b/src/core/packages/chrome/browser-components/src/shared/header_extension.tsx
index a9124999e1b5d..7f96fed895d36 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_extension.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_extension.tsx
@@ -55,7 +55,7 @@ export const HeaderExtension = ({ extension, display, containerClassName }: Prop
   if (!isMountPoint(extension)) {
     return (
       <Suspense fallback={null}>
-        <div className={containerClassName} style={style}>
+        <div css={mountPointContainerCss} className={containerClassName} style={style}>
           {extension}
         </div>
       </Suspense>
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index 12664356cf6b5..2e1a79cfa3cf0 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -15,6 +15,8 @@ import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeBreadcrumbsAppendExtension,
+  ChromeNext,
+  ChromeNextAiButton,
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
   ChromeProjectNavigationNode,
@@ -108,15 +110,18 @@ export interface InternalChromeStart extends ChromeStart {
   };
 
   /** @internal Extends public `next` with `get$` for Chrome layout components. */
-  next: ChromeStart['next'] & {
-    header: ChromeStart['next']['header'] & {
-      get$(): Observable<ChromeNextHeaderConfig | undefined>;
-    };
-    aiButton: ChromeStart['next']['aiButton'] & {
-      get$(): Observable<ReactNode | undefined>;
-    };
-    globalSearch: ChromeStart['next']['globalSearch'] & {
-      get$(): Observable<ChromeNextGlobalSearchConfig | undefined>;
-    };
+  next: InternalChromeNext;
+}
+
+/** @internal */
+export interface InternalChromeNext extends ChromeNext {
+  header: ChromeNext['header'] & {
+    get$(): Observable<ChromeNextHeaderConfig | undefined>;
+  };
+  aiButton: ChromeNext['aiButton'] & {
+    get$(): Observable<ChromeNextAiButton[]>;
+  };
+  globalSearch: ChromeNext['globalSearch'] & {
+    get$(): Observable<ChromeNextGlobalSearchConfig | undefined>;
   };
 }
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index d2395dc7b679d..4ae913247582c 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -9,6 +9,7 @@
 
 import React, { type ReactNode } from 'react';
 import { distinctUntilChanged, map, shareReplay } from 'rxjs';
+import type { ChromeNextAiButton } from '@kbn/core-chrome-browser';
 import type { RecentlyAccessedService } from '@kbn/recently-accessed';
 import { SidebarServiceProvider } from '@kbn/core-chrome-sidebar-context';
 import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
@@ -176,8 +177,17 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
         set: services.nextHeader.set,
       },
       aiButton: {
-        get$: () => state.aiButton.$,
-        set: state.aiButton.set,
+        get$: () => state.aiButton.$.pipe(map((buttons) => [...buttons])),
+        register: (button: ChromeNextAiButton) => {
+          state.aiButton.update((prev) => new Set([...prev, button]));
+          return () => {
+            state.aiButton.update((prev) => {
+              const next = new Set(prev);
+              next.delete(button);
+              return next;
+            });
+          };
+        },
       },
       globalSearch: {
         get$: () => state.globalSearch.$,
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index a4188415c0966..5bfd3c98549f1 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -19,6 +19,7 @@ import type {
   ChromeGlobalHelpExtensionMenuLink,
   ChromeHelpExtension,
   ChromeNavLink,
+  ChromeNextAiButton,
   ChromeNextGlobalSearchConfig,
   ChromeUserBanner,
 } from '@kbn/core-chrome-browser';
@@ -65,7 +66,7 @@ export interface ChromeState {
   globalFooter: State<ReactNode>;
   customNavLink: State<ChromeNavLink | undefined>;
   appMenu: State<AppMenuConfig | undefined>;
-  aiButton: State<ReactNode>;
+  aiButton: State<ReadonlySet<ChromeNextAiButton>>;
   globalSearch: State<ChromeNextGlobalSearchConfig | undefined>;
 
   /** Help system */
@@ -110,7 +111,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
 
   // UI Elements (not reset on app change)
   const globalFooter = createState<ReactNode>(null);
-  const aiButton = createState<ReactNode>(undefined);
+  const aiButton = createState<ReadonlySet<ChromeNextAiButton>>(new Set());
   const globalSearch = createState<ChromeNextGlobalSearchConfig | undefined>(undefined);
   const customNavLink = createState<ChromeNavLink | undefined>(undefined);
 
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 125195446c50c..83002c8578240 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -116,8 +116,8 @@ const createStartContractMock = () => {
         }),
       }),
       aiButton: lazyObject({
-        get$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
-        set: jest.fn(),
+        get$: jest.fn().mockReturnValue(new BehaviorSubject([])),
+        register: jest.fn().mockReturnValue(() => {}),
       }),
       globalSearch: lazyObject({
         get$: jest.fn().mockReturnValue(nextGlobalSearchState$),
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index 4aa887a61adc3..a4da1b3fe2bd6 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -55,12 +55,14 @@ export type {
   SidebarAppDefinition,
   SidebarSetup,
   SidebarStart,
+  ChromeNext,
+  ChromeNextAiButton,
+  ChromeNextGlobalSearchConfig,
   ChromeNextHeaderBack,
   ChromeNextHeaderBadge,
+  ChromeNextHeaderCallout,
   ChromeNextHeaderConfig,
-  ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderGlobalActions,
+  ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
-  ChromeNextHeaderCallout,
-  ChromeNextGlobalSearchConfig,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/ai_button.ts b/src/core/packages/chrome/browser/src/chrome_next/ai_button.ts
new file mode 100644
index 0000000000000..1d5f4a1114425
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/chrome_next/ai_button.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ChromeExtensionContent } from '@kbn/core-mount-utils-browser';
+
+/** @public */
+export interface ChromeNextAiButton {
+  content: ChromeExtensionContent;
+}
diff --git a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
new file mode 100644
index 0000000000000..71f71082837b0
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ChromeNextAiButton } from './ai_button';
+import type { ChromeNextGlobalSearchConfig } from './global_search';
+import type { ChromeNextHeaderConfig } from './header';
+
+/**
+ * Chrome-Next APIs: header configuration, AI button slot, global search, and future slots.
+ * @public
+ */
+export interface ChromeNext {
+  header: {
+    /**
+     * Set the Chrome-Next header configuration for the current page.
+     * Chrome renders the title, metadata, global actions, and app menu.
+     *
+     * Pass `undefined` to clear (e.g. on unmount or route change).
+     * Automatically cleared on app change.
+     */
+    set(config?: ChromeNextHeaderConfig): void;
+  };
+  aiButton: {
+    /**
+     * Register an AI button for the Chrome-Next header.
+     * Multiple plugins can register buttons; each owns its own visibility logic.
+     * Chrome renders all registered buttons sorted by `order` in a fixed slot
+     * at the far right of the header.
+     * Returns an unregister callback. Global — persists across app changes.
+     */
+    register(button: ChromeNextAiButton): () => void;
+  };
+  globalSearch: {
+    /**
+     * Set the global search configuration for the Chrome-Next sidenav.
+     * Chrome renders a search icon button in the sidenav header items; clicking it fires `onClick`.
+     * Pass `undefined` to remove the button. Global — persists across app changes.
+     */
+    set(config?: ChromeNextGlobalSearchConfig): void;
+  };
+}
diff --git a/src/core/packages/chrome/browser/src/next_global_search.ts b/src/core/packages/chrome/browser/src/chrome_next/global_search.ts
similarity index 100%
rename from src/core/packages/chrome/browser/src/next_global_search.ts
rename to src/core/packages/chrome/browser/src/chrome_next/global_search.ts
diff --git a/src/core/packages/chrome/browser/src/next_header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
similarity index 100%
rename from src/core/packages/chrome/browser/src/next_header.ts
rename to src/core/packages/chrome/browser/src/chrome_next/header.ts
diff --git a/src/core/packages/chrome/browser/src/chrome_next/index.ts b/src/core/packages/chrome/browser/src/chrome_next/index.ts
new file mode 100644
index 0000000000000..eabbba32385aa
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/chrome_next/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export type { ChromeNextAiButton } from './ai_button';
+export type { ChromeNext } from './chrome_next';
+export type { ChromeNextGlobalSearchConfig } from './global_search';
+export type {
+  ChromeNextHeaderBack,
+  ChromeNextHeaderBadge,
+  ChromeNextHeaderCallout,
+  ChromeNextHeaderConfig,
+  ChromeNextHeaderGlobalActions,
+  ChromeNextHeaderMetadataSlotItem,
+  ChromeNextHeaderTab,
+} from './header';
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index a22be6f9dd22c..0d869c8843a53 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -10,8 +10,7 @@
 import type { ReactNode } from 'react';
 import type { Observable } from 'rxjs';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
-import type { ChromeNextHeaderConfig } from './next_header';
-import type { ChromeNextGlobalSearchConfig } from './next_global_search';
+import type { ChromeNext } from './chrome_next/chrome_next';
 import type { ChromeNavLink, ChromeNavLinks } from './nav_links';
 import type { ChromeRecentlyAccessed } from './recently_accessed';
 import type { ChromeDocTitle } from './doc_title';
@@ -324,38 +323,8 @@ export interface ChromeStart {
    */
   getActiveSolutionNavId(): SolutionId | null;
 
-  /**
-   * Chrome-Next APIs: header configuration, AI button slot, and future slots.
-   */
-  next: {
-    header: {
-      /**
-       * Set the Chrome-Next header configuration for the current page.
-       * Chrome renders the title, metadata, global actions, and app menu.
-       *
-       * Pass `undefined` to clear (e.g. on unmount or route change).
-       * Automatically cleared on app change.
-       */
-      set(config?: ChromeNextHeaderConfig): void;
-    };
-    aiButton: {
-      /**
-       * Set the AI button component for the Chrome-Next header.
-       * The plugin owns the full component (rendering, state, tooltips, shortcuts).
-       * Chrome renders it in a fixed slot at the far right of the header.
-       * Pass `undefined` to remove. Global — persists across app changes.
-       */
-      set(node?: ReactNode): void;
-    };
-    globalSearch: {
-      /**
-       * Set the global search configuration for the Chrome-Next sidenav.
-       * Chrome renders a search icon button in the sidenav header items; clicking it fires `onClick`.
-       * Pass `undefined` to remove the button. Global — persists across app changes.
-       */
-      set(config?: ChromeNextGlobalSearchConfig): void;
-    };
-  };
+  /** {@inheritdoc ChromeNext} */
+  next: ChromeNext;
 
   /**
    * Used only by the rendering service and KibanaRenderingContextProvider to wrap the rendering tree in the Chrome context providers
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index b2e9c452da7a7..8c62dcc0a8ee3 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -61,13 +61,14 @@ export type {
 } from './sidebar';
 
 export type {
+  ChromeNext,
+  ChromeNextAiButton,
+  ChromeNextGlobalSearchConfig,
   ChromeNextHeaderBack,
   ChromeNextHeaderBadge,
+  ChromeNextHeaderCallout,
   ChromeNextHeaderConfig,
-  ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderGlobalActions,
+  ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
-  ChromeNextHeaderCallout,
-} from './next_header';
-
-export type { ChromeNextGlobalSearchConfig } from './next_global_search';
+} from './chrome_next';
diff --git a/src/platform/plugins/shared/ai_assistant_management/selection/public/plugin.tsx b/src/platform/plugins/shared/ai_assistant_management/selection/public/plugin.tsx
index 0ce287c31baeb..d96a61aa1675d 100644
--- a/src/platform/plugins/shared/ai_assistant_management/selection/public/plugin.tsx
+++ b/src/platform/plugins/shared/ai_assistant_management/selection/public/plugin.tsx
@@ -225,30 +225,38 @@ export class AIAssistantManagementPlugin
       isUntouchedUiSetting &&
       (isObservabilityAIAssistantEnabled || isSecurityAIAssistantEnabled || isAiAgentsEnabled)
     ) {
+      const mountAiPicker = (element: HTMLElement) => {
+        ReactDOM.render(
+          coreStart.rendering.addContext(
+            <NavControlInitiator
+              isObservabilityAIAssistantEnabled={isObservabilityAIAssistantEnabled}
+              isSecurityAIAssistantEnabled={isSecurityAIAssistantEnabled}
+              coreStart={coreStart}
+              triggerOpenChat={(selection: AIExperienceSelection) =>
+                openChatSubject.next(selection)
+              }
+              spaces={spaces}
+            />
+          ),
+          element
+        );
+
+        return () => {
+          ReactDOM.unmountComponentAtNode(element);
+        };
+      };
+
       coreStart.chrome.navControls.registerRight({
-        mount: (element) => {
-          ReactDOM.render(
-            coreStart.rendering.addContext(
-              <NavControlInitiator
-                isObservabilityAIAssistantEnabled={isObservabilityAIAssistantEnabled}
-                isSecurityAIAssistantEnabled={isSecurityAIAssistantEnabled}
-                coreStart={coreStart}
-                triggerOpenChat={(selection: AIExperienceSelection) =>
-                  openChatSubject.next(selection)
-                }
-                spaces={spaces}
-              />
-            ),
-            element
-          );
-
-          return () => {
-            ReactDOM.unmountComponentAtNode(element);
-          };
-        },
-        // before the user profile
+        mount: mountAiPicker,
         order: 1001,
       });
+
+      // TODO: Chrome-Next hack — dual registration needed because Chrome Next doesn't render
+      // HeaderNavControls (registerRight mount points). Remove the registerRight call once
+      // Chrome Next is the only chrome. See https://github.com/elastic/kibana/issues/260010
+      coreStart.chrome.next.aiButton.register({
+        content: mountAiPicker,
+      });
     }
   }
 
diff --git a/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx b/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx
index 8501c505b1311..b74a039b19533 100644
--- a/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx
+++ b/x-pack/platform/plugins/shared/agent_builder/public/plugin.tsx
@@ -284,13 +284,18 @@ export class AgentBuilderPlugin
         order: 1001,
       });
 
-      core.chrome.next.aiButton.set(
-        <AgentBuilderNavControlInitiator
-          coreStart={core}
-          pluginsStart={startDependencies}
-          agentBuilderService={agentBuilderService}
-        />
-      );
+      // TODO: Chrome-Next hack — dual registration needed because Chrome Next doesn't render
+      // HeaderNavControls (registerRight mount points). Remove the registerRight call once
+      // Chrome Next is the only chrome. See https://github.com/elastic/kibana/issues/260010
+      core.chrome.next.aiButton.register({
+        content: (
+          <AgentBuilderNavControlInitiator
+            coreStart={core}
+            pluginsStart={startDependencies}
+            agentBuilderService={agentBuilderService}
+          />
+        ),
+      });
     }
 
     return agentBuilderService;
diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/plugin.tsx b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/plugin.tsx
index da25d6da7feb5..c8efa6f0cd4a1 100644
--- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/plugin.tsx
+++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/plugin.tsx
@@ -129,26 +129,34 @@ export class ObservabilityAIAssistantAppPlugin
     const isEnabled = appService.isEnabled();
 
     if (isEnabled) {
+      const mountObsAiAssistant = (element: HTMLElement) => {
+        ReactDOM.render(
+          <NavControlInitiator
+            appService={appService}
+            coreStart={coreStart}
+            pluginsStart={pluginsStart}
+            isServerless={this.isServerless}
+          />,
+          element,
+          () => {}
+        );
+
+        return () => {
+          ReactDOM.unmountComponentAtNode(element);
+        };
+      };
+
       coreStart.chrome.navControls.registerRight({
-        mount: (element) => {
-          ReactDOM.render(
-            <NavControlInitiator
-              appService={appService}
-              coreStart={coreStart}
-              pluginsStart={pluginsStart}
-              isServerless={this.isServerless}
-            />,
-            element,
-            () => {}
-          );
-
-          return () => {
-            ReactDOM.unmountComponentAtNode(element);
-          };
-        },
-        // right before the user profile
+        mount: mountObsAiAssistant,
         order: 1001,
       });
+
+      // TODO: Chrome-Next hack — dual registration needed because Chrome Next doesn't render
+      // HeaderNavControls (registerRight mount points). Remove the registerRight call once
+      // Chrome Next is the only chrome. See https://github.com/elastic/kibana/issues/260010
+      coreStart.chrome.next.aiButton.register({
+        content: mountObsAiAssistant,
+      });
     }
 
     const service = pluginsStart.observabilityAIAssistant.service;
diff --git a/x-pack/solutions/search/plugins/search_assistant/public/plugin.tsx b/x-pack/solutions/search/plugins/search_assistant/public/plugin.tsx
index 2d251fed3994d..5715ddf727ac2 100644
--- a/x-pack/solutions/search/plugins/search_assistant/public/plugin.tsx
+++ b/x-pack/solutions/search/plugins/search_assistant/public/plugin.tsx
@@ -61,26 +61,34 @@ export class SearchAssistantPlugin
       return {};
     }
 
-    coreStart.chrome.navControls.registerRight({
-      mount: (element) => {
-        ReactDOM.render(
-          <NavControlInitiator
-            appService={appService}
-            coreStart={coreStart}
-            pluginsStart={pluginsStart}
-          />,
-          element,
-          () => {}
-        );
+    const mountSearchAssistant = (element: HTMLElement) => {
+      ReactDOM.render(
+        <NavControlInitiator
+          appService={appService}
+          coreStart={coreStart}
+          pluginsStart={pluginsStart}
+        />,
+        element,
+        () => {}
+      );
+
+      return () => {
+        ReactDOM.unmountComponentAtNode(element);
+      };
+    };
 
-        return () => {
-          ReactDOM.unmountComponentAtNode(element);
-        };
-      },
-      // right before the user profile
+    coreStart.chrome.navControls.registerRight({
+      mount: mountSearchAssistant,
       order: 1001,
     });
 
+    // TODO: Chrome-Next hack — dual registration needed because Chrome Next doesn't render
+    // HeaderNavControls (registerRight mount points). Remove the registerRight call once
+    // Chrome Next is the only chrome. See https://github.com/elastic/kibana/issues/260010
+    coreStart.chrome.next.aiButton.register({
+      content: mountSearchAssistant,
+    });
+
     return {};
   }
 
diff --git a/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx b/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx
index d499a13ca3b34..1a3a92de00ed8 100644
--- a/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx
+++ b/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx
@@ -85,6 +85,16 @@ export class ElasticAssistantPublicPlugin
       },
     });
 
+    // TODO: Chrome-Next hack — dual registration needed because Chrome Next doesn't render
+    // HeaderNavControls (registerRight mount points). Remove the registerRight call once
+    // Chrome Next is the only chrome. See https://github.com/elastic/kibana/issues/260010
+    coreStart.chrome.next.aiButton.register({
+      content: (target: HTMLDivElement) => {
+        const startService = startServices();
+        return this.mountAIAssistantButton(target, coreStart, startService);
+      },
+    });
+
     return {};
   }
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx b/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx
index f706e7128ea48..74535ab610cef 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/assistant/provider.tsx
@@ -56,11 +56,7 @@ export const AssistantProvider: FC<PropsWithChildren<unknown>> = ({ children })
   }, [elasticAssistantSharedState.promptContexts, promptContext, promptContexts]);
 
   if (!assistantContextValue) {
-    // TODO: Chrome-Next quick mitigation — was `return null` which blocked the entire route tree.
-    // With Chrome Next, the elastic_assistant nav control never mounts (no HeaderNavControls),
-    // so setAssistantContextValue is never called and this stays undefined.
-    // See https://github.com/elastic/kibana/issues/260010
-    return <>{children}</>;
+    return null;
   }
 
   return (

From b9071c38df58ea90827491b3d3a3b44cc3c754b7 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 2 Apr 2026 17:26:55 +0200
Subject: [PATCH 16/77] [ChromeNext] Add a switch to toggle `chrome-next` in
 devbar (#260952)

## Summary

<img width="1624" height="1056" alt="Screenshot 2026-04-02 at 16 58 32"
src="https://github.com/user-attachments/assets/14716fe5-5550-428c-9b92-86bcd1597827"
/>

Note: it is possible to make it work without a page reload, but I
thought it was not worth the complexity.
---
 .../src/shared/chrome_hooks.ts                |  4 +-
 .../feature-flags/chrome_next_toggle.tsx      | 45 +++++++++++++++++++
 .../packages/chrome/feature-flags/index.ts    | 17 +++++++
 .../developer_toolbar/public/plugin.tsx       |  5 +++
 .../shared/developer_toolbar/tsconfig.json    |  1 +
 5 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx

diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index c0983c11ac22a..a698651d4c304 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -23,7 +23,7 @@ import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
-import { NEXT_CHROME_FEATURE_FLAG_KEY } from '@kbn/core-chrome-feature-flags';
+import { isNextChrome } from '@kbn/core-chrome-feature-flags';
 import { useChromeComponentsDeps } from '../context';
 
 /**
@@ -253,5 +253,5 @@ export function useNextHeader(): ChromeNextHeaderConfig | undefined {
 /** Returns whether the next-chrome experience is enabled via feature flag. */
 export function useIsNextChrome(): boolean {
   const { featureFlags } = useChromeComponentsDeps();
-  return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
+  return isNextChrome(featureFlags);
 }
diff --git a/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx b/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
new file mode 100644
index 0000000000000..ad34f73390274
--- /dev/null
+++ b/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback } from 'react';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import { css } from '@emotion/react';
+import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
+import { isNextChrome, toggleNextChrome } from './index';
+
+const badgeStyles = css`
+  cursor: pointer;
+`;
+
+interface ChromeNextToggleProps {
+  featureFlags: FeatureFlagsStart;
+}
+
+export const ChromeNextToggle: React.FC<ChromeNextToggleProps> = ({ featureFlags }) => {
+  const isEnabled = isNextChrome(featureFlags);
+
+  const onClick = useCallback(() => {
+    toggleNextChrome(featureFlags);
+  }, [featureFlags]);
+
+  return (
+    <EuiToolTip content={`Click to ${isEnabled ? 'disable' : 'enable'} Vibranium chrome. Page will reload.`}>
+      <EuiBadge
+        color={isEnabled ? 'success' : 'danger'}
+        css={badgeStyles}
+        iconType="beaker"
+        iconSide="left"
+        onClick={onClick}
+        onClickAriaLabel="Toggle Vibranium chrome"
+      >
+        Vibranium: {isEnabled ? 'ON' : 'OFF'}
+      </EuiBadge>
+    </EuiToolTip>
+  );
+};
diff --git a/src/core/packages/chrome/feature-flags/index.ts b/src/core/packages/chrome/feature-flags/index.ts
index 79d7bb5546caf..f41114dffc5e6 100644
--- a/src/core/packages/chrome/feature-flags/index.ts
+++ b/src/core/packages/chrome/feature-flags/index.ts
@@ -9,8 +9,25 @@
 
 import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
 
+export { ChromeNextToggle } from './chrome_next_toggle';
+
 export const NEXT_CHROME_FEATURE_FLAG_KEY = 'core.chrome.next';
+export const NEXT_CHROME_SESSION_STORAGE_KEY = 'dev.core.chrome.next';
 
 export const isNextChrome = (featureFlags: FeatureFlagsStart): boolean => {
+  try {
+    const override = sessionStorage.getItem(NEXT_CHROME_SESSION_STORAGE_KEY);
+    if (override !== null) {
+      return override === 'true';
+    }
+  } catch {
+    // sessionStorage may be unavailable
+  }
   return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
 };
+
+export const toggleNextChrome = (featureFlags: FeatureFlagsStart): void => {
+  const next = !isNextChrome(featureFlags);
+  sessionStorage.setItem(NEXT_CHROME_SESSION_STORAGE_KEY, String(next));
+  window.location.reload();
+};
diff --git a/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx b/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx
index bc9d42bc92077..177763590234e 100755
--- a/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx
+++ b/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx
@@ -14,6 +14,8 @@ import type { InternalChromeStart } from '@kbn/core-chrome-browser-internal-type
 
 import { BehaviorSubject } from 'rxjs';
 import type { DeveloperToolbarItemProps } from '@kbn/developer-toolbar';
+import { DeveloperToolbarItem } from '@kbn/developer-toolbar';
+import { ChromeNextToggle } from '@kbn/core-chrome-feature-flags';
 
 export type UnregisterItemFn = () => void;
 export interface DeveloperToolbarItemRegistry {
@@ -41,6 +43,9 @@ export class DeveloperToolbarPlugin
     (core.chrome as InternalChromeStart).setGlobalFooter(
       <Suspense>
         <LazyToolbar items$={this.items$} envInfo={this.context.env} />
+        <DeveloperToolbarItem id="chromeNext">
+          <ChromeNextToggle featureFlags={core.featureFlags} />
+        </DeveloperToolbarItem>
       </Suspense>
     );
 
diff --git a/src/platform/plugins/shared/developer_toolbar/tsconfig.json b/src/platform/plugins/shared/developer_toolbar/tsconfig.json
index 3c44c549d013c..4ef9285bdf4b7 100644
--- a/src/platform/plugins/shared/developer_toolbar/tsconfig.json
+++ b/src/platform/plugins/shared/developer_toolbar/tsconfig.json
@@ -12,5 +12,6 @@
     "@kbn/core-chrome-layout-components",
     "@kbn/config-schema",
     "@kbn/core-chrome-browser-internal-types",
+    "@kbn/core-chrome-feature-flags",
   ]
 }

From bffcd58c24cd83238fdabedee7a3f93ede3eedd7 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 7 Apr 2026 12:50:43 +0200
Subject: [PATCH 17/77] fix types

---
 .../packages/chrome/feature-flags/chrome_next_toggle.tsx    | 2 +-
 src/core/packages/chrome/feature-flags/index.ts             | 6 ++++--
 src/platform/plugins/shared/dashboard/moon.yml              | 2 +-
 src/platform/plugins/shared/developer_toolbar/moon.yml      | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx b/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
index ad34f73390274..009e643d2fcb8 100644
--- a/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
+++ b/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
@@ -18,7 +18,7 @@ const badgeStyles = css`
 `;
 
 interface ChromeNextToggleProps {
-  featureFlags: FeatureFlagsStart;
+  featureFlags: Pick<FeatureFlagsStart, 'getBooleanValue'>;
 }
 
 export const ChromeNextToggle: React.FC<ChromeNextToggleProps> = ({ featureFlags }) => {
diff --git a/src/core/packages/chrome/feature-flags/index.ts b/src/core/packages/chrome/feature-flags/index.ts
index f41114dffc5e6..fe4fbb3f5dc36 100644
--- a/src/core/packages/chrome/feature-flags/index.ts
+++ b/src/core/packages/chrome/feature-flags/index.ts
@@ -14,7 +14,9 @@ export { ChromeNextToggle } from './chrome_next_toggle';
 export const NEXT_CHROME_FEATURE_FLAG_KEY = 'core.chrome.next';
 export const NEXT_CHROME_SESSION_STORAGE_KEY = 'dev.core.chrome.next';
 
-export const isNextChrome = (featureFlags: FeatureFlagsStart): boolean => {
+type FeatureFlagsBooleanReader = Pick<FeatureFlagsStart, 'getBooleanValue'>;
+
+export const isNextChrome = (featureFlags: FeatureFlagsBooleanReader): boolean => {
   try {
     const override = sessionStorage.getItem(NEXT_CHROME_SESSION_STORAGE_KEY);
     if (override !== null) {
@@ -26,7 +28,7 @@ export const isNextChrome = (featureFlags: FeatureFlagsStart): boolean => {
   return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
 };
 
-export const toggleNextChrome = (featureFlags: FeatureFlagsStart): void => {
+export const toggleNextChrome = (featureFlags: FeatureFlagsBooleanReader): void => {
   const next = !isNextChrome(featureFlags);
   sessionStorage.setItem(NEXT_CHROME_SESSION_STORAGE_KEY, String(next));
   window.location.reload();
diff --git a/src/platform/plugins/shared/dashboard/moon.yml b/src/platform/plugins/shared/dashboard/moon.yml
index bd3d3e9eb852e..ad0fa3a194f70 100644
--- a/src/platform/plugins/shared/dashboard/moon.yml
+++ b/src/platform/plugins/shared/dashboard/moon.yml
@@ -122,10 +122,10 @@ dependsOn:
   - '@kbn/monaco'
   - '@kbn/code-editor'
   - '@kbn/as-code-shared-schemas'
-  - '@kbn/core-chrome-browser'
   - '@kbn/core-http-common'
   - '@kbn/core-http-server-mocks'
   - '@kbn/core-http-browser'
+  - '@kbn/core-chrome-browser'
 tags:
   - plugin
   - prod
diff --git a/src/platform/plugins/shared/developer_toolbar/moon.yml b/src/platform/plugins/shared/developer_toolbar/moon.yml
index 8aeaace0d2fd0..14c1eac8975c2 100644
--- a/src/platform/plugins/shared/developer_toolbar/moon.yml
+++ b/src/platform/plugins/shared/developer_toolbar/moon.yml
@@ -23,6 +23,7 @@ dependsOn:
   - '@kbn/core-chrome-layout-components'
   - '@kbn/config-schema'
   - '@kbn/core-chrome-browser-internal-types'
+  - '@kbn/core-chrome-feature-flags'
 tags:
   - plugin
   - prod

From 77218bee4fdd424875969653e6f352f5a77d9551 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 7 Apr 2026 15:46:40 +0200
Subject: [PATCH 18/77] [Chrome Next] Sidenav: renderContent, renderPopover,
 and customContent for ToolItem (#261525)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Extend the sidenav navigation component's `ToolItem` type to support
custom rendering:

- `renderContent` — custom trigger content (e.g. avatar, space badge)
instead of an icon
- `renderPopover` — custom popover body, taking precedence over
`sections`
- `customContent` on `Popover` — delegates keyboard navigation to
children when true
- `anchorPosition` on `Popover` — configurable popover anchor direction
- `iconType` is now optional when `renderContent` is provided


**These are needed to support (following PR)**
 - Custom icon/badge for user avatar to display user menu
 - Custom popover for space selector

Includes a storybook story demonstrating avatar and space badge tool
items.

<img width="430" height="643" alt="Screenshot 2026-04-07 at 13 10 23"
src="https://github.com/user-attachments/assets/844428b0-7210-460d-ab27-98befcb9d5f2"
/>

<img width="416" height="640" alt="Screenshot 2026-04-07 at 13 10 17"
src="https://github.com/user-attachments/assets/df27e2bf-71d0-449a-b420-9267b0835c5e"
/>
---
 .../feature-flags/chrome_next_toggle.tsx      |   6 +-
 .../packaging/react/type_validation.ts        |  42 +++-
 .../navigation/packaging/react/types.ts       |   7 +-
 .../src/__stories__/navigation.stories.tsx    | 181 +++++++++++++++++-
 .../src/components/icon_button/index.tsx      | 126 +++++++++---
 .../navigation/src/components/navigation.tsx  |  30 ++-
 .../src/components/side_nav/popover.tsx       |  57 ++++--
 .../src/components/tool_item/index.tsx        |  19 +-
 .../navigation/src/utils/get_has_submenu.ts   |   7 +-
 src/core/packages/chrome/navigation/types.ts  |  14 +-
 10 files changed, 412 insertions(+), 77 deletions(-)

diff --git a/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx b/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
index 009e643d2fcb8..cef138ec73a95 100644
--- a/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
+++ b/src/core/packages/chrome/feature-flags/chrome_next_toggle.tsx
@@ -11,7 +11,7 @@ import React, { useCallback } from 'react';
 import { EuiBadge, EuiToolTip } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
-import { isNextChrome, toggleNextChrome } from './index';
+import { isNextChrome, toggleNextChrome } from '.';
 
 const badgeStyles = css`
   cursor: pointer;
@@ -29,7 +29,9 @@ export const ChromeNextToggle: React.FC<ChromeNextToggleProps> = ({ featureFlags
   }, [featureFlags]);
 
   return (
-    <EuiToolTip content={`Click to ${isEnabled ? 'disable' : 'enable'} Vibranium chrome. Page will reload.`}>
+    <EuiToolTip
+      content={`Click to ${isEnabled ? 'disable' : 'enable'} Vibranium chrome. Page will reload.`}
+    >
       <EuiBadge
         color={isEnabled ? 'success' : 'danger'}
         css={badgeStyles}
diff --git a/src/core/packages/chrome/navigation/packaging/react/type_validation.ts b/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
index 828bb8da49319..199416bbf5a9c 100644
--- a/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
@@ -64,7 +64,16 @@ const _secondaryMenuSection: PackagedSecondaryMenuSection = {} as SourceSecondar
 const _sideNavLogo: PackagedSideNavLogo = {} as SourceSideNavLogo;
 
 type NormalizedSourceMenuItem = Omit<SourceMenuItem, 'iconType'> & { iconType: string };
-type NormalizedSourceToolItem = Omit<SourceToolItem, 'iconType'> & { iconType: string };
+
+type ToolItemStrippedFields = 'iconType' | 'renderContent' | 'renderPopover';
+
+type NormalizedSourceToolItem = Omit<SourceToolItem, ToolItemStrippedFields> & {
+  iconType?: string;
+};
+type NormalizedPackagedToolItem = Omit<PackagedToolItem, ToolItemStrippedFields> & {
+  iconType?: string;
+};
+
 type NormalizedSourceNavigationStructure = Omit<
   SourceNavigationStructure,
   'footerItems' | 'primaryItems'
@@ -76,10 +85,27 @@ type NormalizedSourceToolSlots = Omit<SourceToolSlots, 'headerTools' | 'footerTo
   headerTools?: NormalizedSourceToolItem[];
   footerTools?: NormalizedSourceToolItem[];
 };
+type NormalizedPackagedToolSlots = Omit<PackagedToolSlots, 'headerTools' | 'footerTools'> & {
+  headerTools?: NormalizedPackagedToolItem[];
+  footerTools?: NormalizedPackagedToolItem[];
+};
 
 const _menuItem: PackagedMenuItem = {} as NormalizedSourceMenuItem;
-const _toolItem: PackagedToolItem = {} as NormalizedSourceToolItem;
-const _toolSlots: PackagedToolSlots = {} as NormalizedSourceToolSlots;
+const _toolItemForward: NormalizedPackagedToolItem = {} as NormalizedSourceToolItem;
+const _toolItemReverse: NormalizedSourceToolItem = {} as NormalizedPackagedToolItem;
+
+type SourceRenderContentParam = Parameters<NonNullable<SourceToolItem['renderContent']>>[0];
+type PackagedRenderContentParam = Parameters<NonNullable<PackagedToolItem['renderContent']>>[0];
+const _renderContentParamForward: PackagedRenderContentParam = {} as SourceRenderContentParam;
+const _renderContentParamReverse: SourceRenderContentParam = {} as PackagedRenderContentParam;
+
+type SourceRenderPopoverParam = Parameters<NonNullable<SourceToolItem['renderPopover']>>[0];
+type PackagedRenderPopoverParam = Parameters<NonNullable<PackagedToolItem['renderPopover']>>[0];
+const _renderPopoverParamForward: PackagedRenderPopoverParam = {} as SourceRenderPopoverParam;
+const _renderPopoverParamReverse: SourceRenderPopoverParam = {} as PackagedRenderPopoverParam;
+
+const _toolSlotsForward: NormalizedPackagedToolSlots = {} as NormalizedSourceToolSlots;
+const _toolSlotsReverse: NormalizedSourceToolSlots = {} as NormalizedPackagedToolSlots;
 const _navigationStructure: PackagedNavigationStructure = {} as NormalizedSourceNavigationStructure;
 
 // `NavigationProps` validation — suppressed because `MenuItem.iconType` is
@@ -92,8 +118,14 @@ void _secondaryMenuItem;
 void _secondaryMenuSection;
 void _sideNavLogo;
 void _menuItem;
-void _toolItem;
-void _toolSlots;
+void _toolItemForward;
+void _toolItemReverse;
+void _renderContentParamForward;
+void _renderContentParamReverse;
+void _renderPopoverParamForward;
+void _renderPopoverParamReverse;
+void _toolSlotsForward;
+void _toolSlotsReverse;
 void _navigationStructure;
 void _navigationProps;
 
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index 9a14c8ef9bd86..aaf5f25135c4e 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -76,11 +76,16 @@ export interface MenuItem {
 
 /**
  * A chrome tool control (search, help, etc.) — not a primary navigation destination.
+ *
+ * At least one of `iconType` or `renderContent` must be provided.
+ * When `renderPopover` is present, it takes precedence over `sections`.
  */
 export interface ToolItem {
   id: string;
   label: string;
-  iconType: string;
+  iconType?: string;
+  renderContent?: (state: { isCollapsed: boolean }) => ReactNode;
+  renderPopover?: (closePopover: () => void) => ReactNode;
   onClick?: () => void;
   sections?: SecondaryMenuSection[];
   badgeType?: BadgeType;
diff --git a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
index 5f7cf0a5b5adb..443191998a685 100644
--- a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
+++ b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
@@ -9,7 +9,16 @@
 
 import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
-import { EuiSkipLink, useEuiTheme } from '@elastic/eui';
+import {
+  EuiAvatar,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiLink,
+  EuiSkipLink,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
 import type { UseEuiTheme } from '@elastic/eui';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { APP_MAIN_SCROLL_CONTAINER_ID } from '@kbn/core-chrome-layout-constants';
@@ -78,6 +87,151 @@ const CHROME_TOOLS: NonNullable<PropsAndArgs['tools']> = {
   ],
 };
 
+const SpaceBadge = () => (
+  <span
+    css={css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
+      background-color: #f04e98;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      line-height: 1;
+    `}
+  >
+    D
+  </span>
+);
+
+const SPACES = [
+  { id: 'default', name: 'Default', color: '#f04e98', initial: 'D' },
+  { id: 'marketing', name: 'Marketing', color: '#00bfb3', initial: 'M' },
+  { id: 'engineering', name: 'Engineering', color: '#6092c0', initial: 'E' },
+  { id: 'sales', name: 'Sales', color: '#d6bf57', initial: 'S' },
+];
+
+const SpacePicker = ({ closePopover }: { closePopover: () => void }) => (
+  <EuiFlexGroup
+    direction="column"
+    gutterSize="none"
+    css={css`
+      padding: 12px;
+    `}
+  >
+    <EuiFlexItem>
+      <EuiText
+        size="xs"
+        css={css`
+          font-weight: 600;
+          margin-bottom: 8px;
+        `}
+      >
+        <p>Spaces</p>
+      </EuiText>
+    </EuiFlexItem>
+    {SPACES.map((space) => (
+      <EuiFlexItem key={space.id}>
+        <button
+          type="button"
+          onClick={closePopover}
+          css={css`
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 4px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            width: 100%;
+            border-radius: 4px;
+            &:hover {
+              background: rgba(0, 0, 0, 0.05);
+            }
+          `}
+        >
+          <span
+            css={css`
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              width: 18px;
+              height: 18px;
+              border-radius: 3px;
+              background-color: ${space.color};
+              color: #fff;
+              font-size: 10px;
+              font-weight: 700;
+              flex-shrink: 0;
+            `}
+          >
+            {space.initial}
+          </span>
+          <EuiText size="s">{space.name}</EuiText>
+        </button>
+      </EuiFlexItem>
+    ))}
+    <EuiFlexItem>
+      <EuiHorizontalRule margin="s" />
+      <EuiLink
+        href="/spaces"
+        onClick={(e) => {
+          e.preventDefault();
+          closePopover();
+        }}
+      >
+        <EuiText size="xs">Manage spaces</EuiText>
+      </EuiLink>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+const CUSTOM_TOOLS: NonNullable<PropsAndArgs['tools']> = {
+  headerTools: [
+    {
+      id: 'spaces',
+      label: 'Current space',
+      renderContent: () => <SpaceBadge />,
+      renderPopover: (closePopover) => <SpacePicker closePopover={closePopover} />,
+    },
+    { id: 'search', label: 'Search', iconType: 'search', onClick: () => {} },
+  ],
+  footerTools: [
+    {
+      id: 'help',
+      label: 'Help',
+      iconType: 'question',
+      sections: [
+        {
+          id: 'help-links',
+          items: [{ id: 'docs', label: 'Documentation', href: '/docs' }],
+        },
+      ],
+    },
+    {
+      id: 'user',
+      label: 'Jane Doe',
+      renderContent: () => <EuiAvatar size="s" name="Jane Doe" />,
+      sections: [
+        {
+          id: 'account',
+          items: [
+            { id: 'profile', label: 'Profile', href: '/profile' },
+            { id: 'preferences', label: 'Preferences', href: '/preferences' },
+          ],
+        },
+        {
+          id: 'session',
+          items: [{ id: 'logout', label: 'Log out', href: '/logout' }],
+        },
+      ],
+    },
+  ],
+};
+
 const PreventLinkNavigation = (Story: StoryFn) => {
   usePreventLinkNavigation();
 
@@ -210,6 +364,31 @@ export const WithManyItems: StoryObj<PropsAndArgs> = {
   render: (args) => <ControlledNavigation {...args} />,
 };
 
+export const WithCustomToolItems: StoryObj<PropsAndArgs> = {
+  name: 'With custom tool items (avatar & space badge)',
+  decorators: [
+    (Story) => {
+      return (
+        <>
+          <Global styles={styles} />
+          <Story />
+        </>
+      );
+    },
+  ],
+  args: {
+    tools: CUSTOM_TOOLS,
+    logo: {
+      id: 'observability',
+      href: LOGO.href,
+      label: LOGO.label,
+      iconType: LOGO.iconType,
+      hideLabel: true,
+    },
+  },
+  render: (args) => <ControlledNavigation {...args} />,
+};
+
 export const WithinLayout: StoryObj<PropsAndArgs> = {
   name: 'Navigation within Layout',
   render: (args) => <Layout {...args} />,
diff --git a/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx b/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
index a2ca9fae5a477..505bd734c1750 100644
--- a/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { Suspense, forwardRef } from 'react';
-import type { KeyboardEvent, ComponentProps, Ref } from 'react';
+import type { KeyboardEvent, ReactNode, ComponentProps, Ref } from 'react';
 import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import type { EuiButtonIconProps, IconType } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -24,17 +24,33 @@ export interface IconButtonProps
   extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'> {
   badgeType?: BadgeType;
   hasContent?: boolean;
-  iconType: IconType;
+  iconType?: IconType;
+  isCollapsed?: boolean;
   isCurrent?: boolean;
   isHighlighted: boolean;
   isNew: boolean;
   label: string;
   onClick?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
+  renderContent?: (state: { isCollapsed: boolean }) => ReactNode;
 }
 
 export const IconButton = forwardRef<HTMLElement, IconButtonProps>(
-  ({ badgeType, hasContent, iconType, isCurrent, isHighlighted, isNew, label, ...props }, ref) => {
+  (
+    {
+      badgeType,
+      hasContent,
+      iconType,
+      isCollapsed,
+      isCurrent,
+      isHighlighted,
+      isNew,
+      label,
+      renderContent,
+      ...props
+    },
+    ref
+  ) => {
     const buttonRef = ref as Ref<HTMLButtonElement>;
     const { euiTheme } = useEuiTheme();
     const { tooltipRef, handleMouseOut } = useTooltip();
@@ -58,31 +74,87 @@ export const IconButton = forwardRef<HTMLElement, IconButtonProps>(
       display: inline-flex;
     `;
 
-    const buttonProps: ComponentProps<typeof EuiButtonIcon> & {
-      'data-highlighted': string;
-      'data-menu-item': string;
-    } = {
-      'aria-current': isCurrent ? 'page' : undefined,
-      'aria-label': label,
-      buttonRef,
-      color: isHighlighted ? 'primary' : 'text',
-      'data-highlighted': isHighlighted ? 'true' : 'false',
-      'data-menu-item': 'true',
-      display: isHighlighted ? 'base' : 'empty',
-      iconType: 'empty',
-      size: 's',
-      css: buttonStyles,
-      ...props,
-    };
+    let item: JSX.Element;
 
-    const item = (
-      <div css={buttonWrapperStyles}>
-        <Suspense fallback={<EuiButtonIcon {...buttonProps} />}>
-          <EuiButtonIcon {...buttonProps} iconType={iconType || 'empty'} />
-        </Suspense>
-        {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
-      </div>
-    );
+    if (renderContent) {
+      const shellStyles = css`
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: ${euiTheme.size.xl};
+        width: ${euiTheme.size.xl};
+        border: none;
+        border-radius: ${euiTheme.border.radius.small};
+        background: ${isHighlighted ? euiTheme.colors.backgroundBasePrimary : 'transparent'};
+        cursor: pointer;
+        padding: 0;
+        color: ${isHighlighted ? euiTheme.colors.textPrimary : euiTheme.colors.textParagraph};
+        position: relative;
+        overflow: hidden;
+        &:hover::before {
+          content: '';
+          position: absolute;
+          z-index: 0;
+          inset: 0;
+          background-color: ${euiTheme.components.buttons.backgroundEmptyTextHover};
+          pointer-events: none;
+        }
+        &:active::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: ${euiTheme.components.buttons.backgroundEmptyTextActive};
+        }
+        &:focus-visible {
+          outline: ${euiTheme.focus.width} solid ${euiTheme.focus.color};
+          outline-offset: 2px;
+        }
+      `;
+
+      item = (
+        <div css={buttonWrapperStyles}>
+          <button
+            ref={buttonRef}
+            type="button"
+            aria-current={isCurrent ? 'page' : undefined}
+            aria-label={label}
+            css={[shellStyles, buttonStyles]}
+            data-highlighted={isHighlighted ? 'true' : 'false'}
+            data-menu-item="true"
+            {...props}
+          >
+            {renderContent({ isCollapsed: !!isCollapsed })}
+          </button>
+          {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
+        </div>
+      );
+    } else {
+      const euiButtonProps: ComponentProps<typeof EuiButtonIcon> & {
+        'data-highlighted': string;
+        'data-menu-item': string;
+      } = {
+        'aria-current': isCurrent ? 'page' : undefined,
+        'aria-label': label,
+        buttonRef,
+        color: isHighlighted ? 'primary' : 'text',
+        'data-highlighted': isHighlighted ? 'true' : 'false',
+        'data-menu-item': 'true',
+        display: isHighlighted ? 'base' : 'empty',
+        iconType: 'empty',
+        size: 's',
+        css: buttonStyles,
+        ...props,
+      };
+
+      item = (
+        <div css={buttonWrapperStyles}>
+          <Suspense fallback={<EuiButtonIcon {...euiButtonProps} />}>
+            <EuiButtonIcon {...euiButtonProps} iconType={iconType || 'empty'} />
+          </Suspense>
+          {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
+        </div>
+      );
+    }
 
     if (!hasContent) {
       const tooltipStyles = css`
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index c0c56fec98be6..c8182b7c88012 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -189,9 +189,11 @@ export const Navigation = ({
           {hasHeaderTools && (
             <SideNav.HeaderToolbar>
               {renderToolItems({
+                anchorPosition: 'rightDown',
                 items: headerTools,
                 itemComponent: SideNav.HeaderToolbar.Item,
                 isAnyPopoverLocked,
+                isCollapsed,
                 popoverItemPrefix: popoverHeaderToolPrefix,
               })}
             </SideNav.HeaderToolbar>
@@ -247,7 +249,7 @@ export const Navigation = ({
                                 const isFirstSubItem =
                                   sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
                                 const subItemAriaDescribedBy = isFirstSubItem
-                                  ? ids?.popoverNavigationInstructionsId
+                                  ? ids.popoverNavigationInstructionsId
                                   : undefined;
                                 return (
                                   <SideNav.SecondaryMenu.Item
@@ -426,9 +428,11 @@ export const Navigation = ({
           <SideNav.FooterToolbar isCollapsed={isCollapsed}>
             {hasFooterTools &&
               renderToolItems({
+                anchorPosition: 'rightUp',
                 items: footerTools,
                 itemComponent: SideNav.FooterToolbar.Item,
                 isAnyPopoverLocked,
+                isCollapsed,
                 popoverItemPrefix: popoverFooterToolPrefix,
               })}
             {collapseToggle && (
@@ -558,7 +562,7 @@ const renderFooterNavItems = ({
                     const isFirstSubItem =
                       sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
                     const subItemAriaDescribedBy = isFirstSubItem
-                      ? ids?.popoverNavigationInstructionsId
+                      ? ids.popoverNavigationInstructionsId
                       : undefined;
 
                     return (
@@ -591,25 +595,31 @@ const renderFooterNavItems = ({
   });
 
 interface RenderToolItemsArgs {
+  anchorPosition?: 'rightUp' | 'rightDown';
   isAnyPopoverLocked: boolean;
+  isCollapsed: boolean;
   itemComponent: ForwardRefExoticComponent<ToolItemProps & RefAttributes<HTMLButtonElement>>;
   items: ToolItem[];
   popoverItemPrefix: string;
 }
 
 const renderToolItems = ({
+  anchorPosition,
   isAnyPopoverLocked,
+  isCollapsed,
   itemComponent: ItemComponent,
   items,
   popoverItemPrefix,
 }: RenderToolItemsArgs) =>
   items.map((item) => {
-    const { onClick: itemOnClick, sections, ...itemProps } = item;
-
+    const { onClick: itemOnClick, sections, renderContent, renderPopover, ...itemProps } = item;
+    const hasPopoverContent = getHasSubmenu(item);
     return (
       <SideNav.Popover
         key={item.id}
-        hasContent={getHasSubmenu(item)}
+        anchorPosition={anchorPosition}
+        customContent={!!renderPopover}
+        hasContent={hasPopoverContent}
         isSidePanelOpen={false}
         isAnyPopoverLocked={isAnyPopoverLocked}
         label={item.label}
@@ -618,7 +628,9 @@ const renderToolItems = ({
           <ItemComponent
             isHighlighted={false}
             isNew={false}
-            hasContent={getHasSubmenu(item)}
+            isCollapsed={isCollapsed}
+            hasContent={hasPopoverContent}
+            renderContent={renderContent}
             onClick={() => {
               itemOnClick?.();
             }}
@@ -627,6 +639,10 @@ const renderToolItems = ({
         }
       >
         {(closePopover, ids) => {
+          if (renderPopover) {
+            return renderPopover(closePopover);
+          }
+
           const firstNonEmptySectionIndex = sections?.findIndex(
             (section) => section.items.length > 0
           );
@@ -638,7 +654,7 @@ const renderToolItems = ({
                     const isFirstSubItem =
                       sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
                     const subItemAriaDescribedBy = isFirstSubItem
-                      ? ids?.popoverNavigationInstructionsId
+                      ? ids.popoverNavigationInstructionsId
                       : undefined;
 
                     return (
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
index 6336aad9c982b..10e00e24e1b1a 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
@@ -39,16 +39,23 @@ import { useHoverTimeout } from '../../hooks/use_hover_timeout';
 import { useScroll } from '../../hooks/use_scroll';
 
 export interface PopoverIds {
-  popoverNavigationInstructionsId: string;
+  popoverNavigationInstructionsId: string | undefined;
 }
 
 export type PopoverChildren =
   | ReactNode
-  | ((closePopover: () => void, ids?: PopoverIds) => ReactNode);
+  | ((closePopover: () => void, ids: PopoverIds) => ReactNode);
 
 export interface PopoverProps {
+  anchorPosition?: 'rightUp' | 'rightDown';
   children?: PopoverChildren;
   container?: HTMLElement;
+  /**
+   * When `true`, the popover delegates keyboard navigation and focus
+   * management to its children (e.g. EuiSelectable). Only Escape is
+   * handled by the popover itself.
+   */
+  customContent?: boolean;
   hasContent: boolean;
   isSidePanelOpen: boolean;
   isAnyPopoverLocked?: boolean;
@@ -75,8 +82,10 @@ export interface PopoverProps {
  *   - Escape to move focus back to the trigger.
  */
 export const Popover = ({
+  anchorPosition: anchorPositionProp,
   children,
   container,
+  customContent = false,
   hasContent,
   isSidePanelOpen,
   isAnyPopoverLocked = false,
@@ -192,6 +201,10 @@ export const Popover = ({
         return;
       }
 
+      if (customContent) {
+        return;
+      }
+
       if (e.key === 'Tab') {
         e.preventDefault();
         handleClose();
@@ -201,7 +214,7 @@ export const Popover = ({
 
       handleRovingIndex(e);
     },
-    [handleClose]
+    [customContent, handleClose]
   );
 
   const handleBlur: FocusEventHandler = useCallback(
@@ -293,7 +306,7 @@ export const Popover = ({
       )}
       <EuiPopover
         aria-label={label}
-        anchorPosition="rightUp"
+        anchorPosition={anchorPositionProp ?? 'rightUp'}
         buffer={[TOP_BAR_HEIGHT + TOP_BAR_POPOVER_GAP, 0, BOTTOM_POPOVER_GAP, POPOVER_OFFSET]}
         button={enhancedTrigger}
         closePopover={handleClose}
@@ -315,8 +328,10 @@ export const Popover = ({
             popoverRef.current = ref;
 
             if (ref) {
-              const elements = getFocusableElements(ref);
-              updateTabIndices(elements);
+              if (!customContent) {
+                const elements = getFocusableElements(ref);
+                updateTabIndices(elements);
+              }
 
               if (shouldFocusOnOpen) {
                 focusFirstElement(popoverRef);
@@ -327,19 +342,25 @@ export const Popover = ({
           onKeyDown={handlePopoverKeyDown}
           css={popoverContentStyles}
         >
-          <EuiScreenReaderOnly>
-            <p id={popoverNavigationInstructionsId}>
-              {i18n.translate('core.ui.chrome.sideNavigation.popoverNavigationInstructions', {
-                defaultMessage:
-                  'You are in the {label} secondary menu dialog. Use Up and Down arrow keys to navigate the menu. Press Escape to exit to the menu trigger.',
-                values: {
-                  label,
-                },
-              })}
-            </p>
-          </EuiScreenReaderOnly>
+          {!customContent && (
+            <EuiScreenReaderOnly>
+              <p id={popoverNavigationInstructionsId}>
+                {i18n.translate('core.ui.chrome.sideNavigation.popoverNavigationInstructions', {
+                  defaultMessage:
+                    'You are in the {label} secondary menu dialog. Use Up and Down arrow keys to navigate the menu. Press Escape to exit to the menu trigger.',
+                  values: {
+                    label,
+                  },
+                })}
+              </p>
+            </EuiScreenReaderOnly>
+          )}
           {typeof children === 'function'
-            ? children(handleClose, { popoverNavigationInstructionsId })
+            ? children(handleClose, {
+                popoverNavigationInstructionsId: customContent
+                  ? undefined
+                  : popoverNavigationInstructionsId,
+              })
             : children}
         </div>
       </EuiPopover>
diff --git a/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx b/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
index ec4b27dbf0a21..93cc6bd881079 100644
--- a/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
@@ -17,20 +17,19 @@ import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
 
 export interface ToolItemProps
   extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'>,
-    Omit<ToolItemData, 'sections'> {
+    Omit<ToolItemData, 'sections' | 'renderPopover'> {
   hasContent?: boolean;
+  isCollapsed?: boolean;
   isHighlighted: boolean;
   isNew: boolean;
   onClick?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
 }
 
-export const ToolItem = forwardRef<HTMLButtonElement, ToolItemProps>(
-  ({ id, ...props }, ref) => (
-    <IconButton
-      ref={ref as Ref<HTMLElement>}
-      data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-toolItem-${id}`}
-      {...props}
-    />
-  )
-);
+export const ToolItem = forwardRef<HTMLButtonElement, ToolItemProps>(({ id, ...props }, ref) => (
+  <IconButton
+    ref={ref as Ref<HTMLElement>}
+    data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-toolItem-${id}`}
+    {...props}
+  />
+));
diff --git a/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts b/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
index 70ac2e41938ec..ccceda286ab06 100644
--- a/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
+++ b/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
@@ -13,6 +13,9 @@
  * @param item - the menu item to check.
  * @returns `true` if the menu item has a submenu, `false` otherwise.
  */
-export const getHasSubmenu = (item: { sections?: ReadonlyArray<unknown> }): boolean => {
-  return !!item.sections && item.sections.length > 0;
+export const getHasSubmenu = (item: {
+  sections?: ReadonlyArray<unknown>;
+  renderPopover?: unknown;
+}): boolean => {
+  return (!!item.sections && item.sections.length > 0) || !!item.renderPopover;
 };
diff --git a/src/core/packages/chrome/navigation/types.ts b/src/core/packages/chrome/navigation/types.ts
index 690fd4f73f9b5..b74f35aa80db5 100644
--- a/src/core/packages/chrome/navigation/types.ts
+++ b/src/core/packages/chrome/navigation/types.ts
@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { ReactNode } from 'react';
 import type { IconType } from '@elastic/eui';
 
 export type BadgeType = 'beta' | 'techPreview' | 'new';
@@ -99,15 +100,20 @@ export interface MenuItem {
 /**
  * A chrome tool control (search, help, profile, etc.) — not a navigation destination.
  * Tool items can perform an action via `onClick` or expose submenu content via `sections`.
+ *
+ * At least one of `iconType` or `renderContent` must be provided.
+ * When both are present, `renderContent` takes precedence for the trigger visual.
+ *
+ * When `renderPopover` is present, it takes precedence over `sections` for the
+ * popover body content. They are not combined.
  */
 export interface ToolItem {
   id: string;
   label: string;
-  iconType: IconType;
+  iconType?: IconType;
+  renderContent?: (state: { isCollapsed: boolean }) => ReactNode;
+  renderPopover?: (closePopover: () => void) => ReactNode;
   onClick?: () => void;
-  /**
-   * Optional submenu content shown for the tool control.
-   */
   sections?: SecondaryMenuSection[];
   badgeType?: BadgeType;
   'data-test-subj'?: string;

From dcf13a50e84cfc8737cc1438ef97bff8f4e68c8b Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 8 Apr 2026 11:16:05 +0200
Subject: [PATCH 19/77] [FeatureBranch/DoNotReview][Chrome Next] Add a user
 menu and space selector to the sidenav (#261572)

## Summary

Wire the user menu and space selector into the Chrome-Next sidenav via
new `chrome.next.userMenu` and `chrome.next.spaceSelector` APIs.

- Security plugin provides user avatar, profile link, custom menu links,
and logout via `chrome.next.userMenu`
- Spaces plugin provides space avatar and selector popover via
`chrome.next.spaceSelector`
- Add `popoverWidth` to `ToolItem` so custom popovers can override the
default 248px width (space selector uses 360px)


<img width="513" height="342" alt="Screenshot 2026-04-07 at 16 00 57"
src="https://github.com/user-attachments/assets/d9d9c823-95fb-460d-b833-5753e057a87e"
/>

<img width="350" height="216" alt="Screenshot 2026-04-07 at 16 01 01"
src="https://github.com/user-attachments/assets/a6001e0f-32dc-4b65-8581-c9ccc77650d1"
/>
---
 packages/kbn-optimizer/limits.yml             |  2 +-
 .../project/sidenav/navigation/navigation.tsx | 11 ++-
 .../navigation/to_chrome_tool_slots.ts        | 94 +++++++++++++++---
 .../src/shared/header_help_menu.tsx           |  3 -
 .../chrome/browser-internal-types/index.ts    |  8 ++
 .../browser-internal/src/chrome_api.tsx       |  8 ++
 .../src/state/chrome_state.ts                 |  8 ++
 .../browser-mocks/src/chrome_service.mock.ts  | 18 ++++
 src/core/packages/chrome/browser/index.ts     |  3 +
 .../browser/src/chrome_next/chrome_next.ts    | 20 +++-
 .../chrome/browser/src/chrome_next/index.ts   |  2 +
 .../browser/src/chrome_next/space_selector.ts | 16 +++
 .../browser/src/chrome_next/user_menu.ts      | 24 +++++
 src/core/packages/chrome/browser/src/index.ts |  3 +
 .../navigation/packaging/react/types.ts       |  1 +
 .../src/__stories__/navigation.stories.tsx    |  1 +
 .../navigation/src/components/navigation.tsx  |  3 +-
 .../src/components/side_nav/popover.tsx       | 10 +-
 src/core/packages/chrome/navigation/types.ts  |  1 +
 .../nav_control/nav_control_service.tsx       | 94 ++++++++++++++++++
 .../nav_control/components/spaces_menu.tsx    |  5 +-
 .../spaces/public/nav_control/nav_control.tsx | 98 ++++++++++++++++++-
 22 files changed, 409 insertions(+), 24 deletions(-)
 create mode 100644 src/core/packages/chrome/browser/src/chrome_next/space_selector.ts
 create mode 100644 src/core/packages/chrome/browser/src/chrome_next/user_menu.ts

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index bc69a8ecd2983..065117e51e812 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -42,7 +42,7 @@ pageLoadAssetSize:
   dataViewManagement: 6250
   dataViews: 66000
   dataVisualizer: 32727
-  developerToolbar: 4467
+  developerToolbar: 15000
   devTools: 8109
   discover: 31186
   discoverEnhanced: 5509
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
index 0bdcd314a5448..3cb66391d61b2 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
@@ -99,10 +99,17 @@ const useNavigationItems = (): NavigationState | null => {
     const emptyToolSlots: ToolSlots = { headerTools: [], footerTools: [] };
 
     const toolSlots$ = isNextChrome
-      ? combineLatest([chrome.next.globalSearch.get$(), helpLinks$]).pipe(
-          map(([searchConfig, helpLinks]) =>
+      ? combineLatest([
+          chrome.next.globalSearch.get$(),
+          chrome.next.spaceSelector.get$(),
+          chrome.next.userMenu.get$(),
+          helpLinks$,
+        ]).pipe(
+          map(([searchConfig, spaceSelectorConfig, userMenuConfig, helpLinks]) =>
             buildToolSlots({
               globalSearch: searchConfig,
+              spaceSelector: spaceSelectorConfig,
+              userMenu: userMenuConfig,
               helpLinks,
             })
           )
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
index 4d042ec0998ba..ba421a2258a99 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
@@ -8,7 +8,11 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import type { ChromeNextGlobalSearchConfig } from '@kbn/core-chrome-browser';
+import type {
+  ChromeNextGlobalSearchConfig,
+  ChromeNextSpaceSelectorConfig,
+  ChromeNextUserMenuConfig,
+} from '@kbn/core-chrome-browser';
 import type {
   SecondaryMenuItem,
   SecondaryMenuSection,
@@ -19,34 +23,100 @@ import type { HelpLinks, HelpMenuLinkItem } from '../../../shared/help_menu_link
 
 export interface ToolSlotsInput {
   globalSearch?: ChromeNextGlobalSearchConfig;
+  spaceSelector?: ChromeNextSpaceSelectorConfig;
+  userMenu?: ChromeNextUserMenuConfig;
   helpLinks: HelpLinks;
 }
 
 export const buildToolSlots = (input: ToolSlotsInput): ToolSlots => ({
-  headerTools: getHeaderTools(input.globalSearch),
-  footerTools: getFooterTools(input.helpLinks),
+  headerTools: getHeaderTools(input.globalSearch, input.spaceSelector),
+  footerTools: getFooterTools(input.userMenu, input.helpLinks),
 });
 
-const getHeaderTools = (globalSearch?: ChromeNextGlobalSearchConfig): ToolItem[] => {
-  if (!globalSearch) {
-    return [];
+const getHeaderTools = (
+  globalSearch?: ChromeNextGlobalSearchConfig,
+  spaceSelector?: ChromeNextSpaceSelectorConfig
+): ToolItem[] => {
+  const tools: ToolItem[] = [];
+
+  const spaceSelectorItem = getSpaceSelectorToolItem(spaceSelector);
+  if (spaceSelectorItem) {
+    tools.push(spaceSelectorItem);
   }
 
-  return [
-    {
+  if (globalSearch) {
+    tools.push({
       id: 'globalSearch',
       label: i18n.translate('core.chrome.projectSideNav.globalSearchLabel', {
         defaultMessage: 'Search',
       }),
       iconType: 'search',
       onClick: globalSearch.onClick,
-    },
-  ];
+    });
+  }
+
+  return tools;
 };
 
-const getFooterTools = (helpLinks: HelpLinks): ToolItem[] => {
+const getSpaceSelectorToolItem = (
+  config: ChromeNextSpaceSelectorConfig | undefined
+): ToolItem | undefined => {
+  if (!config) {
+    return undefined;
+  }
+
+  return {
+    id: 'spaceSelector',
+    label: config.label,
+    renderContent: () => config.renderAvatar(),
+    renderPopover: (closePopover) => config.renderPopover(closePopover),
+    popoverWidth: 360,
+    'data-test-subj': 'sideNavSpaceSelector',
+  };
+};
+
+const getFooterTools = (
+  userMenu: ChromeNextUserMenuConfig | undefined,
+  helpLinks: HelpLinks
+): ToolItem[] => {
+  const tools: ToolItem[] = [];
+  const userMenuItem = getUserMenuToolItem(userMenu);
+  if (userMenuItem) {
+    tools.push(userMenuItem);
+  }
   const helpItem = getHelpToolItem(helpLinks);
-  return helpItem ? [helpItem] : [];
+  if (helpItem) {
+    tools.push(helpItem);
+  }
+  return tools;
+};
+
+const getUserMenuToolItem = (
+  config: ChromeNextUserMenuConfig | undefined
+): ToolItem | undefined => {
+  if (!config) {
+    return undefined;
+  }
+
+  const items: SecondaryMenuItem[] = config.items.map((item) => ({
+    id: item.id,
+    label: item.label,
+    href: item.href,
+    isExternal: item.isExternal,
+    'data-test-subj': item['data-test-subj'],
+  }));
+
+  if (items.length === 0) {
+    return undefined;
+  }
+
+  return {
+    id: 'userMenu',
+    label: config.label,
+    renderContent: () => config.renderAvatar(),
+    sections: [{ id: 'userMenuLinks', items }],
+    'data-test-subj': 'sideNavUserMenu',
+  };
 };
 
 const getHelpToolItem = (helpLinks: HelpLinks): ToolItem | undefined => {
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
index 318edf3db91bf..1446bf56cfd96 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
@@ -182,9 +182,6 @@ export const HeaderHelpMenu = () => {
       id="headerHelpMenu"
       isOpen={isOpen}
       repositionOnScroll
-      aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuAriaLabel', {
-        defaultMessage: 'Help menu',
-      })}
     >
       <EuiPopoverTitle>
         <EuiFlexGroup responsive={false}>
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index 2e1a79cfa3cf0..d76ccac6389cb 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -19,6 +19,8 @@ import type {
   ChromeNextAiButton,
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
+  ChromeNextSpaceSelectorConfig,
+  ChromeNextUserMenuConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -124,4 +126,10 @@ export interface InternalChromeNext extends ChromeNext {
   globalSearch: ChromeNext['globalSearch'] & {
     get$(): Observable<ChromeNextGlobalSearchConfig | undefined>;
   };
+  userMenu: ChromeNext['userMenu'] & {
+    get$(): Observable<ChromeNextUserMenuConfig | undefined>;
+  };
+  spaceSelector: ChromeNext['spaceSelector'] & {
+    get$(): Observable<ChromeNextSpaceSelectorConfig | undefined>;
+  };
 }
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 4ae913247582c..8c5740c4b15ae 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -193,6 +193,14 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
         get$: () => state.globalSearch.$,
         set: state.globalSearch.set,
       },
+      userMenu: {
+        get$: () => state.userMenu.$,
+        set: state.userMenu.set,
+      },
+      spaceSelector: {
+        get$: () => state.spaceSelector.$,
+        set: state.spaceSelector.set,
+      },
     },
 
     sidebar,
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 5bfd3c98549f1..10b5759fe897c 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -21,6 +21,8 @@ import type {
   ChromeNavLink,
   ChromeNextAiButton,
   ChromeNextGlobalSearchConfig,
+  ChromeNextSpaceSelectorConfig,
+  ChromeNextUserMenuConfig,
   ChromeUserBanner,
 } from '@kbn/core-chrome-browser';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
@@ -68,6 +70,8 @@ export interface ChromeState {
   appMenu: State<AppMenuConfig | undefined>;
   aiButton: State<ReadonlySet<ChromeNextAiButton>>;
   globalSearch: State<ChromeNextGlobalSearchConfig | undefined>;
+  userMenu: State<ChromeNextUserMenuConfig | undefined>;
+  spaceSelector: State<ChromeNextSpaceSelectorConfig | undefined>;
 
   /** Help system */
   help: {
@@ -113,6 +117,8 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   const globalFooter = createState<ReactNode>(null);
   const aiButton = createState<ReadonlySet<ChromeNextAiButton>>(new Set());
   const globalSearch = createState<ChromeNextGlobalSearchConfig | undefined>(undefined);
+  const userMenu = createState<ChromeNextUserMenuConfig | undefined>(undefined);
+  const spaceSelector = createState<ChromeNextSpaceSelectorConfig | undefined>(undefined);
   const customNavLink = createState<ChromeNavLink | undefined>(undefined);
 
   // Help System
@@ -138,6 +144,8 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
     globalFooter,
     aiButton,
     globalSearch,
+    userMenu,
+    spaceSelector,
     customNavLink,
     appMenu,
     help: {
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 83002c8578240..2cde4142f2110 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -14,6 +14,8 @@ import type {
   ChromeBreadcrumb,
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
+  ChromeNextSpaceSelectorConfig,
+  ChromeNextUserMenuConfig,
 } from '@kbn/core-chrome-browser';
 import type {
   InternalChromeSetup,
@@ -33,6 +35,10 @@ const createStartContractMock = () => {
   const nextGlobalSearchState$ = new BehaviorSubject<ChromeNextGlobalSearchConfig | undefined>(
     undefined
   );
+  const nextUserMenuState$ = new BehaviorSubject<ChromeNextUserMenuConfig | undefined>(undefined);
+  const nextSpaceSelectorState$ = new BehaviorSubject<ChromeNextSpaceSelectorConfig | undefined>(
+    undefined
+  );
 
   const startContract: DeeplyMockedKeys<InternalChromeStart> = lazyObject({
     withProvider: jest.fn((children) => children),
@@ -125,6 +131,18 @@ const createStartContractMock = () => {
           nextGlobalSearchState$.next(config);
         }),
       }),
+      userMenu: lazyObject({
+        get$: jest.fn().mockReturnValue(nextUserMenuState$),
+        set: jest.fn((config?: ChromeNextUserMenuConfig) => {
+          nextUserMenuState$.next(config);
+        }),
+      }),
+      spaceSelector: lazyObject({
+        get$: jest.fn().mockReturnValue(nextSpaceSelectorState$),
+        set: jest.fn((config?: ChromeNextSpaceSelectorConfig) => {
+          nextSpaceSelectorState$.next(config);
+        }),
+      }),
     }),
     setGlobalFooter: jest.fn(),
     getGlobalFooter$: jest.fn().mockReturnValue(new BehaviorSubject(null)),
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index a4da1b3fe2bd6..580130955782d 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -65,4 +65,7 @@ export type {
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
+  ChromeNextSpaceSelectorConfig,
+  ChromeNextUserMenuConfig,
+  ChromeNextUserMenuItem,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
index 71f71082837b0..63c935fe3b070 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
@@ -10,9 +10,11 @@
 import type { ChromeNextAiButton } from './ai_button';
 import type { ChromeNextGlobalSearchConfig } from './global_search';
 import type { ChromeNextHeaderConfig } from './header';
+import type { ChromeNextSpaceSelectorConfig } from './space_selector';
+import type { ChromeNextUserMenuConfig } from './user_menu';
 
 /**
- * Chrome-Next APIs: header configuration, AI button slot, global search, and future slots.
+ * Chrome-Next APIs: header configuration, AI button slot, global search, user menu, and space selector.
  * @public
  */
 export interface ChromeNext {
@@ -44,4 +46,20 @@ export interface ChromeNext {
      */
     set(config?: ChromeNextGlobalSearchConfig): void;
   };
+  userMenu: {
+    /**
+     * Set the user menu configuration for the Chrome-Next sidenav.
+     * Chrome renders a user avatar in the sidenav footer with a popover listing the provided items.
+     * Pass `undefined` to remove. Global — persists across app changes.
+     */
+    set(config?: ChromeNextUserMenuConfig): void;
+  };
+  spaceSelector: {
+    /**
+     * Set the space selector configuration for the Chrome-Next sidenav.
+     * Chrome renders a space avatar in the sidenav header with a custom popover.
+     * Pass `undefined` to remove. Global — persists across app changes.
+     */
+    set(config?: ChromeNextSpaceSelectorConfig): void;
+  };
 }
diff --git a/src/core/packages/chrome/browser/src/chrome_next/index.ts b/src/core/packages/chrome/browser/src/chrome_next/index.ts
index eabbba32385aa..7968c144add6b 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/index.ts
@@ -19,3 +19,5 @@ export type {
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
 } from './header';
+export type { ChromeNextSpaceSelectorConfig } from './space_selector';
+export type { ChromeNextUserMenuConfig, ChromeNextUserMenuItem } from './user_menu';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/space_selector.ts b/src/core/packages/chrome/browser/src/chrome_next/space_selector.ts
new file mode 100644
index 0000000000000..cdfee763c91c7
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/chrome_next/space_selector.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+
+export interface ChromeNextSpaceSelectorConfig {
+  label: string;
+  renderAvatar: () => ReactNode;
+  renderPopover: (closePopover: () => void) => ReactNode;
+}
diff --git a/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts b/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
new file mode 100644
index 0000000000000..56e163cfca722
--- /dev/null
+++ b/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+
+export interface ChromeNextUserMenuConfig {
+  label: string;
+  renderAvatar: () => ReactNode;
+  items: ChromeNextUserMenuItem[];
+}
+
+export interface ChromeNextUserMenuItem {
+  id: string;
+  label: string;
+  href: string;
+  isExternal?: boolean;
+  'data-test-subj'?: string;
+}
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 8c62dcc0a8ee3..a59c61945a15e 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -71,4 +71,7 @@ export type {
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
+  ChromeNextSpaceSelectorConfig,
+  ChromeNextUserMenuConfig,
+  ChromeNextUserMenuItem,
 } from './chrome_next';
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index aaf5f25135c4e..e0bcb0af82a12 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -88,6 +88,7 @@ export interface ToolItem {
   renderPopover?: (closePopover: () => void) => ReactNode;
   onClick?: () => void;
   sections?: SecondaryMenuSection[];
+  popoverWidth?: number | string;
   badgeType?: BadgeType;
   'data-test-subj'?: string;
 }
diff --git a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
index 443191998a685..4f47f883ebb5a 100644
--- a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
+++ b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
@@ -196,6 +196,7 @@ const CUSTOM_TOOLS: NonNullable<PropsAndArgs['tools']> = {
       label: 'Current space',
       renderContent: () => <SpaceBadge />,
       renderPopover: (closePopover) => <SpacePicker closePopover={closePopover} />,
+      popoverWidth: 360,
     },
     { id: 'search', label: 'Search', iconType: 'search', onClick: () => {} },
   ],
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index c8182b7c88012..a3cd3e31b35c9 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -612,7 +612,7 @@ const renderToolItems = ({
   popoverItemPrefix,
 }: RenderToolItemsArgs) =>
   items.map((item) => {
-    const { onClick: itemOnClick, sections, renderContent, renderPopover, ...itemProps } = item;
+    const { onClick: itemOnClick, sections, renderContent, renderPopover, popoverWidth, ...itemProps } = item;
     const hasPopoverContent = getHasSubmenu(item);
     return (
       <SideNav.Popover
@@ -620,6 +620,7 @@ const renderToolItems = ({
         anchorPosition={anchorPosition}
         customContent={!!renderPopover}
         hasContent={hasPopoverContent}
+        popoverWidth={popoverWidth}
         isSidePanelOpen={false}
         isAnyPopoverLocked={isAnyPopoverLocked}
         label={item.label}
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
index 10e00e24e1b1a..6f7abff91a137 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
@@ -57,6 +57,7 @@ export interface PopoverProps {
    */
   customContent?: boolean;
   hasContent: boolean;
+  popoverWidth?: number | string;
   isSidePanelOpen: boolean;
   isAnyPopoverLocked?: boolean;
   setIsLocked?: (isLocked: boolean) => void;
@@ -87,6 +88,7 @@ export const Popover = ({
   container,
   customContent = false,
   hasContent,
+  popoverWidth,
   isSidePanelOpen,
   isAnyPopoverLocked = false,
   setIsLocked = () => {},
@@ -274,9 +276,15 @@ export const Popover = ({
     width: 100%;
   `;
 
+  const resolvedWidth = popoverWidth
+    ? typeof popoverWidth === 'number'
+      ? `${popoverWidth}px`
+      : popoverWidth
+    : `${SIDE_PANEL_WIDTH}px`;
+
   const popoverContentStyles = css`
     --popover-max-height: 37.5rem;
-    width: ${SIDE_PANEL_WIDTH}px;
+    width: ${resolvedWidth};
     max-height: var(--popover-max-height);
     ${scrollStyles};
   `;
diff --git a/src/core/packages/chrome/navigation/types.ts b/src/core/packages/chrome/navigation/types.ts
index b74f35aa80db5..d6ee6bcff2b84 100644
--- a/src/core/packages/chrome/navigation/types.ts
+++ b/src/core/packages/chrome/navigation/types.ts
@@ -115,6 +115,7 @@ export interface ToolItem {
   renderPopover?: (closePopover: () => void) => ReactNode;
   onClick?: () => void;
   sections?: SecondaryMenuSection[];
+  popoverWidth?: number | string;
   badgeType?: BadgeType;
   'data-test-subj'?: string;
 }
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
index d7a7f72fa124d..e4d84f8f7b42e 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
@@ -12,6 +12,8 @@ import type { Subscription } from 'rxjs';
 import { BehaviorSubject, map, ReplaySubject, takeUntil } from 'rxjs';
 
 import type { CoreStart } from '@kbn/core/public';
+import type { ChromeNextUserMenuItem } from '@kbn/core-chrome-browser';
+import { i18n } from '@kbn/i18n';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import type {
   AuthenticationServiceSetup,
@@ -19,9 +21,11 @@ import type {
   UserMenuLink,
 } from '@kbn/security-plugin-types-public';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
+import { UserAvatar, type UserProfileAvatarData } from '@kbn/user-profile-components';
 
 import { SecurityNavControl } from './nav_control_component';
 import type { SecurityLicense } from '../../common';
+import { getUserDisplayName, isUserAnonymous } from '../../common/model';
 import type { SecurityApiClients } from '../components';
 import { AuthenticationProvider, SecurityApiClientsProvider } from '../components';
 
@@ -118,9 +122,99 @@ export class SecurityNavControlService {
       ),
     });
 
+    this.registerChromeNextUserMenu(core, authc);
+
     this.navControlRegistered = true;
   }
 
+  private registerChromeNextUserMenu(core: CoreStart, authc: AuthenticationServiceSetup) {
+    const editProfileUrl = core.http.basePath.prepend('/security/account');
+    const { userProfiles } = this.securityApiClients;
+
+    Promise.all([
+      authc.getCurrentUser(),
+      userProfiles
+        .getCurrent<{ avatar: UserProfileAvatarData }>({ dataPath: 'avatar' })
+        .catch(() => null),
+    ])
+      .then(([currentUser, userProfile]) => {
+        const userDisplayName = getUserDisplayName(currentUser);
+        const isAnonymous = isUserAnonymous(currentUser);
+
+        const renderAvatar = () =>
+          userProfile ? (
+            <UserAvatar
+              user={userProfile.user}
+              avatar={userProfile.data.avatar}
+              size="s"
+              data-test-subj="sideNavUserMenuAvatar"
+            />
+          ) : (
+            <UserAvatar user={currentUser} size="s" data-test-subj="sideNavUserMenuAvatar" />
+          );
+
+        const buildItems = (userMenuLinks: UserMenuLink[]): ChromeNextUserMenuItem[] => {
+          const items: ChromeNextUserMenuItem[] = [];
+
+          const sorted = this.sortUserMenuLinks(userMenuLinks);
+          const hasCustomProfileLinks = sorted.some(({ setAsProfile }) => setAsProfile === true);
+
+          if (!isAnonymous && !hasCustomProfileLinks) {
+            items.push({
+              id: 'profileLink',
+              label: i18n.translate('xpack.security.navControlComponent.editProfileLinkText', {
+                defaultMessage: 'Edit profile',
+              }),
+              href: editProfileUrl,
+              'data-test-subj': 'profileLink',
+            });
+          }
+
+          for (const link of sorted) {
+            if (link.content || !link.label || !link.href) {
+              continue;
+            }
+            items.push({
+              id: `userMenuLink__${link.label}`,
+              label: link.label,
+              href: link.href,
+              'data-test-subj': `userMenuLink__${link.label}`,
+            });
+          }
+
+          items.push({
+            id: 'logoutLink',
+            label: isAnonymous
+              ? i18n.translate('xpack.security.navControlComponent.loginLinkText', {
+                  defaultMessage: 'Log in',
+                })
+              : i18n.translate('xpack.security.navControlComponent.logoutLinkText', {
+                  defaultMessage: 'Log out',
+                }),
+            href: this.logoutUrl,
+            'data-test-subj': 'logoutLink',
+          });
+
+          return items;
+        };
+
+        const setConfig = (userMenuLinks: UserMenuLink[]) => {
+          core.chrome.next.userMenu.set({
+            label: userDisplayName,
+            renderAvatar,
+            items: buildItems(userMenuLinks),
+          });
+        };
+
+        setConfig(this.userMenuLinks$.value);
+
+        this.userMenuLinks$.pipe(takeUntil(this.stop$)).subscribe((links) => setConfig(links));
+      })
+      .catch(() => {
+        // Chrome Next user menu unavailable — legacy nav control still active
+      });
+  }
+
   private sortUserMenuLinks(userMenuLinks: UserMenuLink[]) {
     return sortBy(userMenuLinks, 'order');
   }
diff --git a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx
index 32026202e7c50..5ada455bfcd8b 100644
--- a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx
@@ -54,6 +54,7 @@ interface Props {
   allowSolutionVisibility: boolean;
   eventTracker: EventTracker;
   isLoading: boolean;
+  width?: number | string;
 }
 class SpacesMenuUI extends Component<Props & WithEuiThemeProps> {
   public render() {
@@ -107,7 +108,9 @@ class SpacesMenuUI extends Component<Props & WithEuiThemeProps> {
           options={spaceOptions}
           singleSelection={'always'}
           css={css`
-            width: 400px;
+            width: ${typeof this.props.width === 'number'
+              ? `${this.props.width}px`
+              : this.props.width ?? '400px'};
           `}
           onChange={this.spaceSelectionChange}
           listProps={{
diff --git a/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx b/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx
index 989d62e911e70..cf0e75c36125a 100644
--- a/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx
@@ -5,16 +5,21 @@
  * 2.0.
  */
 
-import { EuiSkeletonRectangle } from '@elastic/eui';
+import { EuiSkeletonCircle, EuiSkeletonRectangle } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 
 import type { CoreStart } from '@kbn/core/public';
+import type { ChromeNextSpaceSelectorConfig } from '@kbn/core-chrome-browser';
 import { QueryClient, QueryClientProvider } from '@kbn/react-query';
 import { euiThemeVars } from '@kbn/ui-theme';
 
+import { SpacesMenu } from './components/spaces_menu';
+import { useSpaces } from './hooks/use_spaces';
+import type { Space } from '../../common';
 import type { EventTracker } from '../analytics';
 import type { ConfigType } from '../config';
+import { getSpaceAvatarComponent } from '../space_avatar';
 import type { SpacesManager } from '../spaces_manager';
 
 const LazyNavControlPopover = lazy(() =>
@@ -23,6 +28,10 @@ const LazyNavControlPopover = lazy(() =>
   }))
 );
 
+const LazySpaceAvatar = lazy(() =>
+  getSpaceAvatarComponent().then((component) => ({ default: component }))
+);
+
 export function initSpacesNavControl(
   spacesManager: SpacesManager,
   core: CoreStart,
@@ -38,6 +47,17 @@ export function initSpacesNavControl(
     },
   });
 
+  registerHeaderSpacesControl(spacesManager, core, config, eventTracker, queryClient);
+  registerSidenavSpacesControl(spacesManager, core, config, eventTracker, queryClient);
+}
+
+function registerHeaderSpacesControl(
+  spacesManager: SpacesManager,
+  core: CoreStart,
+  config: ConfigType,
+  eventTracker: EventTracker,
+  queryClient: QueryClient
+) {
   const SpacesNavControl = () => {
     if (core.http.anonymousPaths.isAnonymous(window.location.pathname)) {
       return null;
@@ -77,3 +97,77 @@ export function initSpacesNavControl(
     content: <SpacesNavControl />,
   });
 }
+
+function registerSidenavSpacesControl(
+  spacesManager: SpacesManager,
+  core: CoreStart,
+  config: ConfigType,
+  eventTracker: EventTracker,
+  queryClient: QueryClient
+) {
+  if (core.http.anonymousPaths.isAnonymous(window.location.pathname)) {
+    return;
+  }
+
+  const SidenavSpacesPopoverContent = ({ closePopover }: { closePopover: () => void }) => {
+    const [activeSpace, setActiveSpace] = useState<Space | null>(null);
+    const { data, isLoading } = useSpaces(spacesManager);
+
+    useEffect(() => {
+      const sub = spacesManager.onActiveSpaceChange$.subscribe((space) => {
+        setActiveSpace(space);
+      });
+      return () => sub.unsubscribe();
+    }, []);
+
+    const handleToggle = useCallback(() => {
+      closePopover();
+    }, [closePopover]);
+
+    return (
+      <SpacesMenu
+        id="sidenavSpacesMenuContent"
+        spaces={data || []}
+        serverBasePath={core.http.basePath.serverBasePath}
+        toggleSpaceSelector={handleToggle}
+        capabilities={core.application.capabilities}
+        navigateToApp={core.application.navigateToApp}
+        navigateToUrl={core.application.navigateToUrl}
+        activeSpace={activeSpace}
+        allowSolutionVisibility={config.allowSolutionVisibility}
+        eventTracker={eventTracker}
+        onClickManageSpaceBtn={handleToggle}
+        isLoading={isLoading}
+        width="100%"
+      />
+    );
+  };
+
+  const setConfig = (space: Space | null) => {
+    if (!space) {
+      core.chrome.next.spaceSelector.set(undefined);
+      return;
+    }
+
+    const selectorConfig: ChromeNextSpaceSelectorConfig = {
+      label: space.name,
+      renderAvatar: () => (
+        <Suspense fallback={<EuiSkeletonCircle size="s" />}>
+          <LazySpaceAvatar space={space} size="s" />
+        </Suspense>
+      ),
+      renderPopover: (closePopover) => (
+        <QueryClientProvider client={queryClient}>
+          <SidenavSpacesPopoverContent closePopover={closePopover} />
+        </QueryClientProvider>
+      ),
+    };
+
+    core.chrome.next.spaceSelector.set(selectorConfig);
+  };
+
+  // Subscription intentionally lives for the page lifetime — no teardown needed.
+  spacesManager.onActiveSpaceChange$.subscribe((space) => {
+    setConfig(space);
+  });
+}

From 347f37c9365525ee5dfa5d34c989c09550e29030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngeles=20Mart=C3=ADnez=20Barrio?=
 <angeles.martinezbarrio@elastic.co>
Date: Wed, 8 Apr 2026 16:36:40 +0200
Subject: [PATCH 20/77] [FeatureBranch/DoNotReview][Chrome Next] Add global
 search modal (#261952)

Closes https://github.com/elastic/kibana/issues/259116

## Summary

This PR adds the global search modal:
- Takes the existing global search and moves it into a modal
- Sets a width and height to keep the modal from changing size and
position as you search
- Reuses existing global search functionality (navigate-to-app,
navigate-to-saved-object...)
- Adds a listener in navigation to be able to open/close the modal with
a keyboard shortcut (Cmd+K / Ctrl+K)

### Testing


https://github.com/user-attachments/assets/14fa6d4c-29e7-49b0-be6c-68b0b65bbc31

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../navigation/to_chrome_tool_slots.ts        |   1 +
 .../browser/src/chrome_next/global_search.ts  |   2 +
 .../navigation/packaging/react/types.ts       |   1 +
 .../navigation/src/components/navigation.tsx  |  20 +-
 .../src/hooks/use_tool_shortcuts.ts           |  50 +++
 src/core/packages/chrome/navigation/types.ts  |   1 +
 .../packages/overlays/browser/src/modal.ts    |   1 +
 .../char_limit_exceeded_message.tsx           |  38 ++
 .../public/components/empty_message.tsx       |  29 ++
 .../public/components/search_bar.tsx          | 326 +++---------------
 .../{popover_footer.tsx => search_footer.tsx} |  13 +-
 .../public/components/search_modal.tsx        |  43 +++
 .../components/search_modal_internal.tsx      | 149 ++++++++
 ...placeholder.tsx => search_placeholder.tsx} |   7 +-
 .../public/components/types.ts                |  18 +-
 .../public/hooks/use_search_state.ts          | 288 ++++++++++++++++
 .../global_search_bar/public/plugin.tsx       |  71 +++-
 .../private/global_search_bar/tsconfig.json   |   3 +-
 18 files changed, 752 insertions(+), 309 deletions(-)
 create mode 100644 src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts
 create mode 100644 x-pack/platform/plugins/private/global_search_bar/public/components/char_limit_exceeded_message.tsx
 create mode 100644 x-pack/platform/plugins/private/global_search_bar/public/components/empty_message.tsx
 rename x-pack/platform/plugins/private/global_search_bar/public/components/{popover_footer.tsx => search_footer.tsx} (87%)
 create mode 100644 x-pack/platform/plugins/private/global_search_bar/public/components/search_modal.tsx
 create mode 100644 x-pack/platform/plugins/private/global_search_bar/public/components/search_modal_internal.tsx
 rename x-pack/platform/plugins/private/global_search_bar/public/components/{popover_placeholder.tsx => search_placeholder.tsx} (92%)
 create mode 100644 x-pack/platform/plugins/private/global_search_bar/public/hooks/use_search_state.ts

diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
index ba421a2258a99..42b702299c120 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
@@ -52,6 +52,7 @@ const getHeaderTools = (
       }),
       iconType: 'search',
       onClick: globalSearch.onClick,
+      shortcutKey: globalSearch.shortcutKey,
     });
   }
 
diff --git a/src/core/packages/chrome/browser/src/chrome_next/global_search.ts b/src/core/packages/chrome/browser/src/chrome_next/global_search.ts
index 3ae7cbf66193e..24137cbaa9807 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/global_search.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/global_search.ts
@@ -13,4 +13,6 @@
 export interface ChromeNextGlobalSearchConfig {
   /** Called when the search icon button in the sidenav is clicked. */
   onClick: () => void;
+  /** The keyboard shortcut key to trigger the global search modal. */
+  shortcutKey?: string;
 }
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index e0bcb0af82a12..7daadb2afa9ca 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -91,6 +91,7 @@ export interface ToolItem {
   popoverWidth?: number | string;
   badgeType?: BadgeType;
   'data-test-subj'?: string;
+  shortcutKey?: string;
 }
 
 /**
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index a3cd3e31b35c9..4b9a1597de1b6 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -44,6 +44,9 @@ import { useNavigation } from '../hooks/use_navigation';
 import { useNewItems } from '../hooks/use_new_items';
 import { useResponsiveMenu } from '../hooks/use_responsive_menu';
 import { getHighContrastSeparator } from '../hooks/use_high_contrast_mode_styles';
+import { useToolShortcuts } from '../hooks/use_tool_shortcuts';
+
+const EMPTY_TOOL_ITEMS: ToolItem[] = [];
 
 const navigationWrapperStyles = css`
   display: flex;
@@ -160,12 +163,15 @@ export const Navigation = ({
 
   const collapseToggle = onToggleCollapsed && !forcedCollapsed ? onToggleCollapsed : undefined;
 
-  const headerTools = tools?.headerTools ?? [];
-  const footerTools = tools?.footerTools ?? [];
+  const headerTools = tools?.headerTools ?? EMPTY_TOOL_ITEMS;
+  const footerTools = tools?.footerTools ?? EMPTY_TOOL_ITEMS;
   const hasHeaderTools = headerTools.length > 0;
   const hasFooterTools = footerTools.length > 0;
   const showFooterToolbar = hasFooterTools || Boolean(collapseToggle);
 
+  const allTools = useMemo(() => [...headerTools, ...footerTools], [headerTools, footerTools]);
+  useToolShortcuts({ tools: allTools });
+
   const topSectionStyles = useMemo(() => getTopSectionStyles(euiThemeContext), [euiThemeContext]);
 
   const footerNavItems = items.footerItems.slice(0, MAX_FOOTER_ITEMS);
@@ -612,7 +618,15 @@ const renderToolItems = ({
   popoverItemPrefix,
 }: RenderToolItemsArgs) =>
   items.map((item) => {
-    const { onClick: itemOnClick, sections, renderContent, renderPopover, popoverWidth, ...itemProps } = item;
+    const {
+      onClick: itemOnClick,
+      sections,
+      renderContent,
+      renderPopover,
+      popoverWidth,
+      shortcutKey,
+      ...itemProps
+    } = item;
     const hasPopoverContent = getHasSubmenu(item);
     return (
       <SideNav.Popover
diff --git a/src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts b/src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts
new file mode 100644
index 0000000000000..aaf07f4db879b
--- /dev/null
+++ b/src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useCallback, useEffect } from 'react';
+import type { ToolItem } from '../../types';
+
+/**
+ * Hook to handle keyboard shortcuts for tool items.
+ * @param tools - The tool items to handle shortcuts for.
+ */
+
+interface UseToolShortcutsProps {
+  tools: ToolItem[];
+}
+
+const isMac = (() => {
+  if (typeof navigator === 'undefined') return false;
+  const nav = navigator as Navigator & { userAgentData?: { platform?: string } };
+  const platform = (nav.userAgentData?.platform ?? nav.userAgent ?? '').toLowerCase();
+  return platform.includes('mac');
+})();
+
+export const useToolShortcuts = ({ tools }: UseToolShortcutsProps) => {
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const toolWithShortcut = tools.find(
+        (tool) =>
+          tool.shortcutKey &&
+          event.key === tool.shortcutKey &&
+          (isMac ? event.metaKey : event.ctrlKey)
+      );
+      if (toolWithShortcut) {
+        event.preventDefault();
+        toolWithShortcut.onClick?.();
+      }
+    },
+    [tools]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+};
diff --git a/src/core/packages/chrome/navigation/types.ts b/src/core/packages/chrome/navigation/types.ts
index d6ee6bcff2b84..10c9f9e1bad5a 100644
--- a/src/core/packages/chrome/navigation/types.ts
+++ b/src/core/packages/chrome/navigation/types.ts
@@ -118,6 +118,7 @@ export interface ToolItem {
   popoverWidth?: number | string;
   badgeType?: BadgeType;
   'data-test-subj'?: string;
+  shortcutKey?: string;
 }
 
 /**
diff --git a/src/core/packages/overlays/browser/src/modal.ts b/src/core/packages/overlays/browser/src/modal.ts
index 6c134270fda28..ce0b78f0e4223 100644
--- a/src/core/packages/overlays/browser/src/modal.ts
+++ b/src/core/packages/overlays/browser/src/modal.ts
@@ -68,4 +68,5 @@ export interface OverlayModalOpenOptions {
   'data-test-subj'?: string;
   maxWidth?: boolean | number | string;
   'aria-labelledby'?: EuiModalProps['aria-labelledby'];
+  outsideClickCloses?: boolean;
 }
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/char_limit_exceeded_message.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/char_limit_exceeded_message.tsx
new file mode 100644
index 0000000000000..eae364868ed88
--- /dev/null
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/char_limit_exceeded_message.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiText } from '@elastic/eui';
+import React from 'react';
+import { SearchPlaceholder } from './search_placeholder';
+
+interface CharLimitExceededMessageProps {
+  basePathUrl: string;
+}
+
+export const CharLimitExceededMessage = ({ basePathUrl }: CharLimitExceededMessageProps) => {
+  const charLimitMessage = (
+    <>
+      <EuiText size="m">
+        <p data-test-subj="searchCharLimitExceededMessageHeading">
+          <FormattedMessage
+            id="xpack.globalSearchBar.searchBar.searchCharLimitExceededHeading"
+            defaultMessage="Search character limit exceeded"
+          />
+        </p>
+      </EuiText>
+      <p>
+        <FormattedMessage
+          id="xpack.globalSearchBar.searchBar.searchCharLimitExceeded"
+          defaultMessage="Try searching for applications, dashboards, visualizations, and more."
+        />
+      </p>
+    </>
+  );
+
+  return <SearchPlaceholder basePath={basePathUrl} customPlaceholderMessage={charLimitMessage} />;
+};
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/empty_message.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/empty_message.tsx
new file mode 100644
index 0000000000000..2e309b0d04948
--- /dev/null
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/empty_message.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+
+import { EuiFlexGroup } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+
+export const EmptyMessage = () => {
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      direction="column"
+      justifyContent="center"
+      css={css`
+        min-height: 300px;
+      `}
+    >
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size="xl" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/search_bar.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/search_bar.tsx
index d5431931cec86..cccd304e6853c 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/components/search_bar.tsx
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/search_bar.tsx
@@ -5,16 +5,11 @@
  * 2.0.
  */
 
-import type { EuiSelectableTemplateSitewideOption } from '@elastic/eui';
 import {
   EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiFormLabel,
   EuiHeaderSectionItemButton,
   EuiIcon,
-  EuiText,
-  EuiLoadingSpinner,
   EuiSelectableTemplateSitewide,
   euiSelectableTemplateSitewideRenderOptions,
   useEuiTheme,
@@ -22,72 +17,28 @@ import {
   mathWithUnits,
   useEuiMinBreakpoint,
 } from '@elastic/eui';
-import type { EuiSelectableOnChangeEvent } from '@elastic/eui/src/components/selectable/selectable';
 import { css } from '@emotion/react';
-import { FormattedMessage } from '@kbn/i18n-react';
-import type { GlobalSearchFindParams, GlobalSearchResult } from '@kbn/global-search-plugin/public';
-import type { FC } from 'react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { apm } from '@elastic/apm-rum';
-import useDebounce from 'react-use/lib/useDebounce';
+import React, { useCallback, useRef, useState } from 'react';
 import useEvent from 'react-use/lib/useEvent';
-import useMountedState from 'react-use/lib/useMountedState';
 import useObservable from 'react-use/lib/useObservable';
-import type { Subscription } from 'rxjs';
 import { isMac } from '@kbn/shared-ux-utility';
-import { blurEvent, sort } from '.';
-import { resultToOption, suggestionToOption } from '../lib';
-import { parseSearchParams } from '../search_syntax';
 import { i18nStrings } from '../strings';
-import type { SearchSuggestion } from '../suggestions';
-import { getSuggestions } from '../suggestions';
-import { PopoverFooter } from './popover_footer';
-import { PopoverPlaceholder } from './popover_placeholder';
+import { SearchFooter } from './search_footer';
+import { SearchPlaceholder } from './search_placeholder';
+import { useSearchState } from '../hooks/use_search_state';
+import { EmptyMessage } from './empty_message';
+import { CharLimitExceededMessage } from './char_limit_exceeded_message';
+import { blurEvent } from '.';
 import type { SearchBarProps } from './types';
 
-const SearchCharLimitExceededMessage = (props: { basePathUrl: string }) => {
-  const charLimitMessage = (
-    <>
-      <EuiText size="m">
-        <p data-test-subj="searchCharLimitExceededMessageHeading">
-          <FormattedMessage
-            id="xpack.globalSearchBar.searchBar.searchCharLimitExceededHeading"
-            defaultMessage="Search character limit exceeded"
-          />
-        </p>
-      </EuiText>
-      <p>
-        <FormattedMessage
-          id="xpack.globalSearchBar.searchBar.searchCharLimitExceeded"
-          defaultMessage="Try searching for applications, dashboards, visualizations, and more."
-        />
-      </p>
-    </>
-  );
-
-  return (
-    <PopoverPlaceholder basePath={props.basePathUrl} customPlaceholderMessage={charLimitMessage} />
-  );
-};
-
-const EmptyMessage = () => (
-  <EuiFlexGroup
-    direction="column"
-    justifyContent="center"
-    css={css`
-      min-height: 300px;
-    `}
-  >
-    <EuiFlexItem grow={false}>
-      <EuiLoadingSpinner size="xl" />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
-
-export const SearchBar: FC<SearchBarProps> = (opts) => {
-  const { globalSearch, taggingApi, navigateToUrl, reportEvent, chromeStyle$, ...props } = opts;
-
-  const isMounted = useMountedState();
+export const SearchBar = ({
+  globalSearch,
+  taggingApi,
+  navigateToUrl,
+  reportEvent,
+  chromeStyle$,
+  basePathUrl,
+}: SearchBarProps) => {
   const { euiTheme } = useEuiTheme();
   const chromeStyle = useObservable(chromeStyle$);
 
@@ -95,18 +46,32 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
   const [isVisible, setIsVisible] = useState(false);
   const visibilityButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  // General hooks
-  const [initialLoad, setInitialLoad] = useState(false);
-  const [searchValue, setSearchValue] = useState<string>('');
-  const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null);
   const [buttonRef, setButtonRef] = useState<HTMLDivElement | null>(null);
-  const searchSubscription = useRef<Subscription | null>(null);
-  const [options, setOptions] = useState<EuiSelectableTemplateSitewideOption[]>([]);
-  const [searchableTypes, setSearchableTypes] = useState<string[]>([]);
   const [showAppend, setShowAppend] = useState<boolean>(true);
-  const UNKNOWN_TAG_ID = '__unknown__';
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [searchCharLimitExceeded, setSearchCharLimitExceeded] = useState(false);
+
+  const {
+    searchValue,
+    setSearchValue,
+    options,
+    isLoading,
+    searchCharLimitExceeded,
+    onChange,
+    setSearchRef,
+    searchRef,
+    triggerInitialLoad,
+  } = useSearchState({
+    globalSearch,
+    taggingApi,
+    navigateToUrl,
+    reportEvent,
+    onResultSelect: () => {
+      (document.activeElement as HTMLElement).blur();
+      if (searchRef.current) {
+        setSearchValue('');
+        searchRef.current.dispatchEvent(blurEvent);
+      }
+    },
+  });
 
   const styles = css({
     [useEuiBreakpoint(['m', 'l'])]: {
@@ -116,130 +81,6 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
       width: mathWithUnits(euiTheme.size.xxl, (x) => x * 15),
     },
   });
-  // Initialize searchableTypes data
-  useEffect(() => {
-    if (initialLoad) {
-      const fetch = async () => {
-        const types = await globalSearch.getSearchableTypes();
-        setSearchableTypes(types);
-      };
-      fetch();
-    }
-  }, [globalSearch, initialLoad]);
-
-  // Whenever searchValue changes, isLoading = true
-  useEffect(() => {
-    setIsLoading(true);
-  }, [searchValue]);
-
-  const loadSuggestions = useCallback(
-    (term: string) => {
-      return getSuggestions({
-        searchTerm: term,
-        searchableTypes,
-        tagCache: taggingApi?.cache,
-      });
-    },
-    [taggingApi, searchableTypes]
-  );
-
-  const setDecoratedOptions = useCallback(
-    (
-      _options: GlobalSearchResult[],
-      suggestions: SearchSuggestion[],
-      searchTagIds: string[] = []
-    ) => {
-      setOptions([
-        ...suggestions.map(suggestionToOption),
-        ..._options.map((option) =>
-          resultToOption(
-            option,
-            searchTagIds?.filter((id) => id !== UNKNOWN_TAG_ID) ?? [],
-            taggingApi?.ui.getTagList
-          )
-        ),
-      ]);
-    },
-    [setOptions, taggingApi]
-  );
-
-  useDebounce(
-    () => {
-      if (initialLoad) {
-        // cancel pending search if not completed yet
-        if (searchSubscription.current) {
-          searchSubscription.current.unsubscribe();
-          searchSubscription.current = null;
-        }
-
-        if (searchValue.length > globalSearch.searchCharLimit) {
-          // setting this will display an error message to the user
-          setSearchCharLimitExceeded(true);
-          return;
-        } else {
-          setSearchCharLimitExceeded(false);
-        }
-
-        const suggestions = loadSuggestions(searchValue.toLowerCase());
-
-        let aggregatedResults: GlobalSearchResult[] = [];
-
-        if (searchValue.length !== 0) {
-          reportEvent.searchRequest();
-        }
-
-        const rawParams = parseSearchParams(searchValue.toLowerCase(), searchableTypes);
-        let tagIds: string[] | undefined;
-        if (taggingApi && rawParams.filters.tags) {
-          tagIds = rawParams.filters.tags.map(
-            (tagName) => taggingApi.ui.getTagIdFromName(tagName) ?? UNKNOWN_TAG_ID
-          );
-        } else {
-          tagIds = undefined;
-        }
-        const searchParams: GlobalSearchFindParams = {
-          term: rawParams.term,
-          types: rawParams.filters.types,
-          tags: tagIds,
-        };
-
-        searchSubscription.current = globalSearch.find(searchParams, {}).subscribe({
-          next: ({ results }) => {
-            if (!isMounted()) {
-              return;
-            }
-
-            if (searchValue.length > 0) {
-              aggregatedResults = [...results, ...aggregatedResults].sort(sort.byScore);
-              setDecoratedOptions(aggregatedResults, suggestions, searchParams.tags);
-              return;
-            }
-
-            // if searchbar is empty, filter to only applications and sort alphabetically
-            results = results.filter(({ type }: GlobalSearchResult) => type === 'application');
-            aggregatedResults = [...results, ...aggregatedResults].sort(sort.byTitle);
-            setDecoratedOptions(aggregatedResults, suggestions, searchParams.tags);
-          },
-          error: (err) => {
-            setIsLoading(false);
-
-            // Not doing anything on error right now because it'll either just show the previous
-            // results or empty results which is basically what we want anyways
-            apm.captureError(err, {
-              labels: {
-                SearchValue: searchValue,
-              },
-            });
-          },
-          complete: () => {
-            setIsLoading(false);
-          },
-        });
-      }
-    },
-    350,
-    [searchValue, loadSuggestions, searchableTypes, initialLoad]
-  );
 
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -248,8 +89,8 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
         reportEvent.shortcutUsed();
         if (chromeStyle === 'project' && !isVisible) {
           visibilityButtonRef.current?.click();
-        } else if (searchRef) {
-          searchRef.focus();
+        } else if (searchRef.current) {
+          searchRef.current.focus();
         } else if (buttonRef) {
           (buttonRef.children[0] as HTMLButtonElement).click();
         }
@@ -258,81 +99,6 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
     [chromeStyle, isVisible, buttonRef, searchRef, reportEvent]
   );
 
-  const onChange = useCallback(
-    (selection: EuiSelectableTemplateSitewideOption[], event: EuiSelectableOnChangeEvent) => {
-      let selectedRank: number | null = null;
-      const selected = selection.find(({ checked }, rank) => {
-        const isChecked = checked === 'on';
-        if (isChecked) {
-          selectedRank = rank + 1;
-        }
-        return isChecked;
-      });
-
-      if (!selected) {
-        return;
-      }
-
-      const selectedLabel = selected.label ?? null;
-
-      // @ts-ignore - ts error is "union type is too complex to express"
-      const { url, type, suggestion } = selected;
-
-      // if the type is a suggestion, we change the query on the input and trigger a new search
-      // by setting the searchValue (only setting the field value does not trigger a search)
-      if (type === '__suggestion__') {
-        setSearchValue(suggestion);
-        return;
-      }
-
-      // errors in tracking should not prevent selection behavior
-      try {
-        if (type === 'application') {
-          const key = selected.key ?? 'unknown';
-          const application = `${key.toLowerCase().replaceAll(' ', '_')}`;
-          reportEvent.navigateToApplication({
-            application,
-            searchValue,
-            selectedLabel,
-            selectedRank,
-          });
-        } else {
-          reportEvent.navigateToSavedObject({
-            type,
-            searchValue,
-            selectedLabel,
-            selectedRank,
-          });
-        }
-      } catch (err) {
-        apm.captureError(err, {
-          labels: {
-            SearchValue: searchValue,
-          },
-        });
-        // eslint-disable-next-line no-console
-        console.log('Error trying to track searchbar metrics', err);
-      }
-
-      if (event.shiftKey) {
-        window.open(url);
-      } else if (event.ctrlKey || event.metaKey) {
-        window.open(url, '_blank');
-      } else {
-        navigateToUrl(url);
-      }
-
-      (document.activeElement as HTMLElement).blur();
-      if (searchRef) {
-        clearField();
-        searchRef.dispatchEvent(blurEvent);
-      }
-    },
-    [reportEvent, navigateToUrl, searchRef, searchValue]
-  );
-
-  const clearField = () => setSearchValue('');
-
   const keyboardShortcutTooltip = `${i18nStrings.keyboardShortcutTooltip.prefix}: ${
     isMac ? i18nStrings.keyboardShortcutTooltip.onMac : i18nStrings.keyboardShortcutTooltip.onNotMac
   }`;
@@ -411,7 +177,7 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
         placeholder: i18nStrings.placeholderText,
         onFocus: () => {
           reportEvent.searchFocus();
-          setInitialLoad(true);
+          triggerInitialLoad();
           setShowAppend(false);
         },
         onBlur: () => {
@@ -421,9 +187,11 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
         fullWidth: true,
         append: getAppendForChromeStyle(),
       }}
-      errorMessage={searchCharLimitExceeded ? <SearchCharLimitExceededMessage {...props} /> : null}
+      errorMessage={
+        searchCharLimitExceeded ? <CharLimitExceededMessage basePathUrl={basePathUrl} /> : null
+      }
       emptyMessage={<EmptyMessage />}
-      noMatchesMessage={<PopoverPlaceholder basePath={props.basePathUrl} />}
+      noMatchesMessage={<SearchPlaceholder basePath={basePathUrl} />}
       popoverProps={{
         zIndex: Number(euiTheme.levels.navigation),
         'data-test-subj': 'nav-search-popover',
@@ -437,7 +205,7 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
           <EuiIcon type="magnify" size="m" aria-hidden={true} />
         </EuiHeaderSectionItemButton>
       }
-      popoverFooter={<PopoverFooter />}
+      popoverFooter={<SearchFooter />}
     />
   );
 };
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/popover_footer.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/search_footer.tsx
similarity index 87%
rename from x-pack/platform/plugins/private/global_search_bar/public/components/popover_footer.tsx
rename to x-pack/platform/plugins/private/global_search_bar/public/components/search_footer.tsx
index 03b603380f49d..899d96b75c626 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/components/popover_footer.tsx
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/search_footer.tsx
@@ -5,13 +5,16 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
 import React from 'react';
 import { EuiCode, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { isMac } from '@kbn/shared-ux-utility';
 
-export const PopoverFooter: FC = () => {
+interface SearchFooterProps {
+  shortcutKey?: string;
+}
+
+export const SearchFooter = ({ shortcutKey = '/' }: SearchFooterProps) => {
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -56,12 +59,14 @@ export const PopoverFooter: FC = () => {
                     {isMac ? (
                       <FormattedMessage
                         id="xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription"
-                        defaultMessage="Command + /"
+                        defaultMessage="Command + {key}"
+                        values={{ key: shortcutKey }}
                       />
                     ) : (
                       <FormattedMessage
                         id="xpack.globalSearchBar.searchBar.shortcutDescription.windowsCommandDescription"
-                        defaultMessage="Control + /"
+                        defaultMessage="Control + {key}"
+                        values={{ key: shortcutKey }}
                       />
                     )}
                   </EuiCode>
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/search_modal.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/search_modal.tsx
new file mode 100644
index 0000000000000..dbf79ddbae0b3
--- /dev/null
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/search_modal.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { css, Global } from '@emotion/react';
+import { dynamic } from '@kbn/shared-ux-utility';
+import { EuiLoadingSpinner, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { SearchModalProps } from './types';
+import { SEARCH_MODAL_SELECTOR_PREFIX, SEARCH_MODAL_HEIGHT, SEARCH_MODAL_WIDTH } from './types';
+
+const modalOverlayStyles = css`
+  .${SEARCH_MODAL_SELECTOR_PREFIX} {
+    block-size: ${SEARCH_MODAL_HEIGHT}vh;
+    inline-size: ${SEARCH_MODAL_WIDTH}px;
+
+    .euiModal__closeIcon {
+      display: none;
+    }
+  }
+`;
+
+const LazySearchModal = dynamic(
+  () => import('./search_modal_internal').then((mod) => ({ default: mod.SearchModalInternal })),
+  {
+    fallback: (
+      <EuiFlexGroup justifyContent="center" alignItems="center" style={{ height: '100%' }}>
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="m" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+  }
+);
+export const SearchModal = (props: SearchModalProps) => (
+  <>
+    <Global styles={modalOverlayStyles} />
+    <LazySearchModal {...props} />
+  </>
+);
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/search_modal_internal.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/search_modal_internal.tsx
new file mode 100644
index 0000000000000..3afc6f9ab989f
--- /dev/null
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/search_modal_internal.tsx
@@ -0,0 +1,149 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiSelectable,
+  euiSelectableTemplateSitewideRenderOptions,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useEffect } from 'react';
+import { i18nStrings } from '../strings';
+import { SearchFooter } from './search_footer';
+import { SearchPlaceholder } from './search_placeholder';
+import { useSearchState } from '../hooks/use_search_state';
+import type { SearchModalProps } from './types';
+import { EmptyMessage } from './empty_message';
+import {
+  SEARCH_MODAL_KEYBOARD_SHORTCUT,
+  SEARCH_MODAL_ROW_HEIGHT,
+  SEARCH_MODAL_SELECTOR_PREFIX,
+} from './types';
+import { CharLimitExceededMessage } from './char_limit_exceeded_message';
+
+export const SearchModalInternal = ({
+  globalSearch,
+  taggingApi,
+  navigateToUrl,
+  reportEvent,
+  basePathUrl,
+  onClose,
+}: SearchModalProps) => {
+  const { euiTheme } = useEuiTheme();
+  const {
+    searchValue,
+    setSearchValue,
+    options,
+    isLoading,
+    searchCharLimitExceeded,
+    onChange,
+    setSearchRef,
+    triggerInitialLoad,
+  } = useSearchState({
+    globalSearch,
+    taggingApi,
+    navigateToUrl,
+    reportEvent,
+    onResultSelect: onClose,
+  });
+
+  useEffect(() => {
+    triggerInitialLoad();
+    reportEvent.searchFocus();
+    return () => {
+      reportEvent.searchBlur();
+    };
+  }, [triggerInitialLoad, reportEvent]);
+
+  const formattedOptions = options.map((option) => ({
+    ...option,
+    prepend: option.icon ? <EuiIcon color="subdued" size="l" {...option.icon} /> : option.prepend,
+  }));
+
+  const selectableStyles = css`
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    overflow: hidden;
+  `;
+
+  const headerStyles = css`
+    padding-block: ${euiTheme.size.base};
+    padding-inline: ${euiTheme.size.base};
+  `;
+
+  const bodyStyles = css`
+    .euiModalBody__overflow {
+      padding-inline: 0;
+      padding-block: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: ${isLoading || options.length === 0 ? 'center' : 'flex-start'};
+    }
+  `;
+
+  const footerStyles = css`
+    padding-block: ${euiTheme.size.s};
+    padding-inline: ${euiTheme.size.base};
+  `;
+
+  return (
+    <EuiSelectable
+      css={selectableStyles}
+      isLoading={isLoading}
+      isPreFiltered
+      onChange={onChange}
+      options={formattedOptions}
+      singleSelection={true}
+      renderOption={(option) => euiSelectableTemplateSitewideRenderOptions(option, searchValue)}
+      listProps={{
+        rowHeight: SEARCH_MODAL_ROW_HEIGHT,
+        showIcons: false,
+      }}
+      searchProps={{
+        autoFocus: true,
+        value: searchValue,
+        onInput: (e: React.UIEvent<HTMLInputElement>) => setSearchValue(e.currentTarget.value),
+        'data-test-subj': `${SEARCH_MODAL_SELECTOR_PREFIX}Input`,
+        inputRef: setSearchRef,
+        compressed: false,
+        'aria-label': i18nStrings.placeholderText,
+        placeholder: i18nStrings.placeholderText,
+        fullWidth: true,
+        isClearable: true,
+      }}
+      noMatchesMessage={
+        searchCharLimitExceeded ? undefined : <SearchPlaceholder basePath={basePathUrl} />
+      }
+      searchable
+      emptyMessage={<EmptyMessage />}
+    >
+      {(list, search) => (
+        <>
+          <EuiModalHeader css={headerStyles}>{search}</EuiModalHeader>
+          <EuiHorizontalRule margin="none" />
+          <EuiModalBody css={bodyStyles}>
+            {searchCharLimitExceeded ? (
+              <CharLimitExceededMessage basePathUrl={basePathUrl} />
+            ) : (
+              list
+            )}
+          </EuiModalBody>
+          <EuiHorizontalRule margin="none" />
+          <EuiModalFooter css={footerStyles}>
+            <SearchFooter shortcutKey={SEARCH_MODAL_KEYBOARD_SHORTCUT.toUpperCase()} />
+          </EuiModalFooter>
+        </>
+      )}
+    </EuiSelectable>
+  );
+};
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/popover_placeholder.tsx b/x-pack/platform/plugins/private/global_search_bar/public/components/search_placeholder.tsx
similarity index 92%
rename from x-pack/platform/plugins/private/global_search_bar/public/components/popover_placeholder.tsx
rename to x-pack/platform/plugins/private/global_search_bar/public/components/search_placeholder.tsx
index 2f0500f9c3993..4ea45851c2024 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/components/popover_placeholder.tsx
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/search_placeholder.tsx
@@ -5,21 +5,20 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
 import React from 'react';
 import { EuiImage, EuiText, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-interface PopoverPlaceholderProps {
+interface SearchPlaceholderProps {
   basePath: string;
   customPlaceholderMessage?: React.ReactNode;
 }
 
-export const PopoverPlaceholder: FC<PopoverPlaceholderProps> = ({
+export const SearchPlaceholder = ({
   basePath,
   customPlaceholderMessage,
-}) => {
+}: SearchPlaceholderProps) => {
   const { colorMode } = useEuiTheme();
 
   return (
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts b/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts
index cacc278c91c75..86c000e364f5f 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts
@@ -5,19 +5,33 @@
  * 2.0.
  */
 
-import type { ChromeStyle } from '@kbn/core-chrome-browser';
 import type { ApplicationStart } from '@kbn/core/public';
 import type { GlobalSearchPluginStart } from '@kbn/global-search-plugin/public';
 import type { SavedObjectTaggingPluginStart } from '@kbn/saved-objects-tagging-plugin/public';
 import type { Observable } from 'rxjs';
+import type { ChromeStyle } from '@kbn/core-chrome-browser';
 import type { EventReporter } from '../telemetry';
 
+export const SEARCH_MODAL_SELECTOR_PREFIX = 'chromeProjectNextSearchModal';
+export const SEARCH_MODAL_HEIGHT = 50;
+export const SEARCH_MODAL_WIDTH = 800;
+export const SEARCH_MODAL_ROW_HEIGHT = 68;
+export const SEARCH_MODAL_KEYBOARD_SHORTCUT = 'k';
+
 /* @internal */
-export interface SearchBarProps {
+export interface SearchProps {
   globalSearch: GlobalSearchPluginStart & { searchCharLimit: number };
   navigateToUrl: ApplicationStart['navigateToUrl'];
   reportEvent: EventReporter;
   taggingApi?: SavedObjectTaggingPluginStart;
   basePathUrl: string;
+}
+
+/* @internal */
+export interface SearchBarProps extends SearchProps {
   chromeStyle$: Observable<ChromeStyle>;
 }
+/* @internal */
+export interface SearchModalProps extends SearchProps {
+  onClose: () => void;
+}
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/hooks/use_search_state.ts b/x-pack/platform/plugins/private/global_search_bar/public/hooks/use_search_state.ts
new file mode 100644
index 0000000000000..84190ba145158
--- /dev/null
+++ b/x-pack/platform/plugins/private/global_search_bar/public/hooks/use_search_state.ts
@@ -0,0 +1,288 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiSelectableTemplateSitewideOption } from '@elastic/eui';
+import type { EuiSelectableOnChangeEvent } from '@elastic/eui/src/components/selectable/selectable';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Subscription } from 'rxjs';
+import type { GlobalSearchFindParams, GlobalSearchResult } from '@kbn/global-search-plugin/public';
+import useDebounce from 'react-use/lib/useDebounce';
+import { apm } from '@elastic/apm-rum';
+import useMountedState from 'react-use/lib/useMountedState';
+import type { SearchSuggestion } from '../suggestions';
+import { getSuggestions } from '../suggestions';
+import type { SearchProps } from '../components/types';
+import { resultToOption, suggestionToOption } from '../lib';
+import { parseSearchParams } from '../search_syntax';
+import { sort } from '../components';
+
+const UNKNOWN_TAG_ID = '__unknown__';
+
+interface UseSearchStateOptions extends Omit<SearchProps, 'basePathUrl'> {
+  /** Called after a result is selected and navigation is triggered. */
+  onResultSelect?: () => void;
+}
+
+export interface SearchStateResult {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  options: EuiSelectableTemplateSitewideOption[];
+  isLoading: boolean;
+  searchCharLimitExceeded: boolean;
+  searchRef: RefObject<HTMLInputElement | null>;
+  setSearchRef: (ref: HTMLInputElement | null) => void;
+  triggerInitialLoad: () => void;
+  onChange: (
+    selection: EuiSelectableTemplateSitewideOption[],
+    event: EuiSelectableOnChangeEvent
+  ) => void;
+}
+
+export const useSearchState = ({
+  globalSearch,
+  taggingApi,
+  navigateToUrl,
+  reportEvent,
+  onResultSelect,
+}: UseSearchStateOptions): SearchStateResult => {
+  const isMounted = useMountedState();
+
+  const [initialLoad, setInitialLoad] = useState(false);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [options, setOptions] = useState<EuiSelectableTemplateSitewideOption[]>([]);
+  const [searchableTypes, setSearchableTypes] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [searchCharLimitExceeded, setSearchCharLimitExceeded] = useState(false);
+
+  const searchSubscription = useRef<Subscription | null>(null);
+  const searchRef = useRef<HTMLInputElement | null>(null);
+
+  const setSearchRef = useCallback((ref: HTMLInputElement | null) => {
+    searchRef.current = ref;
+  }, []);
+
+  // Initialize searchableTypes data
+  useEffect(() => {
+    if (initialLoad) {
+      const fetch = async () => {
+        const types = await globalSearch.getSearchableTypes();
+        setSearchableTypes(types);
+      };
+      fetch();
+    }
+  }, [globalSearch, initialLoad]);
+
+  // Whenever searchValue changes, isLoading = true
+  useEffect(() => {
+    setIsLoading(true);
+  }, [searchValue]);
+
+  // Cleanup subscription when component unmounts
+  useEffect(() => {
+    return () => {
+      searchSubscription.current?.unsubscribe();
+    };
+  }, []);
+
+  const triggerInitialLoad = useCallback(() => {
+    setInitialLoad(true);
+  }, []);
+
+  const loadSuggestions = useCallback(
+    (term: string) => {
+      return getSuggestions({
+        searchTerm: term,
+        searchableTypes,
+        tagCache: taggingApi?.cache,
+      });
+    },
+    [taggingApi, searchableTypes]
+  );
+
+  const setDecoratedOptions = useCallback(
+    (
+      _options: GlobalSearchResult[],
+      suggestions: SearchSuggestion[],
+      searchTagIds: string[] = []
+    ) => {
+      setOptions([
+        ...suggestions.map(suggestionToOption),
+        ..._options.map((option) =>
+          resultToOption(
+            option,
+            searchTagIds?.filter((id) => id !== UNKNOWN_TAG_ID) ?? [],
+            taggingApi?.ui.getTagList
+          )
+        ),
+      ]);
+    },
+    [setOptions, taggingApi]
+  );
+
+  useDebounce(
+    () => {
+      if (initialLoad) {
+        // cancel pending search if not completed yet
+        if (searchSubscription.current) {
+          searchSubscription.current.unsubscribe();
+          searchSubscription.current = null;
+        }
+
+        if (searchValue.length > globalSearch.searchCharLimit) {
+          // setting this will display an error message to the user
+          setSearchCharLimitExceeded(true);
+          return;
+        } else {
+          setSearchCharLimitExceeded(false);
+        }
+
+        const suggestions = loadSuggestions(searchValue.toLowerCase());
+
+        let aggregatedResults: GlobalSearchResult[] = [];
+
+        if (searchValue.length !== 0) {
+          reportEvent.searchRequest();
+        }
+
+        const rawParams = parseSearchParams(searchValue.toLowerCase(), searchableTypes);
+        let tagIds: string[] | undefined;
+        if (taggingApi && rawParams.filters.tags) {
+          tagIds = rawParams.filters.tags.map(
+            (tagName) => taggingApi.ui.getTagIdFromName(tagName) ?? UNKNOWN_TAG_ID
+          );
+        } else {
+          tagIds = undefined;
+        }
+        const searchParams: GlobalSearchFindParams = {
+          term: rawParams.term,
+          types: rawParams.filters.types,
+          tags: tagIds,
+        };
+
+        searchSubscription.current = globalSearch.find(searchParams, {}).subscribe({
+          next: ({ results }) => {
+            if (!isMounted()) {
+              return;
+            }
+
+            if (searchValue.length > 0) {
+              aggregatedResults = [...results, ...aggregatedResults].sort(sort.byScore);
+              setDecoratedOptions(aggregatedResults, suggestions, searchParams.tags);
+              return;
+            }
+
+            // if searchbar is empty, filter to only applications and sort alphabetically
+            results = results.filter(({ type }: GlobalSearchResult) => type === 'application');
+            aggregatedResults = [...results, ...aggregatedResults].sort(sort.byTitle);
+            setDecoratedOptions(aggregatedResults, suggestions, searchParams.tags);
+          },
+          error: (err) => {
+            setIsLoading(false);
+
+            // Not doing anything on error right now because it'll either just show the previous
+            // results or empty results which is basically what we want anyways
+            apm.captureError(err, {
+              labels: {
+                SearchValue: searchValue,
+              },
+            });
+          },
+          complete: () => {
+            setIsLoading(false);
+          },
+        });
+      }
+    },
+    350,
+    [searchValue, loadSuggestions, searchableTypes, initialLoad]
+  );
+
+  const onResultSelectRef = useRef(onResultSelect);
+  onResultSelectRef.current = onResultSelect;
+
+  const onChange = useCallback(
+    (selection: EuiSelectableTemplateSitewideOption[], event: EuiSelectableOnChangeEvent) => {
+      let selectedRank: number | null = null;
+      const selected = selection.find(({ checked }, rank) => {
+        const isChecked = checked === 'on';
+        if (isChecked) {
+          selectedRank = rank + 1;
+        }
+        return isChecked;
+      });
+
+      if (!selected) {
+        return;
+      }
+
+      const selectedLabel = selected.label ?? null;
+
+      // @ts-ignore - ts error is "union type is too complex to express"
+      const { url, type, suggestion } = selected;
+
+      // if the type is a suggestion, we change the query on the input and trigger a new search
+      // by setting the searchValue (only setting the field value does not trigger a search)
+      if (type === '__suggestion__') {
+        setSearchValue(suggestion);
+        return;
+      }
+
+      // errors in tracking should not prevent selection behavior
+      try {
+        if (type === 'application') {
+          const key = selected.key ?? 'unknown';
+          const application = `${key.toLowerCase().replaceAll(' ', '_')}`;
+          reportEvent.navigateToApplication({
+            application,
+            searchValue,
+            selectedLabel,
+            selectedRank,
+          });
+        } else {
+          reportEvent.navigateToSavedObject({
+            type,
+            searchValue,
+            selectedLabel,
+            selectedRank,
+          });
+        }
+      } catch (err) {
+        apm.captureError(err, {
+          labels: {
+            SearchValue: searchValue,
+          },
+        });
+        // eslint-disable-next-line no-console
+        console.log('Error trying to track searchbar metrics', err);
+      }
+
+      if (event.shiftKey) {
+        window.open(url);
+      } else if (event.ctrlKey || event.metaKey) {
+        window.open(url, '_blank');
+      } else {
+        navigateToUrl(url);
+      }
+
+      onResultSelectRef.current?.();
+    },
+    [reportEvent, navigateToUrl, searchValue]
+  );
+
+  return {
+    searchValue,
+    setSearchValue,
+    options,
+    isLoading,
+    searchCharLimitExceeded,
+    onChange,
+    setSearchRef,
+    searchRef,
+    triggerInitialLoad,
+  };
+};
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx b/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
index 80ec27848aacf..e3ebd35c0e7bb 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
+++ b/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
@@ -5,14 +5,27 @@
  * 2.0.
  */
 
-import type { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public';
+import type {
+  CoreSetup,
+  CoreStart,
+  OverlayRef,
+  Plugin,
+  PluginInitializerContext,
+} from '@kbn/core/public';
 import type { GlobalSearchPluginStart } from '@kbn/global-search-plugin/public';
 import type { SavedObjectTaggingPluginStart } from '@kbn/saved-objects-tagging-plugin/public';
 import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
 import React from 'react';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import { SearchBar } from './components/search_bar';
 import type { GlobalSearchBarConfigType } from './types';
 import { EventReporter, eventTypes } from './telemetry';
+import {
+  SEARCH_MODAL_KEYBOARD_SHORTCUT,
+  SEARCH_MODAL_SELECTOR_PREFIX,
+  type SearchProps,
+} from './components/types';
+import { SearchModal } from './components/search_modal';
 
 export interface GlobalSearchBarPluginStartDeps {
   globalSearch: GlobalSearchPluginStart;
@@ -40,26 +53,52 @@ export class GlobalSearchBarPlugin implements Plugin<{}, {}, {}, GlobalSearchBar
     const { application, http } = core;
     const reportEvent = new EventReporter({ analytics: core.analytics, usageCollection });
 
+    const searchProps: SearchProps = {
+      globalSearch: { ...globalSearch, searchCharLimit: this.config.input_max_limit },
+      navigateToUrl: application.navigateToUrl,
+      taggingApi: savedObjectsTagging,
+      basePathUrl: http.basePath.prepend('/plugins/globalSearchBar/assets/'),
+      reportEvent,
+    };
+
+    let activeModalRef: OverlayRef | null = null;
+
+    const toggleSearchModal = () => {
+      if (activeModalRef) {
+        activeModalRef.close();
+        activeModalRef = null;
+        return;
+      }
+      activeModalRef = core.overlays.openModal(
+        toMountPoint(
+          <SearchModal
+            {...searchProps}
+            onClose={() => {
+              activeModalRef?.close();
+              activeModalRef = null;
+            }}
+          />,
+          core
+        ),
+        {
+          className: SEARCH_MODAL_SELECTOR_PREFIX,
+          'data-test-subj': SEARCH_MODAL_SELECTOR_PREFIX,
+          outsideClickCloses: true,
+        }
+      );
+      activeModalRef.onClose.then(() => {
+        activeModalRef = null;
+      });
+    };
+
     core.chrome.next.globalSearch.set({
-      onClick: () => {
-        // TODO: open search modal
-        // eslint-disable-next-line no-console
-        console.log('[GlobalSearch] search button clicked — modal not yet implemented');
-      },
+      onClick: toggleSearchModal,
+      shortcutKey: SEARCH_MODAL_KEYBOARD_SHORTCUT,
     });
 
     core.chrome.navControls.registerCenter({
       order: 1000,
-      content: (
-        <SearchBar
-          globalSearch={{ ...globalSearch, searchCharLimit: this.config.input_max_limit }}
-          navigateToUrl={application.navigateToUrl}
-          taggingApi={savedObjectsTagging}
-          basePathUrl={http.basePath.prepend('/plugins/globalSearchBar/assets/')}
-          chromeStyle$={core.chrome.getChromeStyle$()}
-          reportEvent={reportEvent}
-        />
-      ),
+      content: <SearchBar {...searchProps} chromeStyle$={core.chrome.getChromeStyle$()} />,
     });
 
     return {};
diff --git a/x-pack/platform/plugins/private/global_search_bar/tsconfig.json b/x-pack/platform/plugins/private/global_search_bar/tsconfig.json
index 19d91b17684ad..f86a30e38cccb 100644
--- a/x-pack/platform/plugins/private/global_search_bar/tsconfig.json
+++ b/x-pack/platform/plugins/private/global_search_bar/tsconfig.json
@@ -15,7 +15,8 @@
     "@kbn/saved-objects-tagging-oss-plugin",
     "@kbn/core-chrome-browser",
     "@kbn/config-schema",
-    "@kbn/shared-ux-utility"
+    "@kbn/shared-ux-utility",
+    "@kbn/react-kibana-mount"
   ],
   "exclude": [
     "target/**/*",

From 8d4ccd1eeaf96340aba901c3f415b602ae1bd8cd Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Wed, 8 Apr 2026 22:23:41 +0200
Subject: [PATCH 21/77] Lint and quick check fixes

---
 packages/kbn-optimizer/limits.yml                           | 6 +++---
 .../public/dashboard_top_nav/internal_dashboard_top_nav.tsx | 1 -
 .../plugins/private/translations/translations/de-DE.json    | 2 --
 .../plugins/private/translations/translations/fr-FR.json    | 2 --
 .../plugins/private/translations/translations/ja-JP.json    | 2 --
 .../plugins/private/translations/translations/zh-CN.json    | 2 --
 .../security/plugins/elastic_assistant/public/plugin.tsx    | 2 +-
 7 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index 5e91a482b5ef8..abe9e9af58f95 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -26,7 +26,7 @@ pageLoadAssetSize:
   contentConnectors: 33014
   contentManagement: 8350
   controls: 10300
-  core: 547151
+  core: 604282
   cps: 9209
   crossClusterReplication: 12662
   customIntegrations: 11715
@@ -79,7 +79,7 @@ pageLoadAssetSize:
   fleet: 209495
   genAiSettings: 5663
   globalSearch: 6890
-  globalSearchBar: 26122
+  globalSearchBar: 31178
   globalSearchProviders: 4646
   graph: 9924
   grokdebugger: 5469
@@ -173,7 +173,7 @@ pageLoadAssetSize:
   share: 58677
   slo: 40437
   snapshotRestore: 22068
-  spaces: 28871
+  spaces: 36639
   stackAlerts: 31499
   stackConnectors: 85421
   streams: 12500
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
index 16c9fa3d1400b..deaca8cdaaacf 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -355,7 +355,6 @@ export function InternalDashboardTopNav({
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
               panelStyle={{ maxWidth: 250 }}
-              aria-label={dashboardManagedBadge.getBadgeAriaLabel()}
             >
               <FormattedMessage
                 id="dashboard.managedContentPopoverButton"
diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json
index ad22013e343cd..5b15f47db2175 100644
--- a/x-pack/platform/plugins/private/translations/translations/de-DE.json
+++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json
@@ -17878,10 +17878,8 @@
     "xpack.globalSearchBar.searchBar.placeholder": "Finden Sie Apps, Inhalte und mehr.",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceeded": "Versuchen Sie, nach Anwendungen, Dashboards, Visualisierungen und mehr zu suchen.",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceededHeading": "Search-Zeichenlimit überschritten",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "Befehl + /",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "Shortcut",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.windowsCommandDescription": "Strg + /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.description": "Tastaturkürzel",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.macCommandDescription": "Befehl + /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.windowsCommandDescription": "Strg + /",
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
index dd0c6f8889bac..4d8fe99478e0c 100644
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -18141,10 +18141,8 @@
     "xpack.globalSearchBar.searchBar.placeholder": "Cherchez des applications, du contenu, et plus encore.",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceeded": "Essayez de rechercher des applications, des tableaux de bord, des visualisations, etc.",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceededHeading": "La limite de caractères de recherche a été dépassée",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "Commande + /",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "Raccourci",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.windowsCommandDescription": "Contrôle + /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.description": "Raccourci clavier",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.macCommandDescription": "Commande + /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.windowsCommandDescription": "Contrôle + /",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
index 31f03a74d40d2..7d97e779ad9fa 100644
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -18165,10 +18165,8 @@
     "xpack.globalSearchBar.searchBar.placeholder": "アプリ、コンテンツなどを検索します。",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceeded": "アプリケーション、ダッシュボード、ビジュアライゼーションなどを検索してみてください。",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceededHeading": "検索文字の上限を超えました",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "コマンド+ /",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "ショートカット",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.windowsCommandDescription": "コントロール+ /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.description": "キーボードショートカット",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.macCommandDescription": "コマンド+ /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.windowsCommandDescription": "コントロール+ /",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
index ed2616be9b9e8..e31b94f757dc1 100644
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -18155,10 +18155,8 @@
     "xpack.globalSearchBar.searchBar.placeholder": "查找应用、内容等。",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceeded": "尝试搜索应用程序、仪表板和可视化等。",
     "xpack.globalSearchBar.searchBar.searchCharLimitExceededHeading": "超出了搜索字符限制",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "Command + /",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}",
     "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "快捷方式",
-    "xpack.globalSearchBar.searchBar.shortcutDescription.windowsCommandDescription": "Control + /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.description": "快捷键",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.macCommandDescription": "Command + /",
     "xpack.globalSearchBar.searchBar.shortcutTooltip.windowsCommandDescription": "Control + /",
diff --git a/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx b/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx
index 1a3a92de00ed8..24ed588a86ab3 100644
--- a/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx
+++ b/x-pack/solutions/security/plugins/elastic_assistant/public/plugin.tsx
@@ -89,7 +89,7 @@ export class ElasticAssistantPublicPlugin
     // HeaderNavControls (registerRight mount points). Remove the registerRight call once
     // Chrome Next is the only chrome. See https://github.com/elastic/kibana/issues/260010
     coreStart.chrome.next.aiButton.register({
-      content: (target: HTMLDivElement) => {
+      content: (target: HTMLElement) => {
         const startService = startServices();
         return this.mountAIAssistantButton(target, coreStart, startService);
       },

From 6e1980a66a5913e3a01e855497667af1e81aaf50 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Thu, 9 Apr 2026 10:22:51 +0200
Subject: [PATCH 22/77] [FeatureBranch/DoNotReview][Chrome Next] Make discover
 use ChromeNextHeader (#262106)

## Summary

This PR makes discover use the new app menu API when feature flag is on.

It also makes `title` optional, otherwise the setter would show TS
errors:
```
Argument of type '{ appMenu: AppMenuConfig; }' is not assignable to parameter of type 'ChromeNextHeaderConfig'.
  Property 'title' is missing in type '{ appMenu: AppMenuConfig; }' but required in type 'ChromeNextHeaderConfig'.
```

Closes: https://github.com/elastic/kibana/issues/261913

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../chrome/browser/src/chrome_next/header.ts   |  2 +-
 src/core/packages/chrome/browser/tsconfig.json |  2 +-
 .../discover/public/__mocks__/services.ts      |  1 +
 .../single_tab_view_with_app_menu.tsx          | 18 +++++++++++++++---
 .../components/tabs_view/hide_tabs_bar.tsx     | 14 ++++++++++++--
 .../main/components/tabs_view/tabs_view.tsx    | 16 ++++++++++++++--
 .../shared/discover/public/build_services.ts   |  3 +++
 .../utils/serialization_utils.test.ts          |  1 +
 .../plugins/shared/discover/tsconfig.json      |  1 +
 9 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/core/packages/chrome/browser/src/chrome_next/header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
index e25127cf5bffd..795a68924bb88 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/header.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/header.ts
@@ -20,7 +20,7 @@ export interface ChromeNextHeaderConfig {
    * Can be the app name (e.g. "Discover") or a viewed object
    * (e.g. a saved dashboard name). Single-line, truncated by Chrome if too long.
    */
-  title: string;
+  title?: string;
 
   /**
    * Badges inline next to the title. Chrome shows 1–2 as-is; for 3+, first badge plus "+N" popover
diff --git a/src/core/packages/chrome/browser/tsconfig.json b/src/core/packages/chrome/browser/tsconfig.json
index 425262ddf2a1c..66dc2cfd32820 100644
--- a/src/core/packages/chrome/browser/tsconfig.json
+++ b/src/core/packages/chrome/browser/tsconfig.json
@@ -30,7 +30,7 @@
     "@kbn/deeplinks-workflows",
     "@kbn/deeplinks-agent-builder",
     "@kbn/core-chrome-navigation",
-    "@kbn/core-chrome-sidebar"
+    "@kbn/core-chrome-sidebar",
   ],
   "exclude": [
     "target/**/*",
diff --git a/src/platform/plugins/shared/discover/public/__mocks__/services.ts b/src/platform/plugins/shared/discover/public/__mocks__/services.ts
index 4ce5714b191b1..985491f0733f0 100644
--- a/src/platform/plugins/shared/discover/public/__mocks__/services.ts
+++ b/src/platform/plugins/shared/discover/public/__mocks__/services.ts
@@ -331,6 +331,7 @@ export function createDiscoverServicesMock(): DiscoverServices {
       getCascadeLayoutEnabled: jest.fn(() => false),
       getIsEsqlDefault: jest.fn(() => false),
       getEmbeddableTransformsEnabled: jest.fn(() => true),
+      getIsNextChrome: jest.fn(() => false),
     },
     embeddableEditor: {
       isByValueEditor: jest.fn(() => false),
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx b/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
index 300d38a72f34b..8846dd758ce05 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
@@ -7,19 +7,31 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { AppMenu } from '@kbn/core-chrome-app-menu';
 import { SingleTabView, type SingleTabViewProps } from '.';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { useTopNavMenuItems } from '../top_nav/use_top_nav_menu_items';
 
 export const SingleTabViewWithAppMenu = (props: SingleTabViewProps) => {
-  const { chrome } = useDiscoverServices();
+  const { chrome, discoverFeatureFlags } = useDiscoverServices();
+  const isNextChrome = discoverFeatureFlags.getIsNextChrome();
   const topNavMenuItems = useTopNavMenuItems();
 
+  useEffect(() => {
+    if (isNextChrome && topNavMenuItems) {
+      chrome.next.header.set({ appMenu: topNavMenuItems });
+      return () => {
+        chrome.next.header.set(undefined);
+      };
+    }
+  }, [isNextChrome, topNavMenuItems, chrome.next.header]);
+
   return (
     <>
-      {topNavMenuItems && <AppMenu config={topNavMenuItems} setAppMenu={chrome.setAppMenu} />}
+      {!isNextChrome && topNavMenuItems && (
+        <AppMenu config={topNavMenuItems} setAppMenu={chrome.setAppMenu} />
+      )}
       <SingleTabView {...props} />
     </>
   );
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
index f3f00e8c65cf4..0bae1e40c41a0 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
@@ -24,7 +24,8 @@ export const HideTabsBar: FC<{
   children: ReactNode;
 }> = ({ customizationContext, children }) => {
   const dispatch = useInternalStateDispatch();
-  const { chrome } = useDiscoverServices();
+  const { chrome, discoverFeatureFlags } = useDiscoverServices();
+  const isNextChrome = discoverFeatureFlags.getIsNextChrome();
   const topNavMenuItems = useTopNavMenuItems();
 
   useEffect(() => {
@@ -34,13 +35,22 @@ export const HideTabsBar: FC<{
     };
   }, [dispatch]);
 
+  useEffect(() => {
+    if (isNextChrome && customizationContext.displayMode === 'standalone' && topNavMenuItems) {
+      chrome.next.header.set({ appMenu: topNavMenuItems });
+      return () => {
+        chrome.next.header.set(undefined);
+      };
+    }
+  }, [isNextChrome, customizationContext.displayMode, topNavMenuItems, chrome.next.header]);
+
   return (
     <>
       {
         /**
          * The tabs bar renders the app menu, but it still needs to be shown when tabs are hidden
          */
-        customizationContext.displayMode === 'standalone' && topNavMenuItems && (
+        !isNextChrome && customizationContext.displayMode === 'standalone' && topNavMenuItems && (
           <AppMenu config={topNavMenuItems} setAppMenu={chrome.setAppMenu} />
         )
       }
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
index 5c0019e70e2fc..b944bf68e72f1 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { EuiResizeObserver } from '@elastic/eui';
 import { UnifiedTabs, type UnifiedTabsProps } from '@kbn/unified-tabs';
 import { AppMenuComponent } from '@kbn/core-chrome-app-menu-components';
@@ -39,6 +39,7 @@ export const TabsView = (props: SingleTabViewProps) => {
   const unsavedTabIds = useInternalStateSelector((state) => state.tabs.unsavedIds);
   const currentDataView = useCurrentTabRuntimeState((tab) => tab.currentDataView$);
   const scopedEbtManager = useCurrentTabRuntimeState((tab) => tab.scopedEbtManager$);
+  const isNextChrome = services.discoverFeatureFlags.getIsNextChrome();
 
   const {
     shouldCollapseAppMenu,
@@ -48,6 +49,15 @@ export const TabsView = (props: SingleTabViewProps) => {
     topNavMenuItems,
   } = useAppMenuData({ currentDataView });
 
+  useEffect(() => {
+    if (isNextChrome && topNavMenuItems) {
+      services.chrome.next.header.set({ appMenu: topNavMenuItems });
+      return () => {
+        services.chrome.next.header.set(undefined);
+      };
+    }
+  }, [isNextChrome, topNavMenuItems, services.chrome.next.header]);
+
   const onEvent: UnifiedTabsProps['onEBTEvent'] = useCallback(
     (event) => {
       void scopedEbtManager.trackTabsEvent(event);
@@ -100,7 +110,9 @@ export const TabsView = (props: SingleTabViewProps) => {
             getTopTabMenuItems={getTopTabMenuItems}
             getAdditionalTabMenuItems={getAdditionalTabMenuItems}
             appendRight={
-              <AppMenuComponent config={topNavMenuItems} isCollapsed={shouldCollapseAppMenu} />
+              !isNextChrome ? (
+                <AppMenuComponent config={topNavMenuItems} isCollapsed={shouldCollapseAppMenu} />
+              ) : undefined
             }
           />
         </div>
diff --git a/src/platform/plugins/shared/discover/public/build_services.ts b/src/platform/plugins/shared/discover/public/build_services.ts
index d5b2195c4d00d..303ef057a8c65 100644
--- a/src/platform/plugins/shared/discover/public/build_services.ts
+++ b/src/platform/plugins/shared/discover/public/build_services.ts
@@ -65,6 +65,7 @@ import type { LogsDataAccessPluginStart } from '@kbn/logs-data-access-plugin/pub
 import type { DiscoverSharedPublicStart } from '@kbn/discover-shared-plugin/public';
 import type { CPSPluginStart } from '@kbn/cps/public';
 import type { AlertingV2PublicStart } from '@kbn/alerting-v2-plugin/public';
+import { isNextChrome } from '@kbn/core-chrome-feature-flags';
 import type { DiscoverStartPlugins } from './types';
 import type { DiscoverContextAppLocator } from './application/context/services/locator';
 import type { DiscoverSingleDocLocator } from './application/doc/locator';
@@ -95,6 +96,7 @@ export interface DiscoverFeatureFlags {
   getCascadeLayoutEnabled: () => boolean;
   getIsEsqlDefault: () => boolean;
   getEmbeddableTransformsEnabled: () => boolean;
+  getIsNextChrome: () => boolean;
 }
 
 export interface DiscoverServices {
@@ -212,6 +214,7 @@ export const buildServices = ({
         core.featureFlags.getBooleanValue(IS_ESQL_DEFAULT_FEATURE_FLAG_KEY, false),
       getEmbeddableTransformsEnabled: () =>
         core.featureFlags.getBooleanValue(EMBEDDABLE_TRANSFORMS_FEATURE_FLAG_KEY, true),
+      getIsNextChrome: () => isNextChrome(core.featureFlags),
     },
     docLinks: core.docLinks,
     embeddable: plugins.embeddable,
diff --git a/src/platform/plugins/shared/discover/public/embeddable/utils/serialization_utils.test.ts b/src/platform/plugins/shared/discover/public/embeddable/utils/serialization_utils.test.ts
index 1503a7873b5db..cc2ddb153a8e0 100644
--- a/src/platform/plugins/shared/discover/public/embeddable/utils/serialization_utils.test.ts
+++ b/src/platform/plugins/shared/discover/public/embeddable/utils/serialization_utils.test.ts
@@ -39,6 +39,7 @@ describe('Serialization utils', () => {
       getCascadeLayoutEnabled: jest.fn(() => false),
       getIsEsqlDefault: jest.fn(() => false),
       getEmbeddableTransformsEnabled: jest.fn(() => false),
+      getIsNextChrome: jest.fn(() => false),
     },
   } satisfies DiscoverServices;
 
diff --git a/src/platform/plugins/shared/discover/tsconfig.json b/src/platform/plugins/shared/discover/tsconfig.json
index 3e218435e8a2b..b2257c9f270d6 100644
--- a/src/platform/plugins/shared/discover/tsconfig.json
+++ b/src/platform/plugins/shared/discover/tsconfig.json
@@ -138,6 +138,7 @@
     "@kbn/presentation-util-plugin",
     "@kbn/core-saved-objects-common",
     "@kbn/as-code-filters-constants",
+    "@kbn/core-chrome-feature-flags",
   ],
   "exclude": ["target/**/*"]
 }

From fc3ab3ec9e0cb5b980a4471298a46e36cd196018 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 9 Apr 2026 16:09:25 +0200
Subject: [PATCH 23/77] [FeatureBranch/DoNotReview][Chrome Next] Make User and
 Help menus support onClick items (#262206)

## Summary

Follows up to https://github.com/elastic/kibana/pull/261572,
https://github.com/elastic/kibana/pull/261525

Make side nav menus support onClick tool items:
-Appearance
-Connection details

<img width="444" height="252" alt="Screenshot 2026-04-09 at 10 45 10"
src="https://github.com/user-attachments/assets/7a06d34b-e28e-4ad7-8654-34fb0b056d0a"
/>

<img width="376" height="197" alt="Screenshot 2026-04-09 at 10 45 20"
src="https://github.com/user-attachments/assets/8757dd85-430a-45a0-9f1d-eb588939e3c2"
/>
---
 .../navigation/to_chrome_tool_slots.ts        |  30 +++---
 .../browser/src/chrome_next/user_menu.ts      |   3 +-
 .../navigation/packaging/react/types.ts       |   5 +-
 .../navigation/src/components/navigation.tsx  |  56 ++++++----
 src/core/packages/chrome/navigation/types.ts  |  10 +-
 .../plugins/shared/dashboard/moon.yml         |   2 +-
 .../src/nav_control/nav_control_service.ts    |   7 +-
 .../appearance_selector.test.tsx              | 102 +-----------------
 .../appearance_selector.tsx                   |  91 +++++-----------
 .../appearance_selector/index.ts              |   2 +-
 .../maybe_add_cloud_links/user_menu_links.tsx |  29 +++--
 .../private/global_search_bar/moon.yml        |   1 +
 .../nav_control/nav_control_component.tsx     |  56 ++++------
 .../nav_control/nav_control_service.test.ts   |  11 +-
 .../nav_control/nav_control_service.tsx       |   9 +-
 15 files changed, 151 insertions(+), 263 deletions(-)

diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
index 42b702299c120..71122c4ad93c7 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
@@ -99,13 +99,16 @@ const getUserMenuToolItem = (
     return undefined;
   }
 
-  const items: SecondaryMenuItem[] = config.items.map((item) => ({
-    id: item.id,
-    label: item.label,
-    href: item.href,
-    isExternal: item.isExternal,
-    'data-test-subj': item['data-test-subj'],
-  }));
+  const items: SecondaryMenuItem[] = config.items
+    .filter((item) => Boolean(item.href) || Boolean(item.onClick))
+    .map((item) => ({
+      id: item.id,
+      label: item.label,
+      ...(item.href && { href: item.href }),
+      ...(item.onClick && { onClick: item.onClick }),
+      isExternal: item.isExternal,
+      'data-test-subj': item['data-test-subj'],
+    }));
 
   if (items.length === 0) {
     return undefined;
@@ -158,17 +161,14 @@ const buildHelpSections = (helpLinks: HelpLinks): SecondaryMenuSection[] => {
 const toSecondaryItems = (items: HelpMenuLinkItem[]): SecondaryMenuItem[] =>
   items
     .filter(
-      (
-        item
-      ): item is typeof item & {
-        href: string;
-        label: string;
-      } => Boolean(item.href) && typeof item.label === 'string'
+      (item): item is typeof item & { label: string } =>
+        (Boolean(item.href) || Boolean(item.onClick)) && typeof item.label === 'string'
     )
-    .map(({ id, label, href, 'data-test-subj': dataTestSubj, isExternal }) => ({
+    .map(({ id, label, href, onClick, 'data-test-subj': dataTestSubj, isExternal }) => ({
       id,
       label,
-      href,
+      ...(href && { href }),
+      ...(onClick && { onClick }),
       'data-test-subj': dataTestSubj,
       isExternal,
     }));
diff --git a/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts b/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
index 56e163cfca722..4869c7e0098ec 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
@@ -18,7 +18,8 @@ export interface ChromeNextUserMenuConfig {
 export interface ChromeNextUserMenuItem {
   id: string;
   label: string;
-  href: string;
+  href?: string;
   isExternal?: boolean;
   'data-test-subj'?: string;
+  onClick?: () => void;
 }
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index 7daadb2afa9ca..312cd6b1f8561 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -26,10 +26,11 @@ export type BadgeType = 'beta' | 'techPreview' | 'new';
 
 /**
  * A navigation item within a secondary/nested menu.
+ * At least one of `href` or `onClick` must be provided.
  */
 export interface SecondaryMenuItem {
   /** URL or hash for navigation. */
-  href: string;
+  href?: string;
   /** Unique identifier for this item. */
   id: string;
   /** Display text for the menu item. */
@@ -40,6 +41,8 @@ export interface SecondaryMenuItem {
   badgeType?: BadgeType;
   /** If true, opens link in a new tab with an external icon. */
   isExternal?: boolean;
+  /** Click handler for action items (e.g. opening a flyout or modal). */
+  onClick?: () => void;
 }
 
 /**
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index 4b9a1597de1b6..9cfe7763d287a 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -257,6 +257,7 @@ export const Navigation = ({
                                 const subItemAriaDescribedBy = isFirstSubItem
                                   ? ids.popoverNavigationInstructionsId
                                   : undefined;
+                                const { onClick: subItemOnClick, ...subItemRest } = subItem;
                                 return (
                                   <SideNav.SecondaryMenu.Item
                                     aria-describedby={subItemAriaDescribedBy}
@@ -265,13 +266,14 @@ export const Navigation = ({
                                     isCurrent={actualActiveItemId === subItem.id}
                                     isNew={getIsNewSecondary(subItem.id)}
                                     onClick={() => {
+                                      subItemOnClick?.();
                                       onItemClick?.(subItem);
                                       if (subItem.href) {
                                         closePopover();
                                       }
                                     }}
                                     testSubjPrefix={popoverItemPrefix}
-                                    {...subItem}
+                                    {...subItemRest}
                                   >
                                     {subItem.label}
                                   </SideNav.SecondaryMenu.Item>
@@ -378,22 +380,26 @@ export const Navigation = ({
                                   key={section.id}
                                   label={section.label}
                                 >
-                                  {section.items.map((subItem) => (
-                                    <SideNav.NestedSecondaryMenu.Item
-                                      key={subItem.id}
-                                      isHighlighted={subItem.id === visuallyActiveSubpageId}
-                                      isCurrent={actualActiveItemId === subItem.id}
-                                      isNew={getIsNewSecondary(subItem.id)}
-                                      onClick={() => {
-                                        onItemClick?.(subItem);
-                                        closePopover();
-                                        focusMainContent();
-                                      }}
-                                      {...subItem}
-                                    >
-                                      {subItem.label}
-                                    </SideNav.NestedSecondaryMenu.Item>
-                                  ))}
+                                  {section.items.map((subItem) => {
+                                    const { onClick: subItemOnClick, ...subItemRest } = subItem;
+                                    return (
+                                      <SideNav.NestedSecondaryMenu.Item
+                                        key={subItem.id}
+                                        isHighlighted={subItem.id === visuallyActiveSubpageId}
+                                        isCurrent={actualActiveItemId === subItem.id}
+                                        isNew={getIsNewSecondary(subItem.id)}
+                                        onClick={() => {
+                                          subItemOnClick?.();
+                                          onItemClick?.(subItem);
+                                          closePopover();
+                                          focusMainContent();
+                                        }}
+                                        {...subItemRest}
+                                      >
+                                        {subItem.label}
+                                      </SideNav.NestedSecondaryMenu.Item>
+                                    );
+                                  })}
                                 </SideNav.NestedSecondaryMenu.Section>
                               ))}
                             </>
@@ -470,6 +476,7 @@ export const Navigation = ({
                       const ariaDescribedBy = isFirstItem
                         ? secondaryNavigationInstructionsId
                         : undefined;
+                      const { onClick: subItemOnClick, ...subItemRest } = subItem;
 
                       return (
                         <SideNav.SecondaryMenu.Item
@@ -478,9 +485,12 @@ export const Navigation = ({
                           isCurrent={actualActiveItemId === subItem.id}
                           isHighlighted={subItem.id === visuallyActiveSubpageId}
                           isNew={getIsNewSecondary(subItem.id)}
-                          onClick={() => onItemClick?.(subItem)}
+                          onClick={() => {
+                            subItemOnClick?.();
+                            onItemClick?.(subItem);
+                          }}
                           testSubjPrefix={sidePanelItemPrefix}
-                          {...subItem}
+                          {...subItemRest}
                         >
                           {subItem.label}
                         </SideNav.SecondaryMenu.Item>
@@ -570,6 +580,7 @@ const renderFooterNavItems = ({
                     const subItemAriaDescribedBy = isFirstSubItem
                       ? ids.popoverNavigationInstructionsId
                       : undefined;
+                    const { onClick: subItemOnClick, ...subItemRest } = subItem;
 
                     return (
                       <SideNav.SecondaryMenu.Item
@@ -579,12 +590,13 @@ const renderFooterNavItems = ({
                         isCurrent={actualActiveItemId === subItem.id}
                         isNew={getIsNewSecondary(subItem.id)}
                         onClick={() => {
+                          subItemOnClick?.();
                           onItemClick?.(subItem);
                           if (subItem.href) {
                             closePopover();
                           }
                         }}
-                        {...subItem}
+                        {...subItemRest}
                         testSubjPrefix={popoverItemPrefix}
                       >
                         {subItem.label}
@@ -671,6 +683,7 @@ const renderToolItems = ({
                     const subItemAriaDescribedBy = isFirstSubItem
                       ? ids.popoverNavigationInstructionsId
                       : undefined;
+                    const { onClick: subItemOnClick, ...subItemRest } = subItem;
 
                     return (
                       <SideNav.SecondaryMenu.Item
@@ -680,9 +693,10 @@ const renderToolItems = ({
                         isCurrent={false}
                         isNew={false}
                         onClick={() => {
+                          subItemOnClick?.();
                           closePopover();
                         }}
-                        {...subItem}
+                        {...subItemRest}
                         testSubjPrefix={popoverItemPrefix}
                       >
                         {subItem.label}
diff --git a/src/core/packages/chrome/navigation/types.ts b/src/core/packages/chrome/navigation/types.ts
index 10c9f9e1bad5a..4b0fc7c1faa02 100644
--- a/src/core/packages/chrome/navigation/types.ts
+++ b/src/core/packages/chrome/navigation/types.ts
@@ -15,12 +15,14 @@ export type BadgeType = 'beta' | 'techPreview' | 'new';
 /**
  * A navigation item within a secondary/nested menu.
  * Secondary items appear when a top-level navigation item with sections is clicked or hovered.
+ *
+ * At least one of `href` or `onClick` must be provided.
  */
 export interface SecondaryMenuItem {
   /**
-   * The URL for the menu item link.
+   * (optional) The URL for the menu item link.
    */
-  href: string;
+  href?: string;
   /**
    * The unique identifier of the menu item.
    */
@@ -41,6 +43,10 @@ export interface SecondaryMenuItem {
    * (optional) Whether the link opens in a new tab.
    */
   isExternal?: boolean;
+  /**
+   * (optional) Click handler for action items (e.g. opening a flyout or modal).
+   */
+  onClick?: () => void;
 }
 
 /**
diff --git a/src/platform/plugins/shared/dashboard/moon.yml b/src/platform/plugins/shared/dashboard/moon.yml
index 667d1e67a75db..32346e1d65f4c 100644
--- a/src/platform/plugins/shared/dashboard/moon.yml
+++ b/src/platform/plugins/shared/dashboard/moon.yml
@@ -126,8 +126,8 @@ dependsOn:
   - '@kbn/core-http-common'
   - '@kbn/core-http-server-mocks'
   - '@kbn/core-http-browser'
-  - '@kbn/core-chrome-browser'
   - '@kbn/lens-common'
+  - '@kbn/core-chrome-browser'
 tags:
   - plugin
   - prod
diff --git a/x-pack/platform/packages/shared/security/plugin_types_public/src/nav_control/nav_control_service.ts b/x-pack/platform/packages/shared/security/plugin_types_public/src/nav_control/nav_control_service.ts
index 0163725f03126..c13653bd60fc5 100644
--- a/x-pack/platform/packages/shared/security/plugin_types_public/src/nav_control/nav_control_service.ts
+++ b/x-pack/platform/packages/shared/security/plugin_types_public/src/nav_control/nav_control_service.ts
@@ -6,18 +6,15 @@
  */
 
 import type { IconType } from '@elastic/eui';
-import type { MouseEvent, ReactNode } from 'react';
 import type { Observable } from 'rxjs';
 
 export interface UserMenuLink {
   label: string;
   iconType: IconType;
-  href: string;
+  href?: string;
   order?: number;
   setAsProfile?: boolean;
-  onClick?: (event: MouseEvent<Element>) => void;
-  /** Render a custom ReactNode instead of the default <EuiContextMenuItem /> */
-  content?: ReactNode | ((args: { closePopover: () => void }) => ReactNode);
+  onClick?: () => void;
 }
 
 export interface SecurityNavControlServiceStart {
diff --git a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.test.tsx b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.test.tsx
index 9765c930b2fe3..b230bc02f306c 100644
--- a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.test.tsx
+++ b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.test.tsx
@@ -5,58 +5,11 @@
  * 2.0.
  */
 
-import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
-
 import { coreMock } from '@kbn/core/public/mocks';
 import { securityMock } from '@kbn/security-plugin/public/mocks';
-import { useUpdateUserProfile } from '@kbn/user-profile-components';
-import { AppearanceSelector } from './appearance_selector';
-
-jest.mock('./appearance_modal', () => ({
-  AppearanceModal: jest.fn().mockImplementation(({ closeModal, uiSettingsClient }) => {
-    return (
-      <div data-test-subj="appearance-modal">
-        <div data-test-subj="color-mode-group" />
-        <div data-test-subj="contrast-mode-group" />
-        <button data-test-subj="appearanceModalDiscardButton" onClick={closeModal}>
-          Discard
-        </button>
-        <button
-          data-test-subj="appearanceModalSaveButton"
-          onClick={async () => {
-            await uiSettingsClient.set('theme:darkMode', 'dark');
-            await uiSettingsClient.set('theme:contrastMode', 'high');
-            closeModal();
-          }}
-        >
-          Save changes
-        </button>
-      </div>
-    );
-  }),
-}));
-
-jest.mock('@kbn/user-profile-components', () => {
-  const original = jest.requireActual('@kbn/user-profile-components');
-  return {
-    ...original,
-    useUpdateUserProfile: jest.fn().mockImplementation(() => ({
-      userProfileData: {
-        userSettings: {
-          darkMode: 'light',
-          contrastMode: 'standard',
-        },
-      },
-      isLoading: false,
-      update: jest.fn(),
-      userProfileLoaded: true,
-    })),
-  };
-});
+import { openAppearanceModal } from './appearance_selector';
 
-describe('AppearanceSelector', () => {
-  const closePopover = jest.fn();
+describe('openAppearanceModal', () => {
   let core: ReturnType<typeof coreMock.createStart>;
   let security: ReturnType<typeof securityMock.createStart>;
 
@@ -64,59 +17,14 @@ describe('AppearanceSelector', () => {
     core = coreMock.createStart();
     security = securityMock.createStart();
 
-    (useUpdateUserProfile as jest.Mock).mockImplementation(() => ({
-      userProfileData: {
-        userSettings: {
-          darkMode: 'light',
-          contrastMode: 'standard',
-        },
-      },
-      isLoading: false,
-      update: jest.fn(),
-      userProfileLoaded: true,
-    }));
-
-    // Mock the openModal to return a ref with proper close method
     core.overlays.openModal.mockImplementation(() => ({
       close: jest.fn(),
       onClose: Promise.resolve(),
     }));
   });
 
-  it('renders correctly and opens the appearance modal', () => {
-    const { getByTestId } = render(
-      <AppearanceSelector
-        core={core}
-        security={security}
-        closePopover={closePopover}
-        isServerless={false}
-      />
-    );
-
-    const appearanceSelector = getByTestId('appearanceSelector');
-    fireEvent.click(appearanceSelector);
-
-    expect(core.overlays.openModal).toHaveBeenCalled();
-    expect(closePopover).toHaveBeenCalled();
-  });
-
-  it('does not render when appearance is not visible', () => {
-    (useUpdateUserProfile as jest.Mock).mockImplementation(() => ({
-      userProfileData: null,
-      isLoading: false,
-      update: jest.fn(),
-      userProfileLoaded: true,
-    }));
-
-    const { queryByTestId } = render(
-      <AppearanceSelector
-        core={core}
-        security={security}
-        closePopover={closePopover}
-        isServerless={false}
-      />
-    );
-
-    expect(queryByTestId('appearanceSelector')).toBeNull();
+  it('opens the appearance modal', () => {
+    openAppearanceModal({ core, security, isServerless: false });
+    expect(core.overlays.openModal).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.tsx b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.tsx
index 2cce0ef2233ae..eed4c93f88982 100644
--- a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.tsx
+++ b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.tsx
@@ -5,9 +5,7 @@
  * 2.0.
  */
 
-import React, { useRef } from 'react';
-import { EuiContextMenuItem } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import React from 'react';
 import type { SecurityPluginStart } from '@kbn/security-plugin/public';
 import { UserProfilesKibanaProvider } from '@kbn/user-profile-components';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
@@ -15,75 +13,40 @@ import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { OverlayRef } from '@kbn/core-mount-utils-browser';
 
 import { AppearanceModal } from './appearance_modal';
-import { useAppearance } from './use_appearance_hook';
 
-interface Props {
-  security: SecurityPluginStart;
+interface OpenAppearanceModalParams {
   core: CoreStart;
-  closePopover: () => void;
+  security: SecurityPluginStart;
   isServerless: boolean;
 }
 
-export const AppearanceSelector = ({ security, core, closePopover, isServerless }: Props) => {
-  return (
-    <UserProfilesKibanaProvider core={core} security={security} toMountPoint={toMountPoint}>
-      <AppearanceSelectorUI
-        core={core}
-        security={security}
-        closePopover={closePopover}
-        isServerless={isServerless}
-      />
-    </UserProfilesKibanaProvider>
-  );
-};
-
-function AppearanceSelectorUI({ security, core, closePopover, isServerless }: Props) {
-  const { isVisible } = useAppearance({
-    uiSettingsClient: core.uiSettings,
-    defaultColorMode: 'space_default',
-    defaultContrastMode: 'standard',
-  });
+let appearanceModalRef: OverlayRef | null = null;
 
-  const modalRef = useRef<OverlayRef | null>(null);
+export const openAppearanceModal = ({
+  core,
+  security,
+  isServerless,
+}: OpenAppearanceModalParams) => {
+  if (appearanceModalRef) {
+    return;
+  }
 
   const closeModal = () => {
-    modalRef.current?.close();
-    modalRef.current = null;
+    appearanceModalRef?.close();
+    appearanceModalRef = null;
   };
 
-  const openModal = () => {
-    modalRef.current = core.overlays.openModal(
-      toMountPoint(
-        <UserProfilesKibanaProvider core={core} security={security} toMountPoint={toMountPoint}>
-          <AppearanceModal
-            closeModal={closeModal}
-            uiSettingsClient={core.uiSettings}
-            isServerless={isServerless}
-          />
-        </UserProfilesKibanaProvider>,
-        core
-      ),
-      { 'data-test-subj': 'appearanceModal', maxWidth: 600 }
-    );
-  };
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <EuiContextMenuItem
-      icon="brush"
-      size="s"
-      onClick={() => {
-        openModal();
-        closePopover();
-      }}
-      data-test-subj="appearanceSelector"
-    >
-      {i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceLinkText', {
-        defaultMessage: 'Appearance',
-      })}
-    </EuiContextMenuItem>
+  appearanceModalRef = core.overlays.openModal(
+    toMountPoint(
+      <UserProfilesKibanaProvider core={core} security={security} toMountPoint={toMountPoint}>
+        <AppearanceModal
+          closeModal={closeModal}
+          uiSettingsClient={core.uiSettings}
+          isServerless={isServerless}
+        />
+      </UserProfilesKibanaProvider>,
+      core
+    ),
+    { 'data-test-subj': 'appearanceModal', maxWidth: 600 }
   );
-}
+};
diff --git a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/index.ts b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/index.ts
index cad2bbd3d6ae4..e420eaef2d49c 100644
--- a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/index.ts
+++ b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { AppearanceSelector } from './appearance_selector';
+export { openAppearanceModal } from './appearance_selector';
diff --git a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/user_menu_links.tsx b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/user_menu_links.tsx
index f72dca1293fd9..33132ed1a11df 100644
--- a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/user_menu_links.tsx
+++ b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/user_menu_links.tsx
@@ -5,12 +5,11 @@
  * 2.0.
  */
 
-import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { CloudStart } from '@kbn/cloud-plugin/public';
 import type { SecurityPluginStart, UserMenuLink } from '@kbn/security-plugin/public';
 import type { CoreStart } from '@kbn/core/public';
-import { AppearanceSelector } from './appearance_selector';
+import { openAppearanceModal } from './appearance_selector';
 
 export const createUserMenuLinks = async ({
   core,
@@ -62,20 +61,18 @@ export const createUserMenuLinks = async ({
     });
   }
 
-  userMenuLinks.push({
-    content: ({ closePopover }) => (
-      <AppearanceSelector
-        core={core}
-        security={security}
-        closePopover={closePopover}
-        isServerless={isServerless}
-      />
-    ),
-    order: 400,
-    label: '',
-    iconType: '',
-    href: '',
-  });
+  if (!core.uiSettings.isOverridden('theme:darkMode')) {
+    userMenuLinks.push({
+      label: i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceLinkText', {
+        defaultMessage: 'Appearance',
+      }),
+      iconType: 'brush',
+      onClick: () => {
+        openAppearanceModal({ core, security, isServerless });
+      },
+      order: 400,
+    });
+  }
 
   return userMenuLinks;
 };
diff --git a/x-pack/platform/plugins/private/global_search_bar/moon.yml b/x-pack/platform/plugins/private/global_search_bar/moon.yml
index f1dcc5d07b689..3bc7015ef0fd7 100644
--- a/x-pack/platform/plugins/private/global_search_bar/moon.yml
+++ b/x-pack/platform/plugins/private/global_search_bar/moon.yml
@@ -28,6 +28,7 @@ dependsOn:
   - '@kbn/core-chrome-browser'
   - '@kbn/config-schema'
   - '@kbn/shared-ux-utility'
+  - '@kbn/react-kibana-mount'
 tags:
   - plugin
   - prod
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
index fa024c62bf9b0..e9a7c4e2aaf66 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
@@ -15,8 +15,8 @@ import {
   EuiLoadingSpinner,
   EuiPopover,
 } from '@elastic/eui';
-import type { FunctionComponent, MouseEvent, ReactNode } from 'react';
-import React, { Fragment, useState } from 'react';
+import type { FunctionComponent } from 'react';
+import React, { useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 
@@ -28,9 +28,8 @@ import { UserAvatar, type UserProfileAvatarData } from '@kbn/user-profile-compon
 import { getUserDisplayName, isUserAnonymous } from '../../common/model';
 import { useCurrentUser, useUserProfile } from '../components';
 
-type ContextMenuItem = Omit<EuiContextMenuPanelItemDescriptor, 'content' | 'onClick'> & {
-  content?: ReactNode | ((args: { closePopover: () => void }) => ReactNode);
-  onClick?: (event: MouseEvent<Element>) => void;
+type ContextMenuItem = Omit<EuiContextMenuPanelItemDescriptor, 'onClick'> & {
+  onClick?: () => void;
 };
 
 interface ContextMenuProps {
@@ -40,31 +39,23 @@ interface ContextMenuProps {
 
 const ContextMenuContent = ({ items, closePopover }: ContextMenuProps) => {
   return (
-    <>
-      <EuiContextMenuPanel>
-        {items.map((item, i) => {
-          if (item.content) {
-            return (
-              <Fragment key={i}>
-                {typeof item.content === 'function' ? item.content({ closePopover }) : item.content}
-              </Fragment>
-            );
-          }
-          return (
-            <EuiContextMenuItem
-              key={i}
-              icon={item.icon}
-              size="s"
-              href={item.href}
-              onClick={item.onClick}
-              data-test-subj={item['data-test-subj']}
-            >
-              {item.name}
-            </EuiContextMenuItem>
-          );
-        })}
-      </EuiContextMenuPanel>
-    </>
+    <EuiContextMenuPanel>
+      {items.map((item, i) => (
+        <EuiContextMenuItem
+          key={i}
+          icon={item.icon}
+          size="s"
+          href={item.href}
+          onClick={() => {
+            item.onClick?.();
+            if (!item.href) closePopover();
+          }}
+          data-test-subj={item['data-test-subj']}
+        >
+          {item.name}
+        </EuiContextMenuItem>
+      ))}
+    </EuiContextMenuPanel>
   );
 };
 
@@ -117,13 +108,12 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
   if (userMenuLinks.length) {
     const userMenuLinkMenuItems = userMenuLinks
       .sort(({ order: orderA = Infinity }, { order: orderB = Infinity }) => orderA - orderB)
-      .map(({ label, iconType, href, onClick, content }: UserMenuLink) => ({
+      .map(({ label, iconType, href, onClick }: UserMenuLink) => ({
         name: label,
         icon: <EuiIcon type={iconType} size="m" />,
         href,
         onClick,
         'data-test-subj': `userMenuLink__${label}`,
-        content,
       }));
     items.push(...userMenuLinkMenuItems);
   }
@@ -132,7 +122,7 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
   const hasCustomProfileLinks = userMenuLinks.some(({ setAsProfile }) => setAsProfile === true);
 
   if (!isAnonymous && !hasCustomProfileLinks) {
-    const profileMenuItem: EuiContextMenuPanelItemDescriptor = {
+    const profileMenuItem: ContextMenuItem = {
       name: (
         <FormattedMessage
           id="xpack.security.navControlComponent.editProfileLinkText"
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.test.ts b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.test.ts
index 3fae577ceeb7e..625f3f7b7dc6d 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.test.ts
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.test.ts
@@ -45,10 +45,13 @@ const validLicense = {
 
 const authc = authenticationMock.createStart();
 
-const mockApiClients = (http: ReturnType<typeof httpServiceMock.createStartContract>) => ({
-  userProfiles: new UserProfileAPIClient(http),
-  users: new UserAPIClient(http),
-});
+const mockApiClients = (http: ReturnType<typeof httpServiceMock.createStartContract>) => {
+  http.get.mockResolvedValue({});
+  return {
+    userProfiles: new UserProfileAPIClient(http),
+    users: new UserAPIClient(http),
+  };
+};
 
 describe('SecurityNavControlService', () => {
   it('registers a ReactNode content for the nav control', () => {
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
index e4d84f8f7b42e..af24eb926241d 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
@@ -171,13 +171,18 @@ export class SecurityNavControlService {
           }
 
           for (const link of sorted) {
-            if (link.content || !link.label || !link.href) {
+            if (!link.label || (!link.href && !link.onClick)) {
               continue;
             }
             items.push({
               id: `userMenuLink__${link.label}`,
               label: link.label,
-              href: link.href,
+              ...(link.href && { href: link.href }),
+              ...(link.onClick && {
+                onClick: () => {
+                  link.onClick?.();
+                },
+              }),
               'data-test-subj': `userMenuLink__${link.label}`,
             });
           }

From b5a7adb697d0fa494675e238942030fa797754f3 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Fri, 10 Apr 2026 14:50:06 +0200
Subject: [PATCH 24/77] [Chrome Next] Pivot: revert sidenav rendering glue and
 navigation package (#262524)

Part of elastic/kibana-team#3115

## Summary

After the Chrome-Next pivot (keeping the global header instead of
eliminating it), the sidenav no longer needs to render
globalSearch/userMenu/spaceSelector tool items. This PR removes the
sidenav rendering glue and resets the navigation package to main:

- Remove `to_chrome_tool_slots.ts` and the `combineLatest` subscription
in `navigation.tsx` that wired `chrome.next` APIs to sidenav tool slots
- Reset `@kbn/core-chrome-navigation` package to upstream main,
reverting ToolItem renderContent/renderPopover, IconButton,
HeaderToolbar/FooterToolbar, and related types/stories/tests
- Add missing `@kbn/core-chrome-feature-flags` dependency to Discover's
`moon.yml`

The `chrome.next.globalSearch`, `chrome.next.userMenu`, and
`chrome.next.spaceSelector` APIs are intentionally kept. They will be
connected to the global header in a follow-up. Even though they will
most likely need significant changes.
---
 .../project/sidenav/navigation/navigation.tsx |  51 +-
 .../navigation/to_chrome_tool_slots.ts        | 174 -------
 .../packages/chrome/navigation/README.mdx     |  31 --
 src/core/packages/chrome/navigation/index.ts  |   2 -
 .../chrome/navigation/packaging/README.md     |   3 -
 .../navigation/packaging/example/src/app.tsx  |  36 +-
 .../packaging/react/type_validation.ts        |  63 ---
 .../navigation/packaging/react/types.ts       |  47 +-
 .../src/__stories__/navigation.stories.tsx    | 243 +--------
 .../__snapshots__/both_modes.test.tsx.snap    |  71 ++-
 .../collapsed_mode.test.tsx.snap              |  83 ++-
 .../__snapshots__/expanded_mode.test.tsx.snap |  71 ++-
 .../src/__tests__/both_modes.test.tsx         |   6 +-
 .../src/components/footer/index.tsx           | 133 ++++-
 .../navigation/src/components/footer/item.tsx | 134 ++++-
 .../navigation/src/components/footer/nav.tsx  | 118 -----
 .../src/components/footer/toolbar.tsx         |  73 ---
 .../src/components/header/index.tsx           |  52 --
 .../src/components/icon_button/index.tsx      | 194 -------
 .../src/components/menu_item/index.tsx        |   8 +-
 .../navigation/src/components/navigation.tsx  | 472 +++++-------------
 .../src/components/side_nav/index.tsx         |  14 +-
 .../src/components/side_nav/logo.tsx          |  21 +-
 .../src/components/side_nav/popover.tsx       |  67 +--
 .../src/components/side_nav/side_panel.tsx    |   2 +-
 .../src/components/tool_item/index.tsx        |  35 --
 .../navigation/src/hooks/use_navigation.ts    |   2 +-
 .../src/hooks/use_tool_shortcuts.ts           |  50 --
 .../navigation/src/utils/get_has_submenu.ts   |   9 +-
 src/core/packages/chrome/navigation/types.ts  |  62 +--
 src/platform/plugins/shared/discover/moon.yml |   1 +
 31 files changed, 533 insertions(+), 1795 deletions(-)
 delete mode 100644 src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
 delete mode 100644 src/core/packages/chrome/navigation/src/components/footer/nav.tsx
 delete mode 100644 src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx
 delete mode 100644 src/core/packages/chrome/navigation/src/components/header/index.tsx
 delete mode 100644 src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
 delete mode 100644 src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
 delete mode 100644 src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts

diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
index 3cb66391d61b2..de3343b6ee4ca 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
@@ -8,19 +8,16 @@
  */
 
 import React, { useMemo } from 'react';
-import { combineLatest, map } from 'rxjs';
+import { map } from 'rxjs';
 import { Navigation as NavigationComponent } from '@kbn/core-chrome-navigation';
 import classnames from 'classnames';
 import type { SolutionId } from '@kbn/core-chrome-browser';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { KibanaSectionErrorBoundary } from '@kbn/shared-ux-error-boundary';
-import type { ToolSlots } from '@kbn/core-chrome-navigation/types';
 import { useBasePath, useIsNextChrome } from '../../../shared/chrome_hooks';
-import { useHelpLinks$ } from '../../../shared/help_links_hooks';
 import type { NavigationItems } from './to_navigation_items';
 import { toNavigationItems } from './to_navigation_items';
-import { buildToolSlots } from './to_chrome_tool_slots';
 import { PanelStateManager } from './panel_state_manager';
 
 export interface ChromeNavigationProps {
@@ -36,13 +33,12 @@ export const Navigation = (props: ChromeNavigationProps) => {
     return null;
   }
 
-  const { navItems, logoItem, activeItemId, solutionId, toolSlots } = state;
+  const { navItems, logoItem, activeItemId, solutionId } = state;
 
   return (
     <KibanaSectionErrorBoundary sectionName={'Navigation'} maxRetries={3}>
       <NavigationComponent
         items={navItems}
-        tools={toolSlots}
         logo={logoItem}
         isCollapsed={props.isCollapsed}
         setWidth={props.setWidth}
@@ -60,19 +56,17 @@ export default Navigation;
 
 interface NavigationState extends NavigationItems {
   solutionId: SolutionId;
-  toolSlots: ToolSlots;
 }
 
 const useNavigationItems = (): NavigationState | null => {
   const chrome = useChromeService();
   const basePath = useBasePath();
-  const helpLinks$ = useHelpLinks$();
   const isNextChrome = useIsNextChrome();
 
   const items$ = useMemo(() => {
     const panelStateManager = new PanelStateManager(basePath.get());
 
-    const navState$ = chrome.project.getNavigation$().pipe(
+    return chrome.project.getNavigation$().pipe(
       map((nav) => {
         const { navItems, logoItem, activeItemId } = toNavigationItems(
           nav.navigationTree,
@@ -81,48 +75,13 @@ const useNavigationItems = (): NavigationState | null => {
         );
         return {
           solutionId: nav.solutionId,
-          // In the `next-chrome` we want to show the elastic logo instead of the default product logo
-          logoItem: isNextChrome
-            ? {
-                ...logoItem,
-                iconType: 'logoElastic' as const,
-                iconColor: 'text' as const,
-                hideLabel: true,
-              }
-            : logoItem,
+          logoItem: isNextChrome ? logoItem : logoItem,
           activeItemId,
           navItems,
         };
       })
     );
-
-    const emptyToolSlots: ToolSlots = { headerTools: [], footerTools: [] };
-
-    const toolSlots$ = isNextChrome
-      ? combineLatest([
-          chrome.next.globalSearch.get$(),
-          chrome.next.spaceSelector.get$(),
-          chrome.next.userMenu.get$(),
-          helpLinks$,
-        ]).pipe(
-          map(([searchConfig, spaceSelectorConfig, userMenuConfig, helpLinks]) =>
-            buildToolSlots({
-              globalSearch: searchConfig,
-              spaceSelector: spaceSelectorConfig,
-              userMenu: userMenuConfig,
-              helpLinks,
-            })
-          )
-        )
-      : [emptyToolSlots];
-
-    return combineLatest([navState$, toolSlots$]).pipe(
-      map(([navState, toolSlots]) => ({
-        ...navState,
-        toolSlots,
-      }))
-    );
-  }, [chrome, basePath, helpLinks$, isNextChrome]);
+  }, [chrome, basePath, isNextChrome]);
 
   return useObservable(items$, null);
 };
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
deleted file mode 100644
index 71122c4ad93c7..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_chrome_tool_slots.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import type {
-  ChromeNextGlobalSearchConfig,
-  ChromeNextSpaceSelectorConfig,
-  ChromeNextUserMenuConfig,
-} from '@kbn/core-chrome-browser';
-import type {
-  SecondaryMenuItem,
-  SecondaryMenuSection,
-  ToolItem,
-  ToolSlots,
-} from '@kbn/core-chrome-navigation/types';
-import type { HelpLinks, HelpMenuLinkItem } from '../../../shared/help_menu_links';
-
-export interface ToolSlotsInput {
-  globalSearch?: ChromeNextGlobalSearchConfig;
-  spaceSelector?: ChromeNextSpaceSelectorConfig;
-  userMenu?: ChromeNextUserMenuConfig;
-  helpLinks: HelpLinks;
-}
-
-export const buildToolSlots = (input: ToolSlotsInput): ToolSlots => ({
-  headerTools: getHeaderTools(input.globalSearch, input.spaceSelector),
-  footerTools: getFooterTools(input.userMenu, input.helpLinks),
-});
-
-const getHeaderTools = (
-  globalSearch?: ChromeNextGlobalSearchConfig,
-  spaceSelector?: ChromeNextSpaceSelectorConfig
-): ToolItem[] => {
-  const tools: ToolItem[] = [];
-
-  const spaceSelectorItem = getSpaceSelectorToolItem(spaceSelector);
-  if (spaceSelectorItem) {
-    tools.push(spaceSelectorItem);
-  }
-
-  if (globalSearch) {
-    tools.push({
-      id: 'globalSearch',
-      label: i18n.translate('core.chrome.projectSideNav.globalSearchLabel', {
-        defaultMessage: 'Search',
-      }),
-      iconType: 'search',
-      onClick: globalSearch.onClick,
-      shortcutKey: globalSearch.shortcutKey,
-    });
-  }
-
-  return tools;
-};
-
-const getSpaceSelectorToolItem = (
-  config: ChromeNextSpaceSelectorConfig | undefined
-): ToolItem | undefined => {
-  if (!config) {
-    return undefined;
-  }
-
-  return {
-    id: 'spaceSelector',
-    label: config.label,
-    renderContent: () => config.renderAvatar(),
-    renderPopover: (closePopover) => config.renderPopover(closePopover),
-    popoverWidth: 360,
-    'data-test-subj': 'sideNavSpaceSelector',
-  };
-};
-
-const getFooterTools = (
-  userMenu: ChromeNextUserMenuConfig | undefined,
-  helpLinks: HelpLinks
-): ToolItem[] => {
-  const tools: ToolItem[] = [];
-  const userMenuItem = getUserMenuToolItem(userMenu);
-  if (userMenuItem) {
-    tools.push(userMenuItem);
-  }
-  const helpItem = getHelpToolItem(helpLinks);
-  if (helpItem) {
-    tools.push(helpItem);
-  }
-  return tools;
-};
-
-const getUserMenuToolItem = (
-  config: ChromeNextUserMenuConfig | undefined
-): ToolItem | undefined => {
-  if (!config) {
-    return undefined;
-  }
-
-  const items: SecondaryMenuItem[] = config.items
-    .filter((item) => Boolean(item.href) || Boolean(item.onClick))
-    .map((item) => ({
-      id: item.id,
-      label: item.label,
-      ...(item.href && { href: item.href }),
-      ...(item.onClick && { onClick: item.onClick }),
-      isExternal: item.isExternal,
-      'data-test-subj': item['data-test-subj'],
-    }));
-
-  if (items.length === 0) {
-    return undefined;
-  }
-
-  return {
-    id: 'userMenu',
-    label: config.label,
-    renderContent: () => config.renderAvatar(),
-    sections: [{ id: 'userMenuLinks', items }],
-    'data-test-subj': 'sideNavUserMenu',
-  };
-};
-
-const getHelpToolItem = (helpLinks: HelpLinks): ToolItem | undefined => {
-  const sections = buildHelpSections(helpLinks);
-
-  if (sections.length === 0) {
-    return undefined;
-  }
-
-  return {
-    id: 'help',
-    label: i18n.translate('core.chrome.projectSideNav.helpLabel', {
-      defaultMessage: 'Help',
-    }),
-    iconType: 'question',
-    sections,
-  };
-};
-
-const buildHelpSections = (helpLinks: HelpLinks): SecondaryMenuSection[] => {
-  const mainItems = toSecondaryItems([...helpLinks.global, ...helpLinks.default]);
-  const extensionItems = toSecondaryItems(helpLinks.extension?.items ?? []);
-
-  const sections: SecondaryMenuSection[] = [];
-  if (mainItems.length > 0) {
-    sections.push({ id: 'help', items: mainItems });
-  }
-  if (extensionItems.length > 0) {
-    sections.push({
-      id: 'helpExtension',
-      label: helpLinks.extension?.label,
-      items: extensionItems,
-    });
-  }
-  return sections;
-};
-
-const toSecondaryItems = (items: HelpMenuLinkItem[]): SecondaryMenuItem[] =>
-  items
-    .filter(
-      (item): item is typeof item & { label: string } =>
-        (Boolean(item.href) || Boolean(item.onClick)) && typeof item.label === 'string'
-    )
-    .map(({ id, label, href, onClick, 'data-test-subj': dataTestSubj, isExternal }) => ({
-      id,
-      label,
-      ...(href && { href }),
-      ...(onClick && { onClick }),
-      'data-test-subj': dataTestSubj,
-      isExternal,
-    }));
diff --git a/src/core/packages/chrome/navigation/README.mdx b/src/core/packages/chrome/navigation/README.mdx
index c207be1058d8b..0448bc52f49f1 100644
--- a/src/core/packages/chrome/navigation/README.mdx
+++ b/src/core/packages/chrome/navigation/README.mdx
@@ -64,30 +64,6 @@ const navigationItems = {
   ],
 };
 
-const navigationTools = {
-  headerTools: [
-    {
-      id: 'search',
-      label: 'Search',
-      iconType: 'search',
-      onClick: () => {},
-    },
-  ],
-  footerTools: [
-    {
-      id: 'help',
-      label: 'Help',
-      iconType: 'question',
-      sections: [
-        {
-          id: 'help-links',
-          items: [{ id: 'docs', label: 'Documentation', href: '/docs' }],
-        },
-      ],
-    },
-  ],
-};
-
 function App() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [activeItemId, setActiveItemId] = useState('dashboard');
@@ -104,7 +80,6 @@ function App() {
         activeItemId={activeItemId}
         isCollapsed={isCollapsed}
         items={navigationItems}
-        tools={navigationTools}
         logo={{
           label: 'Observability',
           id: 'observability',
@@ -185,12 +160,6 @@ export const navigationItems = {
 };
 ```
 
-Navigable content uses `items` only. Optional chrome controls (global search, help menus, etc.) are passed separately through `tools` as `headerTools` and `footerTools`. Those render in dedicated tool groups; `onItemClick` applies only to the logo and navigable items from `items`, not to tool triggers or links shown inside tool popovers.
-
-### Logo
-
-Pass a `SideNavLogo` object as `logo`. Set `hideLabel: true` to omit the text under the icon while the navigation is expanded; `label` is still used for the link’s accessible name and for the tooltip when the navigation is collapsed.
-
 ## Navigation Badges
 
 Navigation badges are visual indicators used in the Kibana side navigation to highlight new or experimental features and improve feature discoverability. The system provides three types of visual indicators:
diff --git a/src/core/packages/chrome/navigation/index.ts b/src/core/packages/chrome/navigation/index.ts
index abf967ffa0a78..544cc0d8bb42c 100644
--- a/src/core/packages/chrome/navigation/index.ts
+++ b/src/core/packages/chrome/navigation/index.ts
@@ -17,6 +17,4 @@ export type {
   SecondaryMenuItem,
   SecondaryMenuSection,
   SideNavLogo,
-  ToolItem,
-  ToolSlots,
 } from './types';
diff --git a/src/core/packages/chrome/navigation/packaging/README.md b/src/core/packages/chrome/navigation/packaging/README.md
index 15c5b4e433b71..3e1325301b599 100644
--- a/src/core/packages/chrome/navigation/packaging/README.md
+++ b/src/core/packages/chrome/navigation/packaging/README.md
@@ -27,7 +27,6 @@ import { OneNavigation } from '@kbn/one-navigation';
 
 <OneNavigation
   items={navigationItems}
-  tools={chromeTools}
   logo={logoConfig}
   isCollapsed={false}
   activeItemId="dashboard"
@@ -37,8 +36,6 @@ import { OneNavigation } from '@kbn/one-navigation';
 />
 ```
 
-`items` contains navigable content only. Optional chrome controls like search and help are passed separately through `tools` (`headerTools` / `footerTools`). `onItemClick` is only invoked for navigable items and the logo.
-
 ### Peer dependencies
 
 | Package | Version |
diff --git a/src/core/packages/chrome/navigation/packaging/example/src/app.tsx b/src/core/packages/chrome/navigation/packaging/example/src/app.tsx
index 739d6a2b669d9..a0b82f9218095 100644
--- a/src/core/packages/chrome/navigation/packaging/example/src/app.tsx
+++ b/src/core/packages/chrome/navigation/packaging/example/src/app.tsx
@@ -16,7 +16,7 @@ import { EuiProvider, EuiSpacer, EuiText, EuiCode, useEuiTheme } from '@elastic/
 // @ts-expect-error — package must be built first.
 import { OneNavigation } from '@kbn/one-navigation';
 // @ts-expect-error — package must be built first.
-import type { MenuItem, SecondaryMenuItem, SideNavLogo, ToolSlots } from '@kbn/one-navigation';
+import type { MenuItem, SecondaryMenuItem, SideNavLogo } from '@kbn/one-navigation';
 
 /** Returns a `className` that adds a divider after the Dashboard nav item. */
 const useNavDividerClass = () => {
@@ -108,39 +108,6 @@ const App = () => {
     href: '#/',
   };
 
-  const tools: ToolSlots = {
-    headerTools: [
-      {
-        id: 'search',
-        label: 'Search',
-        iconType: 'search',
-        onClick: () => {
-          // eslint-disable-next-line no-console
-          console.log('Search tool clicked');
-        },
-      },
-    ],
-    footerTools: [
-      {
-        id: 'help',
-        label: 'Help',
-        iconType: 'question',
-        sections: [
-          {
-            id: 'help-links',
-            items: [
-              {
-                id: 'documentation',
-                label: 'Documentation',
-                href: '#/help/documentation',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  };
-
   const handleItemClick = (item: MenuItem | SecondaryMenuItem | SideNavLogo) => {
     // eslint-disable-next-line no-console
     console.log('Navigation item clicked:', item);
@@ -159,7 +126,6 @@ const App = () => {
         <OneNavigation
           {...{ activeItemId, logo }}
           items={navigationItems}
-          tools={tools}
           isCollapsed={isCollapsed}
           onItemClick={handleItemClick}
           onToggleCollapsed={setIsCollapsed}
diff --git a/src/core/packages/chrome/navigation/packaging/react/type_validation.ts b/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
index 199416bbf5a9c..411668d9146a7 100644
--- a/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/type_validation.ts
@@ -28,26 +28,18 @@
 import type { NavigationProps as SourceNavigationProps } from '../../src/components/navigation';
 import type {
   BadgeType as SourceBadgeType,
-  MenuItem as SourceMenuItem,
-  NavigationStructure as SourceNavigationStructure,
   SecondaryMenuItem as SourceSecondaryMenuItem,
   SecondaryMenuSection as SourceSecondaryMenuSection,
   SideNavLogo as SourceSideNavLogo,
-  ToolItem as SourceToolItem,
-  ToolSlots as SourceToolSlots,
 } from '../../types';
 
 // Packaged types.
 import type {
   BadgeType as PackagedBadgeType,
-  MenuItem as PackagedMenuItem,
-  NavigationStructure as PackagedNavigationStructure,
   NavigationProps as PackagedNavigationProps,
   SecondaryMenuItem as PackagedSecondaryMenuItem,
   SecondaryMenuSection as PackagedSecondaryMenuSection,
   SideNavLogo as PackagedSideNavLogo,
-  ToolItem as PackagedToolItem,
-  ToolSlots as PackagedToolSlots,
 } from './types';
 
 // Simple types must match exactly.
@@ -63,51 +55,6 @@ const _secondaryMenuItem: PackagedSecondaryMenuItem = {} as SourceSecondaryMenuI
 const _secondaryMenuSection: PackagedSecondaryMenuSection = {} as SourceSecondaryMenuSection;
 const _sideNavLogo: PackagedSideNavLogo = {} as SourceSideNavLogo;
 
-type NormalizedSourceMenuItem = Omit<SourceMenuItem, 'iconType'> & { iconType: string };
-
-type ToolItemStrippedFields = 'iconType' | 'renderContent' | 'renderPopover';
-
-type NormalizedSourceToolItem = Omit<SourceToolItem, ToolItemStrippedFields> & {
-  iconType?: string;
-};
-type NormalizedPackagedToolItem = Omit<PackagedToolItem, ToolItemStrippedFields> & {
-  iconType?: string;
-};
-
-type NormalizedSourceNavigationStructure = Omit<
-  SourceNavigationStructure,
-  'footerItems' | 'primaryItems'
-> & {
-  footerItems: NormalizedSourceMenuItem[];
-  primaryItems: NormalizedSourceMenuItem[];
-};
-type NormalizedSourceToolSlots = Omit<SourceToolSlots, 'headerTools' | 'footerTools'> & {
-  headerTools?: NormalizedSourceToolItem[];
-  footerTools?: NormalizedSourceToolItem[];
-};
-type NormalizedPackagedToolSlots = Omit<PackagedToolSlots, 'headerTools' | 'footerTools'> & {
-  headerTools?: NormalizedPackagedToolItem[];
-  footerTools?: NormalizedPackagedToolItem[];
-};
-
-const _menuItem: PackagedMenuItem = {} as NormalizedSourceMenuItem;
-const _toolItemForward: NormalizedPackagedToolItem = {} as NormalizedSourceToolItem;
-const _toolItemReverse: NormalizedSourceToolItem = {} as NormalizedPackagedToolItem;
-
-type SourceRenderContentParam = Parameters<NonNullable<SourceToolItem['renderContent']>>[0];
-type PackagedRenderContentParam = Parameters<NonNullable<PackagedToolItem['renderContent']>>[0];
-const _renderContentParamForward: PackagedRenderContentParam = {} as SourceRenderContentParam;
-const _renderContentParamReverse: SourceRenderContentParam = {} as PackagedRenderContentParam;
-
-type SourceRenderPopoverParam = Parameters<NonNullable<SourceToolItem['renderPopover']>>[0];
-type PackagedRenderPopoverParam = Parameters<NonNullable<PackagedToolItem['renderPopover']>>[0];
-const _renderPopoverParamForward: PackagedRenderPopoverParam = {} as SourceRenderPopoverParam;
-const _renderPopoverParamReverse: SourceRenderPopoverParam = {} as PackagedRenderPopoverParam;
-
-const _toolSlotsForward: NormalizedPackagedToolSlots = {} as NormalizedSourceToolSlots;
-const _toolSlotsReverse: NormalizedSourceToolSlots = {} as NormalizedPackagedToolSlots;
-const _navigationStructure: PackagedNavigationStructure = {} as NormalizedSourceNavigationStructure;
-
 // `NavigationProps` validation — suppressed because `MenuItem.iconType` is
 // intentionally simplified from `IconType` (string | ComponentClass) to `string`.
 // @ts-expect-error — intentional simplification; see above.
@@ -117,16 +64,6 @@ void _badgeType;
 void _secondaryMenuItem;
 void _secondaryMenuSection;
 void _sideNavLogo;
-void _menuItem;
-void _toolItemForward;
-void _toolItemReverse;
-void _renderContentParamForward;
-void _renderContentParamReverse;
-void _renderPopoverParamForward;
-void _renderPopoverParamReverse;
-void _toolSlotsForward;
-void _toolSlotsReverse;
-void _navigationStructure;
 void _navigationProps;
 
 export const TYPE_VALIDATION_PASSED = true;
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index 312cd6b1f8561..1df7bc44dd478 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -26,11 +26,10 @@ export type BadgeType = 'beta' | 'techPreview' | 'new';
 
 /**
  * A navigation item within a secondary/nested menu.
- * At least one of `href` or `onClick` must be provided.
  */
 export interface SecondaryMenuItem {
   /** URL or hash for navigation. */
-  href?: string;
+  href: string;
   /** Unique identifier for this item. */
   id: string;
   /** Display text for the menu item. */
@@ -41,8 +40,6 @@ export interface SecondaryMenuItem {
   badgeType?: BadgeType;
   /** If true, opens link in a new tab with an external icon. */
   isExternal?: boolean;
-  /** Click handler for action items (e.g. opening a flyout or modal). */
-  onClick?: () => void;
 }
 
 /**
@@ -78,38 +75,10 @@ export interface MenuItem {
 }
 
 /**
- * A chrome tool control (search, help, etc.) — not a primary navigation destination.
- *
- * At least one of `iconType` or `renderContent` must be provided.
- * When `renderPopover` is present, it takes precedence over `sections`.
- */
-export interface ToolItem {
-  id: string;
-  label: string;
-  iconType?: string;
-  renderContent?: (state: { isCollapsed: boolean }) => ReactNode;
-  renderPopover?: (closePopover: () => void) => ReactNode;
-  onClick?: () => void;
-  sections?: SecondaryMenuSection[];
-  popoverWidth?: number | string;
-  badgeType?: BadgeType;
-  'data-test-subj'?: string;
-  shortcutKey?: string;
-}
-
-/**
- * Optional tool groupings for the sidenav header and footer toolbars.
- */
-export interface ToolSlots {
-  headerTools?: ToolItem[];
-  footerTools?: ToolItem[];
-}
-
-/**
- * Navigable sidenav structure: primary rail and footer links.
+ * The complete navigation structure containing primary and footer items.
  */
 export interface NavigationStructure {
-  /** Items displayed in the footer navigation area. */
+  /** Items displayed in the footer area of the navigation. */
   footerItems: MenuItem[];
   /** Items displayed in the primary/main area of the navigation. */
   primaryItems: MenuItem[];
@@ -125,12 +94,8 @@ export interface SideNavLogo {
   href: string;
   /** The label for the logo, typically the product name. */
   label: string;
-  /** When `true`, the label is not shown under the icon while expanded; still used for accessibility and collapsed tooltip. */
-  hideLabel?: boolean;
   /** The logo type, e.g. `appObservability`, `appSecurity`, etc. */
   iconType: string;
-  /** Optional color of the logo icon. `'default'` uses brand colors; `'text'` renders monochromatically. */
-  iconColor?: 'default' | 'text';
   /** Optional `data-test-subj` attribute. */
   'data-test-subj'?: string;
 }
@@ -143,15 +108,13 @@ export interface NavigationProps {
   activeItemId?: string;
   /** Whether the navigation is collapsed. */
   isCollapsed: boolean;
-  /** Navigable items (primary and footer links). */
+  /** The navigation structure containing primary, secondary, and footer items. */
   items: NavigationStructure;
-  /** Optional header/footer tool controls (search, help, etc.). */
-  tools?: ToolSlots;
   /** The logo object containing the route ID, href, label, and type. */
   logo: SideNavLogo;
   /** Required by the grid layout to set the width of the navigation slot. */
   setWidth: (width: number) => void;
-  /** Callback fired when a navigable item or the logo is activated. */
+  /** Callback fired when a navigation item is clicked. */
   onItemClick?: (item: MenuItem | SecondaryMenuItem | SideNavLogo) => void;
   /** Callback fired when the collapse button is toggled. Omit to hide the toggle button. */
   onToggleCollapsed?: (isCollapsed: boolean) => void;
diff --git a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
index 4f47f883ebb5a..85f4445d7df23 100644
--- a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
+++ b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx
@@ -9,16 +9,7 @@
 
 import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
-import {
-  EuiAvatar,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiLink,
-  EuiSkipLink,
-  EuiText,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiSkipLink, useEuiTheme } from '@elastic/eui';
 import type { UseEuiTheme } from '@elastic/eui';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { APP_MAIN_SCROLL_CONTAINER_ID } from '@kbn/core-chrome-layout-constants';
@@ -51,188 +42,6 @@ const styles = ({ euiTheme }: UseEuiTheme) => {
 
 type PropsAndArgs = ComponentProps<typeof Navigation>;
 
-const CHROME_TOOLS: NonNullable<PropsAndArgs['tools']> = {
-  headerTools: [
-    {
-      id: 'search',
-      label: 'Search',
-      iconType: 'search',
-      onClick: () => {},
-    },
-    {
-      id: 'notifications',
-      label: 'Notifications',
-      iconType: 'bell',
-      onClick: () => {},
-    },
-    {
-      id: 'quick_settings',
-      label: 'Quick settings',
-      iconType: 'gear',
-      onClick: () => {},
-    },
-  ],
-  footerTools: [
-    {
-      id: 'help',
-      label: 'Help',
-      iconType: 'question',
-      sections: [
-        {
-          id: 'help-links',
-          items: [{ id: 'documentation', label: 'Documentation', href: '/help/documentation' }],
-        },
-      ],
-    },
-  ],
-};
-
-const SpaceBadge = () => (
-  <span
-    css={css`
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 20px;
-      border-radius: 4px;
-      background-color: #f04e98;
-      color: #fff;
-      font-size: 11px;
-      font-weight: 700;
-      line-height: 1;
-    `}
-  >
-    D
-  </span>
-);
-
-const SPACES = [
-  { id: 'default', name: 'Default', color: '#f04e98', initial: 'D' },
-  { id: 'marketing', name: 'Marketing', color: '#00bfb3', initial: 'M' },
-  { id: 'engineering', name: 'Engineering', color: '#6092c0', initial: 'E' },
-  { id: 'sales', name: 'Sales', color: '#d6bf57', initial: 'S' },
-];
-
-const SpacePicker = ({ closePopover }: { closePopover: () => void }) => (
-  <EuiFlexGroup
-    direction="column"
-    gutterSize="none"
-    css={css`
-      padding: 12px;
-    `}
-  >
-    <EuiFlexItem>
-      <EuiText
-        size="xs"
-        css={css`
-          font-weight: 600;
-          margin-bottom: 8px;
-        `}
-      >
-        <p>Spaces</p>
-      </EuiText>
-    </EuiFlexItem>
-    {SPACES.map((space) => (
-      <EuiFlexItem key={space.id}>
-        <button
-          type="button"
-          onClick={closePopover}
-          css={css`
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 4px;
-            border: none;
-            background: transparent;
-            cursor: pointer;
-            width: 100%;
-            border-radius: 4px;
-            &:hover {
-              background: rgba(0, 0, 0, 0.05);
-            }
-          `}
-        >
-          <span
-            css={css`
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              width: 18px;
-              height: 18px;
-              border-radius: 3px;
-              background-color: ${space.color};
-              color: #fff;
-              font-size: 10px;
-              font-weight: 700;
-              flex-shrink: 0;
-            `}
-          >
-            {space.initial}
-          </span>
-          <EuiText size="s">{space.name}</EuiText>
-        </button>
-      </EuiFlexItem>
-    ))}
-    <EuiFlexItem>
-      <EuiHorizontalRule margin="s" />
-      <EuiLink
-        href="/spaces"
-        onClick={(e) => {
-          e.preventDefault();
-          closePopover();
-        }}
-      >
-        <EuiText size="xs">Manage spaces</EuiText>
-      </EuiLink>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
-
-const CUSTOM_TOOLS: NonNullable<PropsAndArgs['tools']> = {
-  headerTools: [
-    {
-      id: 'spaces',
-      label: 'Current space',
-      renderContent: () => <SpaceBadge />,
-      renderPopover: (closePopover) => <SpacePicker closePopover={closePopover} />,
-      popoverWidth: 360,
-    },
-    { id: 'search', label: 'Search', iconType: 'search', onClick: () => {} },
-  ],
-  footerTools: [
-    {
-      id: 'help',
-      label: 'Help',
-      iconType: 'question',
-      sections: [
-        {
-          id: 'help-links',
-          items: [{ id: 'docs', label: 'Documentation', href: '/docs' }],
-        },
-      ],
-    },
-    {
-      id: 'user',
-      label: 'Jane Doe',
-      renderContent: () => <EuiAvatar size="s" name="Jane Doe" />,
-      sections: [
-        {
-          id: 'account',
-          items: [
-            { id: 'profile', label: 'Profile', href: '/profile' },
-            { id: 'preferences', label: 'Preferences', href: '/preferences' },
-          ],
-        },
-        {
-          id: 'session',
-          items: [{ id: 'logout', label: 'Log out', href: '/logout' }],
-        },
-      ],
-    },
-  ],
-};
-
 const PreventLinkNavigation = (Story: StoryFn) => {
   usePreventLinkNavigation();
 
@@ -278,31 +87,6 @@ export const Default: StoryObj<PropsAndArgs> = {
   render: (args) => <ControlledNavigation {...args} />,
 };
 
-export const WithTools: StoryObj<PropsAndArgs> = {
-  name: 'With header and footer tools',
-  decorators: [
-    (Story) => {
-      return (
-        <>
-          <Global styles={styles} />
-          <Story />
-        </>
-      );
-    },
-  ],
-  args: {
-    tools: CHROME_TOOLS,
-    logo: {
-      id: 'observability',
-      href: LOGO.href,
-      label: LOGO.label,
-      iconType: LOGO.iconType,
-      hideLabel: true,
-    },
-  },
-  render: (args) => <ControlledNavigation {...args} />,
-};
-
 export const WithMinimalItems: StoryObj<PropsAndArgs> = {
   name: 'Navigation with Minimal Items',
   decorators: [
@@ -365,31 +149,6 @@ export const WithManyItems: StoryObj<PropsAndArgs> = {
   render: (args) => <ControlledNavigation {...args} />,
 };
 
-export const WithCustomToolItems: StoryObj<PropsAndArgs> = {
-  name: 'With custom tool items (avatar & space badge)',
-  decorators: [
-    (Story) => {
-      return (
-        <>
-          <Global styles={styles} />
-          <Story />
-        </>
-      );
-    },
-  ],
-  args: {
-    tools: CUSTOM_TOOLS,
-    logo: {
-      id: 'observability',
-      href: LOGO.href,
-      label: LOGO.label,
-      iconType: LOGO.iconType,
-      hideLabel: true,
-    },
-  },
-  render: (args) => <ControlledNavigation {...args} />,
-};
-
 export const WithinLayout: StoryObj<PropsAndArgs> = {
   name: 'Navigation within Layout',
   render: (args) => <Layout {...args} />,
diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap
index 75c8a9d96ae83..b1a62356ca22f 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap
+++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap
@@ -11,37 +11,33 @@ exports[`Both modes should render the side navigation 1`] = `
       class="kbnChromeNav-root css-vka7tb-getNavWrapperStyles"
     >
       <div
-        class="css-yp66ul-getTopSectionStyles"
+        class="css-1ja8ujo-wrapperStyles"
+        data-test-subj="kbnChromeNav-logoWrapper"
       >
-        <div
-          class="css-36kal1-wrapperStyles"
-          data-test-subj="kbnChromeNav-logoWrapper"
+        <a
+          aria-label="Solution homepage"
+          class="css-r2tafp-buttonStyles"
+          data-highlighted="false"
+          data-menu-item="true"
+          data-test-subj="kbnChromeNav-logo"
+          href="/"
+          id="home"
         >
-          <a
-            aria-label="Solution homepage"
-            class="css-r2tafp-buttonStyles"
-            data-highlighted="false"
-            data-menu-item="true"
-            data-test-subj="kbnChromeNav-logo"
-            href="/"
-            id="home"
+          <div
+            class="kbnChromeNav-iconWrapper"
           >
-            <div
-              class="kbnChromeNav-iconWrapper"
-            >
-              <span
-                aria-hidden="true"
-                color="currentColor"
-                data-euiicon-type="logoElastic"
-              />
-            </div>
-            <div
-              class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
-            >
-              Solution
-            </div>
-          </a>
-        </div>
+            <span
+              aria-hidden="true"
+              color="currentColor"
+              data-euiicon-type="logoElastic"
+            />
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
+          >
+            Solution
+          </div>
+        </a>
       </div>
       <p
         class="emotion-euiScreenReaderOnly"
@@ -179,9 +175,9 @@ exports[`Both modes should render the side navigation 1`] = `
       >
         You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.
       </p>
-      <nav
-        aria-label="Footer navigation"
-        class="css-q2ubd0-getFooterNavWrapperStyles"
+      <footer
+        aria-label="Side navigation"
+        class="css-18gcnxt-root"
         data-test-subj="kbnChromeNav-footer"
       >
         <div
@@ -367,13 +363,9 @@ exports[`Both modes should render the side navigation 1`] = `
             </span>
           </div>
         </div>
-      </nav>
-      <div
-        aria-label="Side navigation tools"
-        class="css-4egb9v-getFooterToolbarWrapperStyles"
-        data-test-subj="kbnChromeNav-footerToolbar"
-        role="group"
-      >
+        <hr
+          class="euiHorizontalRule emotion-euiHorizontalRule-full-xs-collapseDivider"
+        />
         <div
           class="sideNavCollapseButtonWrapper css-1y5smli-sideNavCollapseButtonWrapper"
         >
@@ -384,6 +376,7 @@ exports[`Both modes should render the side navigation 1`] = `
             aria-pressed="true"
             class="euiButtonIcon emotion-euiButtonIcon-s-empty-text-sideNavCollapseButton"
             data-test-subj="sideNavCollapseButton"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -394,7 +387,7 @@ exports[`Both modes should render the side navigation 1`] = `
             />
           </button>
         </div>
-      </div>
+      </footer>
     </div>
   </div>
 </div>
diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap
index c4de9479fb1f6..bd3d8313bf8c7 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap
+++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap
@@ -10,44 +10,40 @@ exports[`Collapsed mode should render the side navigation 1`] = `
     <div
       class="kbnChromeNav-root css-8nqrb0-getNavWrapperStyles"
     >
-      <div
-        class="css-yp66ul-getTopSectionStyles"
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+        id="generated-id_euiToolTipAnchor"
       >
-        <span
-          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-          id="generated-id_euiToolTipAnchor"
+        <div
+          class="css-1lxxlvf-wrapperStyles"
+          data-test-subj="kbnChromeNav-logoWrapper"
         >
-          <div
-            class="css-1hzlhzk-wrapperStyles"
-            data-test-subj="kbnChromeNav-logoWrapper"
+          <a
+            aria-label="Solution homepage"
+            class="css-r2tafp-buttonStyles"
+            data-highlighted="false"
+            data-menu-item="true"
+            data-test-subj="kbnChromeNav-logo"
+            href="/"
+            id="home"
           >
-            <a
-              aria-label="Solution homepage"
-              class="css-r2tafp-buttonStyles"
-              data-highlighted="false"
-              data-menu-item="true"
-              data-test-subj="kbnChromeNav-logo"
-              href="/"
-              id="home"
+            <div
+              class="kbnChromeNav-iconWrapper"
             >
-              <div
-                class="kbnChromeNav-iconWrapper"
-              >
-                <span
-                  aria-hidden="true"
-                  color="currentColor"
-                  data-euiicon-type="logoElastic"
-                />
-              </div>
-              <div
-                class="euiText emotion-euiText-m-euiScreenReaderOnly"
-              >
-                Solution
-              </div>
-            </a>
-          </div>
-        </span>
-      </div>
+              <span
+                aria-hidden="true"
+                color="currentColor"
+                data-euiicon-type="logoElastic"
+              />
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiScreenReaderOnly"
+            >
+              Solution
+            </div>
+          </a>
+        </div>
+      </span>
       <p
         class="emotion-euiScreenReaderOnly"
         id="main-navigation-instructions_generated-id"
@@ -194,9 +190,9 @@ exports[`Collapsed mode should render the side navigation 1`] = `
       >
         You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.
       </p>
-      <nav
-        aria-label="Footer navigation"
-        class="css-gis2b3-getFooterNavWrapperStyles"
+      <footer
+        aria-label="Side navigation"
+        class="css-3mngca-root"
         data-test-subj="kbnChromeNav-footer"
       >
         <div
@@ -382,13 +378,9 @@ exports[`Collapsed mode should render the side navigation 1`] = `
             </span>
           </div>
         </div>
-      </nav>
-      <div
-        aria-label="Side navigation tools"
-        class="css-3mvpz9-getFooterToolbarWrapperStyles"
-        data-test-subj="kbnChromeNav-footerToolbar"
-        role="group"
-      >
+        <hr
+          class="euiHorizontalRule emotion-euiHorizontalRule-full-xs-collapseDivider"
+        />
         <div
           class="sideNavCollapseButtonWrapper css-1y5smli-sideNavCollapseButtonWrapper"
         >
@@ -399,6 +391,7 @@ exports[`Collapsed mode should render the side navigation 1`] = `
             aria-pressed="false"
             class="euiButtonIcon emotion-euiButtonIcon-s-empty-text-sideNavCollapseButton"
             data-test-subj="sideNavCollapseButton"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -409,7 +402,7 @@ exports[`Collapsed mode should render the side navigation 1`] = `
             />
           </button>
         </div>
-      </div>
+      </footer>
     </div>
   </div>
 </div>
diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap
index 2dd837f864d6f..c61ec302b070b 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap
+++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap
@@ -11,37 +11,33 @@ exports[`Expanded mode should render the side navigation 1`] = `
       class="kbnChromeNav-root css-vka7tb-getNavWrapperStyles"
     >
       <div
-        class="css-yp66ul-getTopSectionStyles"
+        class="css-1ja8ujo-wrapperStyles"
+        data-test-subj="kbnChromeNav-logoWrapper"
       >
-        <div
-          class="css-36kal1-wrapperStyles"
-          data-test-subj="kbnChromeNav-logoWrapper"
+        <a
+          aria-label="Solution homepage"
+          class="css-r2tafp-buttonStyles"
+          data-highlighted="false"
+          data-menu-item="true"
+          data-test-subj="kbnChromeNav-logo"
+          href="/"
+          id="home"
         >
-          <a
-            aria-label="Solution homepage"
-            class="css-r2tafp-buttonStyles"
-            data-highlighted="false"
-            data-menu-item="true"
-            data-test-subj="kbnChromeNav-logo"
-            href="/"
-            id="home"
+          <div
+            class="kbnChromeNav-iconWrapper"
           >
-            <div
-              class="kbnChromeNav-iconWrapper"
-            >
-              <span
-                aria-hidden="true"
-                color="currentColor"
-                data-euiicon-type="logoElastic"
-              />
-            </div>
-            <div
-              class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
-            >
-              Solution
-            </div>
-          </a>
-        </div>
+            <span
+              aria-hidden="true"
+              color="currentColor"
+              data-euiicon-type="logoElastic"
+            />
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextAlign-center-textStyles-labelStyles"
+          >
+            Solution
+          </div>
+        </a>
       </div>
       <p
         class="emotion-euiScreenReaderOnly"
@@ -179,9 +175,9 @@ exports[`Expanded mode should render the side navigation 1`] = `
       >
         You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.
       </p>
-      <nav
-        aria-label="Footer navigation"
-        class="css-q2ubd0-getFooterNavWrapperStyles"
+      <footer
+        aria-label="Side navigation"
+        class="css-18gcnxt-root"
         data-test-subj="kbnChromeNav-footer"
       >
         <div
@@ -367,13 +363,9 @@ exports[`Expanded mode should render the side navigation 1`] = `
             </span>
           </div>
         </div>
-      </nav>
-      <div
-        aria-label="Side navigation tools"
-        class="css-4egb9v-getFooterToolbarWrapperStyles"
-        data-test-subj="kbnChromeNav-footerToolbar"
-        role="group"
-      >
+        <hr
+          class="euiHorizontalRule emotion-euiHorizontalRule-full-xs-collapseDivider"
+        />
         <div
           class="sideNavCollapseButtonWrapper css-1y5smli-sideNavCollapseButtonWrapper"
         >
@@ -384,6 +376,7 @@ exports[`Expanded mode should render the side navigation 1`] = `
             aria-pressed="true"
             class="euiButtonIcon emotion-euiButtonIcon-s-empty-text-sideNavCollapseButton"
             data-test-subj="sideNavCollapseButton"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -394,7 +387,7 @@ exports[`Expanded mode should render the side navigation 1`] = `
             />
           </button>
         </div>
-      </div>
+      </footer>
     </div>
   </div>
 </div>
diff --git a/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx b/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx
index fe9cd020b085b..a6d9f340902b1 100644
--- a/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx
+++ b/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx
@@ -1251,7 +1251,6 @@ describe('Both modes', () => {
         const serviceInventoryLink = within(sidePanel).getByTestId(
           sidePanelItemId('service-inventory')
         );
-        const collapseButton = screen.getByTestId('sideNavCollapseButton');
 
         act(() => {
           solutionLogo.focus();
@@ -1269,10 +1268,7 @@ describe('Both modes', () => {
 
         expect(gettingStartedLink).toHaveFocus();
 
-        await user.tab();
-
-        expect(collapseButton).toHaveFocus();
-
+        // Tab to side panel - should land on first focusable item (Service inventory)
         await user.tab();
 
         expect(serviceInventoryLink).toHaveFocus();
diff --git a/src/core/packages/chrome/navigation/src/components/footer/index.tsx b/src/core/packages/chrome/navigation/src/components/footer/index.tsx
index 89979aca3f2d3..a6e64bbcfd96f 100644
--- a/src/core/packages/chrome/navigation/src/components/footer/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/footer/index.tsx
@@ -7,8 +7,131 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { FooterNav } from './nav';
-export type { FooterNavProps, FooterNavIds, FooterNavChildren } from './nav';
-export { FooterToolbar } from './toolbar';
-export type { FooterToolbarProps } from './toolbar';
-export { FooterItem } from './item';
+import React, { forwardRef, useMemo } from 'react';
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiHorizontalRule,
+  EuiScreenReaderOnly,
+  useEuiTheme,
+  useGeneratedHtmlId,
+  type UseEuiTheme,
+} from '@elastic/eui';
+
+import { FooterItem } from './item';
+import { getFocusableElements } from '../../utils/get_focusable_elements';
+import { handleRovingIndex } from '../../utils/handle_roving_index';
+import { updateTabIndices } from '../../utils/update_tab_indices';
+import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
+import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
+
+const getFooterWrapperStyles = (euiThemeContext: UseEuiTheme, isCollapsed: boolean) => {
+  const { euiTheme: theme } = euiThemeContext;
+  return {
+    root: css`
+      align-items: center;
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      gap: ${theme.size.xs};
+      justify-content: center;
+      padding-top: ${isCollapsed ? theme.size.s : theme.size.m};
+
+      ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
+    `,
+    collapseDivider: css`
+      position: relative;
+      background-color: transparent;
+
+      ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
+    `,
+  };
+};
+
+export interface FooterIds {
+  footerNavigationInstructionsId: string;
+}
+
+export type FooterChildren = ReactNode | ((ids: FooterIds) => ReactNode);
+
+export interface FooterProps {
+  children: FooterChildren;
+  isCollapsed: boolean;
+  collapseButton?: ReactNode;
+}
+
+interface FooterComponent
+  extends ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>> {
+  Item: typeof FooterItem;
+}
+
+const FooterBase = forwardRef<HTMLElement, FooterProps>(
+  ({ children, isCollapsed, collapseButton }, ref) => {
+    const euiThemeContext = useEuiTheme();
+    const footerNavigationInstructionsId = useGeneratedHtmlId({
+      prefix: 'footer-navigation-instructions',
+    });
+
+    const handleRef = (node: HTMLElement | null) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+
+      if (node) {
+        const elements = getFocusableElements(node);
+        updateTabIndices(elements);
+      }
+    };
+
+    const wrapperStyles = useMemo(
+      () => getFooterWrapperStyles(euiThemeContext, isCollapsed),
+      [euiThemeContext, isCollapsed]
+    );
+
+    const renderChildren = () => {
+      if (typeof children === 'function') {
+        return children({ footerNavigationInstructionsId });
+      }
+      return children;
+    };
+
+    return (
+      <>
+        <EuiScreenReaderOnly>
+          <p id={footerNavigationInstructionsId}>
+            {i18n.translate('core.ui.chrome.sideNavigation.footerInstructions', {
+              defaultMessage:
+                'You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.',
+            })}
+          </p>
+        </EuiScreenReaderOnly>
+        {/* The footer itself is not interactive but the children are */}
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+        <footer
+          aria-label={i18n.translate('core.ui.chrome.sideNavigation.footerAriaLabel', {
+            defaultMessage: 'Side navigation',
+          })}
+          css={wrapperStyles.root}
+          onKeyDown={handleRovingIndex}
+          ref={handleRef}
+          data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footer`}
+        >
+          {renderChildren()}
+          {collapseButton && (
+            <>
+              <EuiHorizontalRule margin="xs" css={wrapperStyles.collapseDivider} />
+              {collapseButton}
+            </>
+          )}
+        </footer>
+      </>
+    );
+  }
+);
+
+export const Footer = Object.assign(FooterBase, {
+  Item: FooterItem,
+}) satisfies FooterComponent;
diff --git a/src/core/packages/chrome/navigation/src/components/footer/item.tsx b/src/core/packages/chrome/navigation/src/components/footer/item.tsx
index 3b1747ba58b5e..984aed8939862 100644
--- a/src/core/packages/chrome/navigation/src/components/footer/item.tsx
+++ b/src/core/packages/chrome/navigation/src/components/footer/item.tsx
@@ -7,31 +7,135 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { forwardRef } from 'react';
-import type { KeyboardEvent, Ref } from 'react';
-import type { EuiButtonIconProps } from '@elastic/eui';
+import React, { Suspense, forwardRef } from 'react';
+import type { KeyboardEvent, ForwardedRef, ComponentProps } from 'react';
+import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import type { EuiButtonIconProps, IconType } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import type { MenuItem } from '../../../types';
-import { IconButton } from '../icon_button';
-import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
+import { BetaBadge } from '../beta_badge';
+import { NAVIGATION_SELECTOR_PREFIX, TOOLTIP_OFFSET } from '../../constants';
+import { focusMainContent } from '../../utils/focus_main_content';
+import { useHighContrastModeStyles } from '../../hooks/use_high_contrast_mode_styles';
+import { useTooltip } from '../../hooks/use_tooltip';
+import { NewItemIndicator } from '../new_item_indicator';
 
-export interface FooterItemProps
-  extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'>,
-    Omit<MenuItem, 'sections'> {
+export interface FooterItemProps extends Omit<EuiButtonIconProps, 'iconType'>, MenuItem {
   hasContent?: boolean;
+  iconType: IconType;
   isCurrent?: boolean;
   isHighlighted: boolean;
   isNew: boolean;
+  label: string;
   onClick?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
 }
 
+/**
+ * A footer item that leverages the "Toggle button" pattern from EUI.
+ *
+ * @see {@link https://eui.elastic.co/docs/components/navigation/buttons/button/#toggle-button}
+ */
 export const FooterItem = forwardRef<HTMLAnchorElement, FooterItemProps>(
-  ({ id, ...props }, ref) => (
-    <IconButton
-      ref={ref as Ref<HTMLElement>}
-      data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footerItem-${id}`}
-      {...props}
-    />
-  )
+  (
+    { badgeType, hasContent, iconType, id, isCurrent, isHighlighted, isNew, label, ...props },
+    ref: ForwardedRef<HTMLAnchorElement>
+  ) => {
+    const { euiTheme } = useEuiTheme();
+    const { tooltipRef, handleMouseOut } = useTooltip();
+    const highContrastModeStyles = useHighContrastModeStyles();
+
+    const handleFooterItemKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        // Required for entering the popover with Enter or Space key
+        // Otherwise the navigation happens immediately
+        e.preventDefault();
+        focusMainContent();
+      }
+    };
+
+    const wrapperStyles = css`
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    `;
+
+    const buttonStyles = css`
+      --high-contrast-hover-indicator-color: ${isHighlighted
+        ? euiTheme.colors.textPrimary
+        : euiTheme.colors.textParagraph};
+      ${highContrastModeStyles}
+    `;
+
+    const buttonWrapperStyles = css`
+      position: relative;
+      display: inline-flex;
+    `;
+
+    const footerItemTestSubj = `${NAVIGATION_SELECTOR_PREFIX}-footerItem-${id}`;
+
+    const buttonProps: ComponentProps<typeof EuiButtonIcon> & {
+      'data-highlighted': string;
+      'data-menu-item': string;
+    } = {
+      'aria-current': isCurrent ? 'page' : undefined,
+      'aria-label': label,
+      buttonRef: ref,
+      color: isHighlighted ? 'primary' : 'text',
+      'data-highlighted': isHighlighted ? 'true' : 'false',
+      'data-test-subj': footerItemTestSubj,
+      'data-menu-item': 'true',
+      display: isHighlighted ? 'base' : 'empty',
+      iconType: 'empty', // `iconType` is passed in Suspense below
+      onKeyDown: handleFooterItemKeyDown,
+      size: 's',
+      css: buttonStyles,
+      ...props,
+    };
+
+    const menuItem = (
+      <div css={buttonWrapperStyles}>
+        <Suspense fallback={<EuiButtonIcon buttonRef={ref} {...buttonProps} />}>
+          <EuiButtonIcon buttonRef={ref} {...buttonProps} iconType={iconType || 'empty'} />
+        </Suspense>
+        {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
+      </div>
+    );
+
+    if (!hasContent) {
+      const tooltipStyles = css`
+        display: flex;
+        align-items: center;
+        gap: ${euiTheme.size.s};
+      `;
+      const tooltipContent = badgeType ? (
+        <span css={tooltipStyles}>
+          {label}
+          <BetaBadge type={badgeType} isInverted />
+        </span>
+      ) : (
+        label
+      );
+
+      return (
+        <EuiToolTip
+          anchorProps={{
+            css: wrapperStyles,
+          }}
+          content={tooltipContent}
+          disableScreenReaderOutput
+          onMouseOut={handleMouseOut}
+          position="right"
+          ref={tooltipRef}
+          repositionOnScroll
+          offset={TOOLTIP_OFFSET}
+        >
+          {menuItem}
+        </EuiToolTip>
+      );
+    }
+
+    return <div css={wrapperStyles}>{menuItem}</div>;
+  }
 );
diff --git a/src/core/packages/chrome/navigation/src/components/footer/nav.tsx b/src/core/packages/chrome/navigation/src/components/footer/nav.tsx
deleted file mode 100644
index 19808bac162be..0000000000000
--- a/src/core/packages/chrome/navigation/src/components/footer/nav.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { forwardRef, useMemo } from 'react';
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import { css } from '@emotion/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiScreenReaderOnly,
-  useEuiTheme,
-  useGeneratedHtmlId,
-  type UseEuiTheme,
-} from '@elastic/eui';
-
-import { FooterItem } from './item';
-import { getFocusableElements } from '../../utils/get_focusable_elements';
-import { handleRovingIndex } from '../../utils/handle_roving_index';
-import { updateTabIndices } from '../../utils/update_tab_indices';
-import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
-import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
-
-const getFooterNavWrapperStyles = (euiThemeContext: UseEuiTheme, isCollapsed: boolean) => {
-  const { euiTheme: theme } = euiThemeContext;
-  return css`
-    align-items: center;
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: ${theme.size.xs};
-    justify-content: center;
-    padding-top: ${isCollapsed ? theme.size.s : theme.size.m};
-
-    ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
-  `;
-};
-
-export interface FooterNavIds {
-  footerNavigationInstructionsId: string;
-}
-
-export type FooterNavChildren = ReactNode | ((ids: FooterNavIds) => ReactNode);
-
-export interface FooterNavProps {
-  children: FooterNavChildren;
-  isCollapsed: boolean;
-}
-
-interface FooterNavComponent
-  extends ForwardRefExoticComponent<FooterNavProps & RefAttributes<HTMLElement>> {
-  Item: typeof FooterItem;
-}
-
-const FooterNavBase = forwardRef<HTMLElement, FooterNavProps>(({ children, isCollapsed }, ref) => {
-  const euiThemeContext = useEuiTheme();
-  const footerNavigationInstructionsId = useGeneratedHtmlId({
-    prefix: 'footer-navigation-instructions',
-  });
-
-  const handleRef = (node: HTMLElement | null) => {
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-
-    if (node) {
-      const elements = getFocusableElements(node);
-      updateTabIndices(elements);
-    }
-  };
-
-  const wrapperStyles = useMemo(
-    () => getFooterNavWrapperStyles(euiThemeContext, isCollapsed),
-    [euiThemeContext, isCollapsed]
-  );
-
-  const renderChildren = () => {
-    if (typeof children === 'function') {
-      return children({ footerNavigationInstructionsId });
-    }
-    return children;
-  };
-
-  return (
-    <>
-      <EuiScreenReaderOnly>
-        <p id={footerNavigationInstructionsId}>
-          {i18n.translate('core.ui.chrome.sideNavigation.footerInstructions', {
-            defaultMessage:
-              'You are in the main navigation footer menu. Use Up and Down arrow keys to navigate the menu.',
-          })}
-        </p>
-      </EuiScreenReaderOnly>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <nav
-        aria-label={i18n.translate('core.ui.chrome.sideNavigation.footerNavAriaLabel', {
-          defaultMessage: 'Footer navigation',
-        })}
-        css={wrapperStyles}
-        onKeyDown={handleRovingIndex}
-        ref={handleRef}
-        data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footer`}
-      >
-        {renderChildren()}
-      </nav>
-    </>
-  );
-});
-
-export const FooterNav = Object.assign(FooterNavBase, {
-  Item: FooterItem,
-}) satisfies FooterNavComponent;
diff --git a/src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx b/src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx
deleted file mode 100644
index ec5ee70b40e35..0000000000000
--- a/src/core/packages/chrome/navigation/src/components/footer/toolbar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { forwardRef, useMemo } from 'react';
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import { css } from '@emotion/react';
-import { useEuiTheme, type UseEuiTheme } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
-import { ToolItem } from '../tool_item';
-import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
-import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
-
-const getFooterToolbarWrapperStyles = (euiThemeContext: UseEuiTheme, isCollapsed: boolean) => {
-  const { euiTheme: theme } = euiThemeContext;
-  return css`
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    gap: ${theme.size.xs};
-    justify-content: center;
-    padding-top: ${isCollapsed ? theme.size.s : theme.size.m};
-    position: relative;
-    width: 100%;
-
-    ${getHighContrastSeparator(euiThemeContext, { side: 'top' })}
-  `;
-};
-
-export interface FooterToolbarProps {
-  children?: ReactNode;
-  isCollapsed: boolean;
-}
-
-interface FooterToolbarComponent
-  extends ForwardRefExoticComponent<FooterToolbarProps & RefAttributes<HTMLDivElement>> {
-  Item: typeof ToolItem;
-}
-
-const FooterToolbarBase = forwardRef<HTMLDivElement, FooterToolbarProps>(
-  ({ children, isCollapsed }, ref) => {
-    const euiThemeContext = useEuiTheme();
-
-    const wrapperStyles = useMemo(
-      () => getFooterToolbarWrapperStyles(euiThemeContext, isCollapsed),
-      [euiThemeContext, isCollapsed]
-    );
-
-    return (
-      <div
-        aria-label={i18n.translate('core.ui.chrome.sideNavigation.footerToolbarAriaLabel', {
-          defaultMessage: 'Side navigation tools',
-        })}
-        css={wrapperStyles}
-        data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-footerToolbar`}
-        ref={ref}
-        role="group"
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-export const FooterToolbar = Object.assign(FooterToolbarBase, {
-  Item: ToolItem,
-}) satisfies FooterToolbarComponent;
diff --git a/src/core/packages/chrome/navigation/src/components/header/index.tsx b/src/core/packages/chrome/navigation/src/components/header/index.tsx
deleted file mode 100644
index d97146f9f8424..0000000000000
--- a/src/core/packages/chrome/navigation/src/components/header/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { forwardRef } from 'react';
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import { css } from '@emotion/react';
-import { i18n } from '@kbn/i18n';
-import { useEuiTheme } from '@elastic/eui';
-
-import { ToolItem } from '../tool_item';
-import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
-
-export interface HeaderToolbarProps {
-  children: ReactNode;
-}
-
-export const HeaderToolbar = forwardRef<HTMLDivElement, HeaderToolbarProps>(({ children }, ref) => {
-  const { euiTheme } = useEuiTheme();
-
-  const wrapperStyles = css`
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    gap: ${euiTheme.size.xs};
-    justify-content: center;
-    width: 100%;
-  `;
-
-  return (
-    <div
-      aria-label={i18n.translate('core.ui.chrome.sideNavigation.headerToolbarAriaLabel', {
-        defaultMessage: 'Header tools',
-      })}
-      css={wrapperStyles}
-      data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-headerToolbar`}
-      ref={ref}
-      role="group"
-    >
-      {children}
-    </div>
-  );
-}) as ForwardRefExoticComponent<HeaderToolbarProps & RefAttributes<HTMLDivElement>> & {
-  Item: typeof ToolItem;
-};
-
-HeaderToolbar.Item = ToolItem;
diff --git a/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx b/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
deleted file mode 100644
index 505bd734c1750..0000000000000
--- a/src/core/packages/chrome/navigation/src/components/icon_button/index.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { Suspense, forwardRef } from 'react';
-import type { KeyboardEvent, ReactNode, ComponentProps, Ref } from 'react';
-import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
-import type { EuiButtonIconProps, IconType } from '@elastic/eui';
-import { css } from '@emotion/react';
-
-import type { BadgeType } from '../../../types';
-import { BetaBadge } from '../beta_badge';
-import { TOOLTIP_OFFSET } from '../../constants';
-import { useHighContrastModeStyles } from '../../hooks/use_high_contrast_mode_styles';
-import { useTooltip } from '../../hooks/use_tooltip';
-import { NewItemIndicator } from '../new_item_indicator';
-
-export interface IconButtonProps
-  extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'> {
-  badgeType?: BadgeType;
-  hasContent?: boolean;
-  iconType?: IconType;
-  isCollapsed?: boolean;
-  isCurrent?: boolean;
-  isHighlighted: boolean;
-  isNew: boolean;
-  label: string;
-  onClick?: () => void;
-  onKeyDown?: (e: KeyboardEvent) => void;
-  renderContent?: (state: { isCollapsed: boolean }) => ReactNode;
-}
-
-export const IconButton = forwardRef<HTMLElement, IconButtonProps>(
-  (
-    {
-      badgeType,
-      hasContent,
-      iconType,
-      isCollapsed,
-      isCurrent,
-      isHighlighted,
-      isNew,
-      label,
-      renderContent,
-      ...props
-    },
-    ref
-  ) => {
-    const buttonRef = ref as Ref<HTMLButtonElement>;
-    const { euiTheme } = useEuiTheme();
-    const { tooltipRef, handleMouseOut } = useTooltip();
-    const highContrastModeStyles = useHighContrastModeStyles();
-
-    const wrapperStyles = css`
-      display: flex;
-      justify-content: center;
-      width: 100%;
-    `;
-
-    const buttonStyles = css`
-      --high-contrast-hover-indicator-color: ${isHighlighted
-        ? euiTheme.colors.textPrimary
-        : euiTheme.colors.textParagraph};
-      ${highContrastModeStyles}
-    `;
-
-    const buttonWrapperStyles = css`
-      position: relative;
-      display: inline-flex;
-    `;
-
-    let item: JSX.Element;
-
-    if (renderContent) {
-      const shellStyles = css`
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: ${euiTheme.size.xl};
-        width: ${euiTheme.size.xl};
-        border: none;
-        border-radius: ${euiTheme.border.radius.small};
-        background: ${isHighlighted ? euiTheme.colors.backgroundBasePrimary : 'transparent'};
-        cursor: pointer;
-        padding: 0;
-        color: ${isHighlighted ? euiTheme.colors.textPrimary : euiTheme.colors.textParagraph};
-        position: relative;
-        overflow: hidden;
-        &:hover::before {
-          content: '';
-          position: absolute;
-          z-index: 0;
-          inset: 0;
-          background-color: ${euiTheme.components.buttons.backgroundEmptyTextHover};
-          pointer-events: none;
-        }
-        &:active::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: ${euiTheme.components.buttons.backgroundEmptyTextActive};
-        }
-        &:focus-visible {
-          outline: ${euiTheme.focus.width} solid ${euiTheme.focus.color};
-          outline-offset: 2px;
-        }
-      `;
-
-      item = (
-        <div css={buttonWrapperStyles}>
-          <button
-            ref={buttonRef}
-            type="button"
-            aria-current={isCurrent ? 'page' : undefined}
-            aria-label={label}
-            css={[shellStyles, buttonStyles]}
-            data-highlighted={isHighlighted ? 'true' : 'false'}
-            data-menu-item="true"
-            {...props}
-          >
-            {renderContent({ isCollapsed: !!isCollapsed })}
-          </button>
-          {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
-        </div>
-      );
-    } else {
-      const euiButtonProps: ComponentProps<typeof EuiButtonIcon> & {
-        'data-highlighted': string;
-        'data-menu-item': string;
-      } = {
-        'aria-current': isCurrent ? 'page' : undefined,
-        'aria-label': label,
-        buttonRef,
-        color: isHighlighted ? 'primary' : 'text',
-        'data-highlighted': isHighlighted ? 'true' : 'false',
-        'data-menu-item': 'true',
-        display: isHighlighted ? 'base' : 'empty',
-        iconType: 'empty',
-        size: 's',
-        css: buttonStyles,
-        ...props,
-      };
-
-      item = (
-        <div css={buttonWrapperStyles}>
-          <Suspense fallback={<EuiButtonIcon {...euiButtonProps} />}>
-            <EuiButtonIcon {...euiButtonProps} iconType={iconType || 'empty'} />
-          </Suspense>
-          {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
-        </div>
-      );
-    }
-
-    if (!hasContent) {
-      const tooltipStyles = css`
-        display: flex;
-        align-items: center;
-        gap: ${euiTheme.size.s};
-      `;
-      const tooltipContent = badgeType ? (
-        <span css={tooltipStyles}>
-          {label}
-          <BetaBadge type={badgeType} isInverted />
-        </span>
-      ) : (
-        label
-      );
-
-      return (
-        <EuiToolTip
-          anchorProps={{
-            css: wrapperStyles,
-          }}
-          content={tooltipContent}
-          disableScreenReaderOutput
-          onMouseOut={handleMouseOut}
-          position="right"
-          ref={tooltipRef}
-          repositionOnScroll
-          offset={TOOLTIP_OFFSET}
-        >
-          {item}
-        </EuiToolTip>
-      );
-    }
-
-    return <div css={wrapperStyles}>{item}</div>;
-  }
-);
diff --git a/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx b/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx
index 47aceca945318..2082d94cdb256 100644
--- a/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx
@@ -20,7 +20,6 @@ import { NewItemIndicator } from '../new_item_indicator';
 interface MenuItemBaseProps {
   children: ReactNode;
   iconType: IconType;
-  iconColor?: 'default' | 'text';
   id?: string;
   isCurrent?: boolean;
   isHighlighted: boolean;
@@ -55,7 +54,6 @@ export const MenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, MenuIt
     {
       children,
       iconType,
-      iconColor,
       id,
       isCurrent = false,
       isHighlighted,
@@ -168,11 +166,7 @@ export const MenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, MenuIt
       <>
         <div className={iconWrapperClassName}>
           <Suspense fallback={<EuiIcon aria-hidden color="currentColor" type="empty" />}>
-            <EuiIcon
-              aria-hidden
-              color={iconColor === 'text' ? 'text' : 'currentColor'}
-              type={iconType || 'empty'}
-            />
+            <EuiIcon aria-hidden color="currentColor" type={iconType || 'empty'} />
           </Suspense>
           {isNew && <NewItemIndicator isHighlighted={isHighlighted} />}
         </div>
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index 9cfe7763d287a..9a322be8e69d1 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -7,26 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, {
-  useMemo,
-  useState,
-  type ForwardRefExoticComponent,
-  type ReactNode,
-  type RefAttributes,
-} from 'react';
+import React, { useState, type ReactNode } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { useEuiTheme, useIsWithinBreakpoints, type UseEuiTheme } from '@elastic/eui';
+import { useIsWithinBreakpoints } from '@elastic/eui';
 
-import type {
-  MenuItem,
-  NavigationStructure,
-  SecondaryMenuItem,
-  SideNavLogo,
-  ToolItem,
-  ToolSlots,
-} from '../../types';
+import type { NavigationStructure, SideNavLogo, MenuItem, SecondaryMenuItem } from '../../types';
 import {
   MAIN_PANEL_ID,
   MAX_FOOTER_ITEMS,
@@ -34,7 +21,6 @@ import {
   NAVIGATION_ROOT_SELECTOR,
   NAVIGATION_SELECTOR_PREFIX,
 } from '../constants';
-import type { ToolItemProps } from './tool_item';
 import { SideNav } from './side_nav';
 import { SideNavCollapseButton } from './collapse_button';
 import { focusMainContent } from '../utils/focus_main_content';
@@ -43,33 +29,11 @@ import { useLayoutWidth } from '../hooks/use_layout_width';
 import { useNavigation } from '../hooks/use_navigation';
 import { useNewItems } from '../hooks/use_new_items';
 import { useResponsiveMenu } from '../hooks/use_responsive_menu';
-import { getHighContrastSeparator } from '../hooks/use_high_contrast_mode_styles';
-import { useToolShortcuts } from '../hooks/use_tool_shortcuts';
-
-const EMPTY_TOOL_ITEMS: ToolItem[] = [];
 
 const navigationWrapperStyles = css`
   display: flex;
 `;
 
-const getTopSectionStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
-  return css`
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    gap: ${euiTheme.size.s};
-    justify-content: center;
-    padding-bottom: ${euiTheme.size.s};
-    position: relative;
-    width: 100%;
-
-    ${getHighContrastSeparator(euiThemeContext)}
-  `;
-};
-
-type SelectableNavigationItem = MenuItem | SecondaryMenuItem | SideNavLogo;
-
 export interface NavigationProps {
   /**
    * The active path for the navigation, used for highlighting the current item.
@@ -80,13 +44,9 @@ export interface NavigationProps {
    */
   isCollapsed: boolean;
   /**
-   * The navigation structure containing primary and footer navigable items.
+   * The navigation structure containing primary, secondary, and footer items.
    */
   items: NavigationStructure;
-  /**
-   * Optional chrome tools (search, help, etc.) rendered in header and footer toolbars.
-   */
-  tools?: ToolSlots;
   /**
    * The logo object containing the route ID, href, label, and type.
    */
@@ -96,9 +56,9 @@ export interface NavigationProps {
    */
   setWidth: (width: number) => void;
   /**
-   * (optional) Callback fired when a navigable item (or logo) is activated. Not called for tool controls.
+   * (optional) Callback fired when a navigation item is clicked.
    */
-  onItemClick?: (item: SelectableNavigationItem) => void;
+  onItemClick?: (item: MenuItem | SecondaryMenuItem | SideNavLogo) => void;
   /**
    * Callback fired when the collapse button is toggled.
    *
@@ -120,7 +80,6 @@ export const Navigation = ({
   activeItemId,
   isCollapsed: isCollapsedProp,
   items,
-  tools,
   logo,
   onItemClick,
   onToggleCollapsed,
@@ -128,15 +87,13 @@ export const Navigation = ({
   sidePanelFooter,
   ...rest
 }: NavigationProps) => {
-  const euiThemeContext = useEuiTheme();
   const forcedCollapsed = useIsWithinBreakpoints(['xs', 's']);
   const isCollapsed = forcedCollapsed || isCollapsedProp;
   const popoverItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverItem`;
   const popoverFooterItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverFooterItem`;
-  const popoverFooterToolPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverFooterTool`;
-  const popoverHeaderToolPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverHeaderTool`;
   const sidePanelItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-sidePanelItem`;
   const moreMenuTriggerTestSubj = `${NAVIGATION_SELECTOR_PREFIX}-moreMenuTrigger`;
+
   const {
     actualActiveItemId,
     visuallyActivePageId,
@@ -161,21 +118,11 @@ export const Navigation = ({
 
   useLayoutWidth({ isCollapsed, isSidePanelOpen, setWidth });
 
-  const collapseToggle = onToggleCollapsed && !forcedCollapsed ? onToggleCollapsed : undefined;
-
-  const headerTools = tools?.headerTools ?? EMPTY_TOOL_ITEMS;
-  const footerTools = tools?.footerTools ?? EMPTY_TOOL_ITEMS;
-  const hasHeaderTools = headerTools.length > 0;
-  const hasFooterTools = footerTools.length > 0;
-  const showFooterToolbar = hasFooterTools || Boolean(collapseToggle);
-
-  const allTools = useMemo(() => [...headerTools, ...footerTools], [headerTools, footerTools]);
-  useToolShortcuts({ tools: allTools });
-
-  const topSectionStyles = useMemo(() => getTopSectionStyles(euiThemeContext), [euiThemeContext]);
-
-  const footerNavItems = items.footerItems.slice(0, MAX_FOOTER_ITEMS);
-  const hasFooterNavItems = footerNavItems.length > 0;
+  // Create the collapse button if a toggle callback is provided or if the navigation is not forced to be collapsed (e.g. on mobile)
+  const collapseButton =
+    onToggleCollapsed && !forcedCollapsed ? (
+      <SideNavCollapseButton isCollapsed={isCollapsed} toggle={onToggleCollapsed} />
+    ) : null;
 
   return (
     <div
@@ -184,27 +131,13 @@ export const Navigation = ({
       id={NAVIGATION_ROOT_SELECTOR}
     >
       <SideNav isCollapsed={isCollapsed}>
-        <div css={topSectionStyles}>
-          <SideNav.Logo
-            isCollapsed={isCollapsed}
-            isCurrent={actualActiveItemId === logo.id}
-            isHighlighted={visuallyActivePageId === logo.id}
-            onClick={() => onItemClick?.(logo)}
-            {...logo}
-          />
-          {hasHeaderTools && (
-            <SideNav.HeaderToolbar>
-              {renderToolItems({
-                anchorPosition: 'rightDown',
-                items: headerTools,
-                itemComponent: SideNav.HeaderToolbar.Item,
-                isAnyPopoverLocked,
-                isCollapsed,
-                popoverItemPrefix: popoverHeaderToolPrefix,
-              })}
-            </SideNav.HeaderToolbar>
-          )}
-        </div>
+        <SideNav.Logo
+          isCollapsed={isCollapsed}
+          isCurrent={actualActiveItemId === logo.id}
+          isHighlighted={visuallyActivePageId === logo.id}
+          onClick={() => onItemClick?.(logo)}
+          {...logo}
+        />
 
         <SideNav.PrimaryMenu ref={primaryMenuRef} isCollapsed={isCollapsed}>
           {({ mainNavigationInstructionsId }) => (
@@ -255,9 +188,8 @@ export const Navigation = ({
                                 const isFirstSubItem =
                                   sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
                                 const subItemAriaDescribedBy = isFirstSubItem
-                                  ? ids.popoverNavigationInstructionsId
+                                  ? ids?.popoverNavigationInstructionsId
                                   : undefined;
-                                const { onClick: subItemOnClick, ...subItemRest } = subItem;
                                 return (
                                   <SideNav.SecondaryMenu.Item
                                     aria-describedby={subItemAriaDescribedBy}
@@ -266,14 +198,13 @@ export const Navigation = ({
                                     isCurrent={actualActiveItemId === subItem.id}
                                     isNew={getIsNewSecondary(subItem.id)}
                                     onClick={() => {
-                                      subItemOnClick?.();
                                       onItemClick?.(subItem);
                                       if (subItem.href) {
                                         closePopover();
                                       }
                                     }}
                                     testSubjPrefix={popoverItemPrefix}
-                                    {...subItemRest}
+                                    {...subItem}
                                   >
                                     {subItem.label}
                                   </SideNav.SecondaryMenu.Item>
@@ -380,26 +311,22 @@ export const Navigation = ({
                                   key={section.id}
                                   label={section.label}
                                 >
-                                  {section.items.map((subItem) => {
-                                    const { onClick: subItemOnClick, ...subItemRest } = subItem;
-                                    return (
-                                      <SideNav.NestedSecondaryMenu.Item
-                                        key={subItem.id}
-                                        isHighlighted={subItem.id === visuallyActiveSubpageId}
-                                        isCurrent={actualActiveItemId === subItem.id}
-                                        isNew={getIsNewSecondary(subItem.id)}
-                                        onClick={() => {
-                                          subItemOnClick?.();
-                                          onItemClick?.(subItem);
-                                          closePopover();
-                                          focusMainContent();
-                                        }}
-                                        {...subItemRest}
-                                      >
-                                        {subItem.label}
-                                      </SideNav.NestedSecondaryMenu.Item>
-                                    );
-                                  })}
+                                  {section.items.map((subItem) => (
+                                    <SideNav.NestedSecondaryMenu.Item
+                                      key={subItem.id}
+                                      isHighlighted={subItem.id === visuallyActiveSubpageId}
+                                      isCurrent={actualActiveItemId === subItem.id}
+                                      isNew={getIsNewSecondary(subItem.id)}
+                                      onClick={() => {
+                                        onItemClick?.(subItem);
+                                        closePopover();
+                                        focusMainContent();
+                                      }}
+                                      {...subItem}
+                                    >
+                                      {subItem.label}
+                                    </SideNav.NestedSecondaryMenu.Item>
+                                  ))}
                                 </SideNav.NestedSecondaryMenu.Section>
                               ))}
                             </>
@@ -414,44 +341,84 @@ export const Navigation = ({
           )}
         </SideNav.PrimaryMenu>
 
-        {hasFooterNavItems && (
-          <SideNav.FooterNav isCollapsed={isCollapsed}>
-            {({ footerNavigationInstructionsId }) =>
-              renderFooterNavItems({
-                items: footerNavItems,
-                itemComponent: SideNav.FooterNav.Item,
-                navigationInstructionsId: footerNavigationInstructionsId,
-                openerNode,
-                isCollapsed,
-                isAnyPopoverLocked,
-                visuallyActivePageId,
-                visuallyActiveSubpageId,
-                actualActiveItemId,
-                onItemClick,
-                getIsNewPrimary,
-                getIsNewSecondary,
-                popoverItemPrefix: popoverFooterItemPrefix,
-              })
-            }
-          </SideNav.FooterNav>
-        )}
+        <SideNav.Footer isCollapsed={isCollapsed} collapseButton={collapseButton}>
+          {({ footerNavigationInstructionsId }) => (
+            <>
+              {items.footerItems.slice(0, MAX_FOOTER_ITEMS).map((item, index) => {
+                const { sections, ...itemProps } = item;
+                const isFirstItem = index === 0;
+                const ariaDescribedBy = isFirstItem ? footerNavigationInstructionsId : undefined;
+
+                return (
+                  <SideNav.Popover
+                    key={item.id}
+                    hasContent={getHasSubmenu(item)}
+                    isSidePanelOpen={!isCollapsed && item.id === openerNode?.id}
+                    isAnyPopoverLocked={isAnyPopoverLocked}
+                    label={item.label}
+                    persistent={false}
+                    trigger={
+                      <SideNav.Footer.Item
+                        aria-describedby={ariaDescribedBy}
+                        isHighlighted={item.id === visuallyActivePageId}
+                        isCurrent={actualActiveItemId === item.id}
+                        isNew={getIsNewPrimary(item.id)}
+                        hasContent={getHasSubmenu(item)}
+                        onClick={() => onItemClick?.(item)}
+                        {...itemProps}
+                      />
+                    }
+                  >
+                    {(closePopover, ids) => (
+                      <SideNav.SecondaryMenu
+                        title={item.label}
+                        badgeType={item.badgeType}
+                        isNew={getIsNewSecondary(item.id)}
+                      >
+                        {sections?.map((section, sectionIndex) => {
+                          const firstNonEmptySectionIndex = item.sections?.findIndex(
+                            (s) => s.items.length > 0
+                          );
+                          return (
+                            <SideNav.SecondaryMenu.Section key={section.id} label={section.label}>
+                              {section.items.map((subItem, subItemIndex) => {
+                                const isFirstSubItem =
+                                  sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
+                                const subItemAriaDescribedBy = isFirstSubItem
+                                  ? ids?.popoverNavigationInstructionsId
+                                  : undefined;
 
-        {showFooterToolbar && (
-          <SideNav.FooterToolbar isCollapsed={isCollapsed}>
-            {hasFooterTools &&
-              renderToolItems({
-                anchorPosition: 'rightUp',
-                items: footerTools,
-                itemComponent: SideNav.FooterToolbar.Item,
-                isAnyPopoverLocked,
-                isCollapsed,
-                popoverItemPrefix: popoverFooterToolPrefix,
+                                return (
+                                  <SideNav.SecondaryMenu.Item
+                                    aria-describedby={subItemAriaDescribedBy}
+                                    key={subItem.id}
+                                    isHighlighted={subItem.id === visuallyActiveSubpageId}
+                                    isCurrent={actualActiveItemId === subItem.id}
+                                    isNew={getIsNewSecondary(subItem.id)}
+                                    onClick={() => {
+                                      onItemClick?.(subItem);
+                                      if (subItem.href) {
+                                        closePopover();
+                                      }
+                                    }}
+                                    {...subItem}
+                                    testSubjPrefix={popoverFooterItemPrefix}
+                                  >
+                                    {subItem.label}
+                                  </SideNav.SecondaryMenu.Item>
+                                );
+                              })}
+                            </SideNav.SecondaryMenu.Section>
+                          );
+                        })}
+                      </SideNav.SecondaryMenu>
+                    )}
+                  </SideNav.Popover>
+                );
               })}
-            {collapseToggle && (
-              <SideNavCollapseButton isCollapsed={isCollapsed} toggle={collapseToggle} />
-            )}
-          </SideNav.FooterToolbar>
-        )}
+            </>
+          )}
+        </SideNav.Footer>
       </SideNav>
 
       {isSidePanelOpen && openerNode && (
@@ -476,7 +443,6 @@ export const Navigation = ({
                       const ariaDescribedBy = isFirstItem
                         ? secondaryNavigationInstructionsId
                         : undefined;
-                      const { onClick: subItemOnClick, ...subItemRest } = subItem;
 
                       return (
                         <SideNav.SecondaryMenu.Item
@@ -485,12 +451,9 @@ export const Navigation = ({
                           isCurrent={actualActiveItemId === subItem.id}
                           isHighlighted={subItem.id === visuallyActiveSubpageId}
                           isNew={getIsNewSecondary(subItem.id)}
-                          onClick={() => {
-                            subItemOnClick?.();
-                            onItemClick?.(subItem);
-                          }}
+                          onClick={() => onItemClick?.(subItem)}
                           testSubjPrefix={sidePanelItemPrefix}
-                          {...subItemRest}
+                          {...subItem}
                         >
                           {subItem.label}
                         </SideNav.SecondaryMenu.Item>
@@ -506,208 +469,3 @@ export const Navigation = ({
     </div>
   );
 };
-
-interface RenderFooterNavItemsArgs {
-  actualActiveItemId?: string;
-  getIsNewPrimary: (itemId: string) => boolean;
-  getIsNewSecondary: (itemId: string) => boolean;
-  isAnyPopoverLocked: boolean;
-  isCollapsed: boolean;
-  itemComponent: typeof SideNav.FooterNav.Item;
-  items: MenuItem[];
-  navigationInstructionsId: string | undefined;
-  onItemClick?: (item: SelectableNavigationItem) => void;
-  openerNode: MenuItem | null;
-  popoverItemPrefix: string;
-  visuallyActivePageId?: string;
-  visuallyActiveSubpageId?: string;
-}
-
-const renderFooterNavItems = ({
-  actualActiveItemId,
-  getIsNewPrimary,
-  getIsNewSecondary,
-  isAnyPopoverLocked,
-  isCollapsed,
-  itemComponent: ItemComponent,
-  items,
-  navigationInstructionsId,
-  onItemClick,
-  openerNode,
-  popoverItemPrefix,
-  visuallyActivePageId,
-  visuallyActiveSubpageId,
-}: RenderFooterNavItemsArgs) =>
-  items.map((item, index) => {
-    const ariaDescribedBy = index === 0 ? navigationInstructionsId : undefined;
-    const { sections, ...itemProps } = item;
-
-    return (
-      <SideNav.Popover
-        key={item.id}
-        hasContent={getHasSubmenu(item)}
-        isSidePanelOpen={!isCollapsed && item.id === openerNode?.id}
-        isAnyPopoverLocked={isAnyPopoverLocked}
-        label={item.label}
-        persistent={false}
-        trigger={
-          <ItemComponent
-            aria-describedby={ariaDescribedBy}
-            isHighlighted={item.id === visuallyActivePageId}
-            isCurrent={actualActiveItemId === item.id}
-            isNew={getIsNewPrimary(item.id)}
-            hasContent={getHasSubmenu(item)}
-            onClick={() => onItemClick?.(item)}
-            {...itemProps}
-          />
-        }
-      >
-        {(closePopover, ids) => {
-          const firstNonEmptySectionIndex = sections?.findIndex(
-            (section) => section.items.length > 0
-          );
-          return (
-            <SideNav.SecondaryMenu
-              title={item.label}
-              badgeType={item.badgeType}
-              isNew={getIsNewSecondary(item.id)}
-            >
-              {sections?.map((section, sectionIndex) => (
-                <SideNav.SecondaryMenu.Section key={section.id} label={section.label}>
-                  {section.items.map((subItem, subItemIndex) => {
-                    const isFirstSubItem =
-                      sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
-                    const subItemAriaDescribedBy = isFirstSubItem
-                      ? ids.popoverNavigationInstructionsId
-                      : undefined;
-                    const { onClick: subItemOnClick, ...subItemRest } = subItem;
-
-                    return (
-                      <SideNav.SecondaryMenu.Item
-                        aria-describedby={subItemAriaDescribedBy}
-                        key={subItem.id}
-                        isHighlighted={subItem.id === visuallyActiveSubpageId}
-                        isCurrent={actualActiveItemId === subItem.id}
-                        isNew={getIsNewSecondary(subItem.id)}
-                        onClick={() => {
-                          subItemOnClick?.();
-                          onItemClick?.(subItem);
-                          if (subItem.href) {
-                            closePopover();
-                          }
-                        }}
-                        {...subItemRest}
-                        testSubjPrefix={popoverItemPrefix}
-                      >
-                        {subItem.label}
-                      </SideNav.SecondaryMenu.Item>
-                    );
-                  })}
-                </SideNav.SecondaryMenu.Section>
-              ))}
-            </SideNav.SecondaryMenu>
-          );
-        }}
-      </SideNav.Popover>
-    );
-  });
-
-interface RenderToolItemsArgs {
-  anchorPosition?: 'rightUp' | 'rightDown';
-  isAnyPopoverLocked: boolean;
-  isCollapsed: boolean;
-  itemComponent: ForwardRefExoticComponent<ToolItemProps & RefAttributes<HTMLButtonElement>>;
-  items: ToolItem[];
-  popoverItemPrefix: string;
-}
-
-const renderToolItems = ({
-  anchorPosition,
-  isAnyPopoverLocked,
-  isCollapsed,
-  itemComponent: ItemComponent,
-  items,
-  popoverItemPrefix,
-}: RenderToolItemsArgs) =>
-  items.map((item) => {
-    const {
-      onClick: itemOnClick,
-      sections,
-      renderContent,
-      renderPopover,
-      popoverWidth,
-      shortcutKey,
-      ...itemProps
-    } = item;
-    const hasPopoverContent = getHasSubmenu(item);
-    return (
-      <SideNav.Popover
-        key={item.id}
-        anchorPosition={anchorPosition}
-        customContent={!!renderPopover}
-        hasContent={hasPopoverContent}
-        popoverWidth={popoverWidth}
-        isSidePanelOpen={false}
-        isAnyPopoverLocked={isAnyPopoverLocked}
-        label={item.label}
-        persistent={false}
-        trigger={
-          <ItemComponent
-            isHighlighted={false}
-            isNew={false}
-            isCollapsed={isCollapsed}
-            hasContent={hasPopoverContent}
-            renderContent={renderContent}
-            onClick={() => {
-              itemOnClick?.();
-            }}
-            {...itemProps}
-          />
-        }
-      >
-        {(closePopover, ids) => {
-          if (renderPopover) {
-            return renderPopover(closePopover);
-          }
-
-          const firstNonEmptySectionIndex = sections?.findIndex(
-            (section) => section.items.length > 0
-          );
-          return (
-            <SideNav.SecondaryMenu title={item.label} badgeType={item.badgeType} isNew={false}>
-              {sections?.map((section, sectionIndex) => (
-                <SideNav.SecondaryMenu.Section key={section.id} label={section.label}>
-                  {section.items.map((subItem, subItemIndex) => {
-                    const isFirstSubItem =
-                      sectionIndex === firstNonEmptySectionIndex && subItemIndex === 0;
-                    const subItemAriaDescribedBy = isFirstSubItem
-                      ? ids.popoverNavigationInstructionsId
-                      : undefined;
-                    const { onClick: subItemOnClick, ...subItemRest } = subItem;
-
-                    return (
-                      <SideNav.SecondaryMenu.Item
-                        aria-describedby={subItemAriaDescribedBy}
-                        key={subItem.id}
-                        isHighlighted={false}
-                        isCurrent={false}
-                        isNew={false}
-                        onClick={() => {
-                          subItemOnClick?.();
-                          closePopover();
-                        }}
-                        {...subItemRest}
-                        testSubjPrefix={popoverItemPrefix}
-                      >
-                        {subItem.label}
-                      </SideNav.SecondaryMenu.Item>
-                    );
-                  })}
-                </SideNav.SecondaryMenu.Section>
-              ))}
-            </SideNav.SecondaryMenu>
-          );
-        }}
-      </SideNav.Popover>
-    );
-  });
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx
index 6eb31ffd09d06..f9a15f38e5b47 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/index.tsx
@@ -13,8 +13,7 @@ import { css } from '@emotion/react';
 import { useEuiTheme, type UseEuiTheme } from '@elastic/eui';
 
 import { COLLAPSED_WIDTH, EXPANDED_WIDTH } from '../../hooks/use_layout_width';
-import { FooterNav, FooterToolbar } from '../footer';
-import { HeaderToolbar } from '../header';
+import { Footer } from '../footer';
 import { Logo } from './logo';
 import { NestedSecondaryMenu } from '../nested_secondary_menu';
 import { Popover } from './popover';
@@ -41,24 +40,21 @@ export interface SideNavProps {
 
 interface SideNavComponent extends FC<SideNavProps> {
   Logo: typeof Logo;
-  HeaderToolbar: typeof HeaderToolbar;
   PrimaryMenu: typeof PrimaryMenu;
   Popover: typeof Popover;
   SecondaryMenu: typeof SecondaryMenu;
   NestedSecondaryMenu: typeof NestedSecondaryMenu;
-  FooterNav: typeof FooterNav;
-  FooterToolbar: typeof FooterToolbar;
+  Footer: typeof Footer;
   SidePanel: typeof SidePanel;
 }
 
 /**
  * A wrapper component for the side navigation that encapsulates:
  * - the logo,
- * - header and footer toolbars,
  * - the primary menu,
  * - the secondary menu used in the popover and in the side panel,
  * - the nested secondary menu used in the "More" menu,
- * - the footer navigation and toolbar,
+ * - the footer,
  * - the side panel.
  */
 export const SideNav: SideNavComponent = ({ children, isCollapsed }) => {
@@ -77,11 +73,9 @@ export const SideNav: SideNavComponent = ({ children, isCollapsed }) => {
 };
 
 SideNav.Logo = Logo;
-SideNav.HeaderToolbar = HeaderToolbar;
 SideNav.PrimaryMenu = PrimaryMenu;
 SideNav.Popover = Popover;
 SideNav.SecondaryMenu = SecondaryMenu;
 SideNav.NestedSecondaryMenu = NestedSecondaryMenu;
-SideNav.FooterNav = FooterNav;
-SideNav.FooterToolbar = FooterToolbar;
+SideNav.Footer = Footer;
 SideNav.SidePanel = SidePanel;
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx
index 8b5008a3f903e..c9edaefa15c88 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/logo.tsx
@@ -17,6 +17,7 @@ import type { SideNavLogo } from '../../../types';
 import { MenuItem } from '../menu_item';
 import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
 import { useTooltip } from '../../hooks/use_tooltip';
+import { getHighContrastSeparator } from '../../hooks/use_high_contrast_mode_styles';
 
 export interface LogoProps extends Omit<HTMLAttributes<HTMLAnchorElement>, 'onClick'>, SideNavLogo {
   id: string;
@@ -30,16 +31,30 @@ export const Logo = ({
   isCollapsed,
   isCurrent,
   isHighlighted,
-  hideLabel,
   label,
   ...props
 }: LogoProps): JSX.Element => {
-  const { euiTheme } = useEuiTheme();
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
   const { tooltipRef, handleMouseOut } = useTooltip();
 
+  /**
+   * **Icon size**
+   *
+   * In Figma, the logo icon is 20x20.
+   * `EuiIcon` supports `l` which is 24x24 and `m` which is 16x16.
+   *
+   * **Padding**
+   *
+   * 7px aligns better with other elements in the layout.
+   * We cannot use `euiTheme.size.s` because it's 8px.
+   */
   const wrapperStyles = css`
     position: relative;
     padding-top: ${isCollapsed ? euiTheme.size.s : euiTheme.size.m};
+    padding-bottom: ${isCollapsed ? euiTheme.size.s : euiTheme.size.m};
+
+    ${getHighContrastSeparator(euiThemeContext)}
 
     .euiText {
       font-weight: ${euiTheme.font.weight.bold};
@@ -64,7 +79,7 @@ export const Logo = ({
         data-test-subj={logoTestSubj}
         isHighlighted={isHighlighted}
         isCurrent={isCurrent}
-        isLabelVisible={!isCollapsed && !hideLabel}
+        isLabelVisible={!isCollapsed}
         isTruncated={false}
         {...props}
       >
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
index 6f7abff91a137..6336aad9c982b 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/popover.tsx
@@ -39,25 +39,17 @@ import { useHoverTimeout } from '../../hooks/use_hover_timeout';
 import { useScroll } from '../../hooks/use_scroll';
 
 export interface PopoverIds {
-  popoverNavigationInstructionsId: string | undefined;
+  popoverNavigationInstructionsId: string;
 }
 
 export type PopoverChildren =
   | ReactNode
-  | ((closePopover: () => void, ids: PopoverIds) => ReactNode);
+  | ((closePopover: () => void, ids?: PopoverIds) => ReactNode);
 
 export interface PopoverProps {
-  anchorPosition?: 'rightUp' | 'rightDown';
   children?: PopoverChildren;
   container?: HTMLElement;
-  /**
-   * When `true`, the popover delegates keyboard navigation and focus
-   * management to its children (e.g. EuiSelectable). Only Escape is
-   * handled by the popover itself.
-   */
-  customContent?: boolean;
   hasContent: boolean;
-  popoverWidth?: number | string;
   isSidePanelOpen: boolean;
   isAnyPopoverLocked?: boolean;
   setIsLocked?: (isLocked: boolean) => void;
@@ -83,12 +75,9 @@ export interface PopoverProps {
  *   - Escape to move focus back to the trigger.
  */
 export const Popover = ({
-  anchorPosition: anchorPositionProp,
   children,
   container,
-  customContent = false,
   hasContent,
-  popoverWidth,
   isSidePanelOpen,
   isAnyPopoverLocked = false,
   setIsLocked = () => {},
@@ -203,10 +192,6 @@ export const Popover = ({
         return;
       }
 
-      if (customContent) {
-        return;
-      }
-
       if (e.key === 'Tab') {
         e.preventDefault();
         handleClose();
@@ -216,7 +201,7 @@ export const Popover = ({
 
       handleRovingIndex(e);
     },
-    [customContent, handleClose]
+    [handleClose]
   );
 
   const handleBlur: FocusEventHandler = useCallback(
@@ -276,15 +261,9 @@ export const Popover = ({
     width: 100%;
   `;
 
-  const resolvedWidth = popoverWidth
-    ? typeof popoverWidth === 'number'
-      ? `${popoverWidth}px`
-      : popoverWidth
-    : `${SIDE_PANEL_WIDTH}px`;
-
   const popoverContentStyles = css`
     --popover-max-height: 37.5rem;
-    width: ${resolvedWidth};
+    width: ${SIDE_PANEL_WIDTH}px;
     max-height: var(--popover-max-height);
     ${scrollStyles};
   `;
@@ -314,7 +293,7 @@ export const Popover = ({
       )}
       <EuiPopover
         aria-label={label}
-        anchorPosition={anchorPositionProp ?? 'rightUp'}
+        anchorPosition="rightUp"
         buffer={[TOP_BAR_HEIGHT + TOP_BAR_POPOVER_GAP, 0, BOTTOM_POPOVER_GAP, POPOVER_OFFSET]}
         button={enhancedTrigger}
         closePopover={handleClose}
@@ -336,10 +315,8 @@ export const Popover = ({
             popoverRef.current = ref;
 
             if (ref) {
-              if (!customContent) {
-                const elements = getFocusableElements(ref);
-                updateTabIndices(elements);
-              }
+              const elements = getFocusableElements(ref);
+              updateTabIndices(elements);
 
               if (shouldFocusOnOpen) {
                 focusFirstElement(popoverRef);
@@ -350,25 +327,19 @@ export const Popover = ({
           onKeyDown={handlePopoverKeyDown}
           css={popoverContentStyles}
         >
-          {!customContent && (
-            <EuiScreenReaderOnly>
-              <p id={popoverNavigationInstructionsId}>
-                {i18n.translate('core.ui.chrome.sideNavigation.popoverNavigationInstructions', {
-                  defaultMessage:
-                    'You are in the {label} secondary menu dialog. Use Up and Down arrow keys to navigate the menu. Press Escape to exit to the menu trigger.',
-                  values: {
-                    label,
-                  },
-                })}
-              </p>
-            </EuiScreenReaderOnly>
-          )}
+          <EuiScreenReaderOnly>
+            <p id={popoverNavigationInstructionsId}>
+              {i18n.translate('core.ui.chrome.sideNavigation.popoverNavigationInstructions', {
+                defaultMessage:
+                  'You are in the {label} secondary menu dialog. Use Up and Down arrow keys to navigate the menu. Press Escape to exit to the menu trigger.',
+                values: {
+                  label,
+                },
+              })}
+            </p>
+          </EuiScreenReaderOnly>
           {typeof children === 'function'
-            ? children(handleClose, {
-                popoverNavigationInstructionsId: customContent
-                  ? undefined
-                  : popoverNavigationInstructionsId,
-              })
+            ? children(handleClose, { popoverNavigationInstructionsId })
             : children}
         </div>
       </EuiPopover>
diff --git a/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx b/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx
index 6bc9fe5efb2f6..2e4f837ef5b8d 100644
--- a/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx
+++ b/src/core/packages/chrome/navigation/src/components/side_nav/side_panel.tsx
@@ -59,7 +59,7 @@ export interface SidePanelProps {
 }
 
 /**
- * Side navigation panel that opens on mouse click if the top-level item contains a submenu.
+ * Side navigation panel that opens on mouse click if the primary menu item contains a submenu.
  * Shows only in expanded mode.
  */
 export const SidePanel = ({ children, footer, openerNode }: SidePanelProps): JSX.Element => {
diff --git a/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx b/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
deleted file mode 100644
index 93cc6bd881079..0000000000000
--- a/src/core/packages/chrome/navigation/src/components/tool_item/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { forwardRef } from 'react';
-import type { KeyboardEvent, Ref } from 'react';
-import type { EuiButtonIconProps } from '@elastic/eui';
-
-import type { ToolItem as ToolItemData } from '../../../types';
-import { IconButton } from '../icon_button';
-import { NAVIGATION_SELECTOR_PREFIX } from '../../constants';
-
-export interface ToolItemProps
-  extends Omit<EuiButtonIconProps, 'href' | 'iconType' | 'onClick' | 'onKeyDown'>,
-    Omit<ToolItemData, 'sections' | 'renderPopover'> {
-  hasContent?: boolean;
-  isCollapsed?: boolean;
-  isHighlighted: boolean;
-  isNew: boolean;
-  onClick?: () => void;
-  onKeyDown?: (e: KeyboardEvent) => void;
-}
-
-export const ToolItem = forwardRef<HTMLButtonElement, ToolItemProps>(({ id, ...props }, ref) => (
-  <IconButton
-    ref={ref as Ref<HTMLElement>}
-    data-test-subj={`${NAVIGATION_SELECTOR_PREFIX}-toolItem-${id}`}
-    {...props}
-  />
-));
diff --git a/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts b/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
index a94a690fa2d83..01620f070cfe5 100644
--- a/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
+++ b/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
@@ -32,7 +32,7 @@ interface NavigationState {
  * - `actualActiveItemId` - the actual active item ID. There can only be one `aria-current=page` link on the page.
  * - `visuallyActivePageId` - the visually active page ID. The link does not have to be `aria-current=page`, it can be a parent of an active page.
  * - `visuallyActiveSubpageId` - the visually active subpage ID.
- * - `openerNode` - the top-level item whose submenu is shown in the side panel.
+ * - `openerNode` - the primary menu item whose submenu is shown in the side panel.
  * - `isCollapsed` - whether the side nav is collapsed.
  * - `isSidePanelOpen` - whether the side panel is open.
  */
diff --git a/src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts b/src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts
deleted file mode 100644
index aaf07f4db879b..0000000000000
--- a/src/core/packages/chrome/navigation/src/hooks/use_tool_shortcuts.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useCallback, useEffect } from 'react';
-import type { ToolItem } from '../../types';
-
-/**
- * Hook to handle keyboard shortcuts for tool items.
- * @param tools - The tool items to handle shortcuts for.
- */
-
-interface UseToolShortcutsProps {
-  tools: ToolItem[];
-}
-
-const isMac = (() => {
-  if (typeof navigator === 'undefined') return false;
-  const nav = navigator as Navigator & { userAgentData?: { platform?: string } };
-  const platform = (nav.userAgentData?.platform ?? nav.userAgent ?? '').toLowerCase();
-  return platform.includes('mac');
-})();
-
-export const useToolShortcuts = ({ tools }: UseToolShortcutsProps) => {
-  const onKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      const toolWithShortcut = tools.find(
-        (tool) =>
-          tool.shortcutKey &&
-          event.key === tool.shortcutKey &&
-          (isMac ? event.metaKey : event.ctrlKey)
-      );
-      if (toolWithShortcut) {
-        event.preventDefault();
-        toolWithShortcut.onClick?.();
-      }
-    },
-    [tools]
-  );
-
-  useEffect(() => {
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [onKeyDown]);
-};
diff --git a/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts b/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
index ccceda286ab06..3fc92540427c1 100644
--- a/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
+++ b/src/core/packages/chrome/navigation/src/utils/get_has_submenu.ts
@@ -7,15 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { MenuItem } from '../../types';
+
 /**
  * Utility function for checking whether the menu item has a submenu.
  *
  * @param item - the menu item to check.
  * @returns `true` if the menu item has a submenu, `false` otherwise.
  */
-export const getHasSubmenu = (item: {
-  sections?: ReadonlyArray<unknown>;
-  renderPopover?: unknown;
-}): boolean => {
-  return (!!item.sections && item.sections.length > 0) || !!item.renderPopover;
+export const getHasSubmenu = (item: MenuItem): boolean => {
+  return !!item.sections && item.sections.length > 0;
 };
diff --git a/src/core/packages/chrome/navigation/types.ts b/src/core/packages/chrome/navigation/types.ts
index 4b0fc7c1faa02..ad53ab969ba16 100644
--- a/src/core/packages/chrome/navigation/types.ts
+++ b/src/core/packages/chrome/navigation/types.ts
@@ -7,22 +7,19 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ReactNode } from 'react';
 import type { IconType } from '@elastic/eui';
 
 export type BadgeType = 'beta' | 'techPreview' | 'new';
 
 /**
  * A navigation item within a secondary/nested menu.
- * Secondary items appear when a top-level navigation item with sections is clicked or hovered.
- *
- * At least one of `href` or `onClick` must be provided.
+ * Secondary items appear when a primary menu item with sections is clicked or hovered.
  */
 export interface SecondaryMenuItem {
   /**
-   * (optional) The URL for the menu item link.
+   * The URL for the menu item link.
    */
-  href?: string;
+  href: string;
   /**
    * The unique identifier of the menu item.
    */
@@ -43,10 +40,6 @@ export interface SecondaryMenuItem {
    * (optional) Whether the link opens in a new tab.
    */
   isExternal?: boolean;
-  /**
-   * (optional) Click handler for action items (e.g. opening a flyout or modal).
-   */
-  onClick?: () => void;
 }
 
 /**
@@ -70,7 +63,7 @@ export interface SecondaryMenuSection {
 
 /**
  * A primary navigation menu item that appears in the main navigation sidebar.
- * Primary items must always be navigable links.
+ * Can optionally contain nested secondary menu sections.
  */
 export interface MenuItem {
   /**
@@ -104,43 +97,12 @@ export interface MenuItem {
 }
 
 /**
- * A chrome tool control (search, help, profile, etc.) — not a navigation destination.
- * Tool items can perform an action via `onClick` or expose submenu content via `sections`.
- *
- * At least one of `iconType` or `renderContent` must be provided.
- * When both are present, `renderContent` takes precedence for the trigger visual.
- *
- * When `renderPopover` is present, it takes precedence over `sections` for the
- * popover body content. They are not combined.
- */
-export interface ToolItem {
-  id: string;
-  label: string;
-  iconType?: IconType;
-  renderContent?: (state: { isCollapsed: boolean }) => ReactNode;
-  renderPopover?: (closePopover: () => void) => ReactNode;
-  onClick?: () => void;
-  sections?: SecondaryMenuSection[];
-  popoverWidth?: number | string;
-  badgeType?: BadgeType;
-  'data-test-subj'?: string;
-  shortcutKey?: string;
-}
-
-/**
- * Optional groupings of tool controls for the sidenav header and footer toolbars.
- */
-export interface ToolSlots {
-  headerTools?: ToolItem[];
-  footerTools?: ToolItem[];
-}
-
-/**
- * Navigable sidenav content: primary rail and footer links.
+ * The complete navigation structure containing primary and footer menu items.
+ * This is the main data structure passed to the Navigation component.
  */
 export interface NavigationStructure {
   /**
-   * The items to be displayed in the navigation footer (navigable links).
+   * The items to be displayed in the navigation footer.
    */
   footerItems: MenuItem[];
   /**
@@ -177,20 +139,10 @@ export interface SideNavLogo {
    * The label for the logo, typically the product name.
    */
   label: string;
-  /**
-   * When `true`, the label is not rendered under the icon while the navigation is expanded.
-   * The logo link still uses `label` for `aria-label` and for the collapsed-mode tooltip.
-   */
-  hideLabel?: boolean;
   /**
    * The logo type, e.g. `appObservability`, `appSecurity`, etc.
    */
   iconType: string;
-  /**
-   * (optional) Color of the logo icon. `'default'` renders the icon in its brand colors;
-   * `'text'` renders it monochromatically using the current text color.
-   */
-  iconColor?: 'default' | 'text';
   /**
    * (optional) `data-test-subj` attribute for testing and tracking purposes.
    */
diff --git a/src/platform/plugins/shared/discover/moon.yml b/src/platform/plugins/shared/discover/moon.yml
index e5e09a7f3ac1f..6b79293c583aa 100644
--- a/src/platform/plugins/shared/discover/moon.yml
+++ b/src/platform/plugins/shared/discover/moon.yml
@@ -143,6 +143,7 @@ dependsOn:
   - '@kbn/presentation-util-plugin'
   - '@kbn/core-saved-objects-common'
   - '@kbn/as-code-filters-constants'
+  - '@kbn/core-chrome-feature-flags'
 tags:
   - plugin
   - prod

From 3ef4b1e0e2a8cf5f36dc4445f559f934da8e20ef Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 13 Apr 2026 10:29:15 +0200
Subject: [PATCH 25/77] [Chrome Next] Bootstrap GlobalHeader and composable
 header shells (#262582)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Restructures the Chrome-Next header components into composable layout
shells and pre-wired assemblies:

- Renames `project_next/` to `chrome_next/` with `app_header/` and
`global_header/` sub-folders
- Creates `GlobalHeaderShell` and `AppHeaderShell` — pure layout
components with ReactNode slot props that own the flex structure but not
the content
- `GlobalHeader` and `AppHeader` assemblies wire concrete leaf
components (logo, back button, title, app menu, etc.) into the shells
- `AppHeaderShell` is designed for the full end-state with slots for
badges, metadata, callout, and tabs rows (currently unpopulated)
- Bootstraps the `GlobalHeader` with Elastic logo home link and AI
button
- Moves AI button from app header to global header

<img width="1565" height="1083" alt="Screenshot 2026-04-10 at 17 52 35"
src="https://github.com/user-attachments/assets/d6c091e5-a17c-4874-9c56-eb251d456829"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../chrome/browser-components/index.ts        |   3 +-
 .../src/chrome_next/app_header/app_header.tsx |  26 ++++
 .../app_header/app_header_shell.tsx           | 143 ++++++++++++++++++
 .../app_header}/app_menu.tsx                  |  17 +--
 .../app_header/app_title.tsx}                 |   8 +-
 .../app_header}/back_button.tsx               |  15 +-
 .../app_header}/global_actions.tsx            |  17 +--
 .../app_header}/hooks/index.ts                |   3 +-
 .../app_header/hooks/use_app_header_menu.ts}  |   5 +-
 .../app_header}/hooks/use_back_button.ts      |   6 +-
 .../hooks/use_report_top_bar_height.ts        |   1 -
 .../app_header}/hooks/use_title.ts            |   7 +-
 .../app_header}/index.ts                      |   4 +-
 .../global_header}/ai_button_slot.tsx         |   4 +-
 .../global_header/global_header.tsx           |  19 +++
 .../global_header/global_header_logo.tsx      |  31 ++++
 .../global_header/global_header_shell.tsx     | 125 +++++++++++++++
 .../src/chrome_next/global_header/index.ts    |  12 ++
 .../global_header}/use_ai_button.ts           |   0
 .../src/chrome_next/index.ts                  |  13 ++
 .../src/project_next/header.tsx               |  98 ------------
 .../src/project_next/trailing_actions.tsx     |  58 -------
 .../chrome/browser/src/chrome_next/header.ts  |   4 +-
 .../layouts/grid/grid_layout.tsx              |  10 +-
 24 files changed, 414 insertions(+), 215 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/app_menu.tsx (66%)
 rename src/core/packages/chrome/browser-components/src/{project_next/title.tsx => chrome_next/app_header/app_title.tsx} (82%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/back_button.tsx (66%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/global_actions.tsx (78%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/hooks/index.ts (84%)
 rename src/core/packages/chrome/browser-components/src/{project_next/hooks/use_project_next_app_menu.ts => chrome_next/app_header/hooks/use_app_header_menu.ts} (78%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/hooks/use_back_button.ts (89%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/hooks/use_report_top_bar_height.ts (99%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/hooks/use_title.ts (72%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/app_header}/index.ts (74%)
 rename src/core/packages/chrome/browser-components/src/{project_next => chrome_next/global_header}/ai_button_slot.tsx (87%)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts
 rename src/core/packages/chrome/browser-components/src/{project_next/hooks => chrome_next/global_header}/use_ai_button.ts (100%)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/index.ts
 delete mode 100644 src/core/packages/chrome/browser-components/src/project_next/header.tsx
 delete mode 100644 src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx

diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 0ed6dac9d116e..0b4d666ed0b73 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -12,7 +12,8 @@ export type { ChromeComponentsDeps } from './src/context';
 
 export { ClassicHeader } from './src/classic';
 export { ProjectHeader } from './src/project';
-export { ProjectNextHeader } from './src/project_next';
+export { AppHeader, AppHeaderShell, GlobalHeader, GlobalHeaderShell } from './src/chrome_next';
+export type { AppHeaderShellProps, GlobalHeaderShellProps } from './src/chrome_next';
 export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_sidenav';
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
new file mode 100644
index 0000000000000..cf4cf3be9218b
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { AppHeaderShell } from './app_header_shell';
+import { BackButton } from './back_button';
+import { AppTitle } from './app_title';
+import { GlobalActions } from './global_actions';
+import { AppMenu } from './app_menu';
+
+export const AppHeader = React.memo(() => (
+  <AppHeaderShell
+    leading={<BackButton />}
+    title={<AppTitle />}
+    titleActions={<GlobalActions />}
+    trailing={<AppMenu />}
+  />
+));
+
+AppHeader.displayName = 'AppHeader';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
new file mode 100644
index 0000000000000..9136bb15813b2
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { useReportTopBarHeight } from './hooks';
+
+/** Minimum row height; aligns with project layout `applicationTopBarHeight`. */
+const APPLICATION_TOP_BAR_HEIGHT_PX = 48;
+
+export interface AppHeaderShellProps {
+  leading?: ReactNode;
+  title?: ReactNode;
+  badges?: ReactNode;
+  titleActions?: ReactNode;
+  trailing?: ReactNode;
+  metadata?: ReactNode;
+  callout?: ReactNode;
+  tabs?: ReactNode;
+}
+
+const useHeaderStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const root = css`
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+      box-sizing: border-box;
+      padding: 0 ${euiTheme.size.s};
+      background: ${euiTheme.colors.backgroundBasePlain};
+      border-bottom: ${euiTheme.border.thin};
+      margin-bottom: -${euiTheme.border.width.thin};
+    `;
+
+    const primaryRow = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+      min-width: 0;
+      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+    `;
+
+    const titleCluster = css`
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    `;
+
+    const titleGroup = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+    `;
+
+    const titleClusterSpacer = css`
+      flex: 1 1 auto;
+      min-width: 0;
+    `;
+
+    const metadataRow = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.s};
+      padding-bottom: ${euiTheme.size.s};
+    `;
+
+    const calloutRow = css`
+      padding-bottom: ${euiTheme.size.s};
+    `;
+
+    const tabsRow = css`
+      display: flex;
+      align-items: stretch;
+    `;
+
+    return {
+      root,
+      primaryRow,
+      titleCluster,
+      titleGroup,
+      titleClusterSpacer,
+      metadataRow,
+      calloutRow,
+      tabsRow,
+    };
+  }, [euiTheme]);
+};
+
+export const AppHeaderShell = React.memo<AppHeaderShellProps>(
+  ({ leading, title, badges, titleActions, trailing, metadata, callout, tabs }) => {
+    const styles = useHeaderStyles();
+    const heightRef = useReportTopBarHeight();
+
+    return (
+      <div ref={heightRef} css={styles.root} data-test-subj="chromeNextAppHeader">
+        <div css={styles.primaryRow}>
+          {leading}
+          <div css={styles.titleCluster}>
+            <div css={styles.titleGroup}>
+              {title}
+              {badges}
+              {titleActions}
+            </div>
+            <div css={styles.titleClusterSpacer} aria-hidden />
+          </div>
+          {trailing}
+        </div>
+        {metadata && (
+          <div css={styles.metadataRow} data-test-subj="chromeNextAppHeaderMetadata">
+            {metadata}
+          </div>
+        )}
+        {callout && (
+          <div css={styles.calloutRow} data-test-subj="chromeNextAppHeaderCallout">
+            {callout}
+          </div>
+        )}
+        {tabs && (
+          <div css={styles.tabsRow} data-test-subj="chromeNextAppHeaderTabs">
+            {tabs}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+AppHeaderShell.displayName = 'AppHeaderShell';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
similarity index 66%
rename from src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
index ed2b371d66e5c..bcac05ad4c39b 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/app_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
@@ -8,21 +8,18 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
-import { HeaderActionMenu } from '../shared/header_action_menu';
-import { useProjectNextAppMenu } from './hooks';
+import { useHasLegacyActionMenu } from '../../shared/chrome_hooks';
+import { HeaderActionMenu } from '../../shared/header_action_menu';
+import { useAppHeaderMenu } from './hooks';
 
 const AppMenuComponent = lazy(async () => {
   const { AppMenuComponent: Component } = await import('@kbn/core-chrome-app-menu-components');
   return { default: Component };
 });
 
-/**
- * Renders the app menu for the Chrome-Next project header.
- * Fallback chain: merged AppMenuConfig -> legacy HeaderActionMenu -> nothing.
- */
-export const ProjectNextAppMenu = React.memo(() => {
-  const appMenuConfig = useProjectNextAppMenu();
+/** Fallback chain: AppMenuConfig -> legacy HeaderActionMenu -> nothing. */
+export const AppMenu = React.memo(() => {
+  const appMenuConfig = useAppHeaderMenu();
   const hasLegacyActionMenu = useHasLegacyActionMenu();
 
   if (appMenuConfig) {
@@ -40,4 +37,4 @@ export const ProjectNextAppMenu = React.memo(() => {
   return null;
 });
 
-ProjectNextAppMenu.displayName = 'ProjectNextAppMenu';
+AppMenu.displayName = 'AppMenu';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/title.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx
similarity index 82%
rename from src/core/packages/chrome/browser-components/src/project_next/title.tsx
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx
index 32bf62ce17f50..a29b06184f514 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/title.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx
@@ -32,11 +32,7 @@ const useTitleStyles = () => {
   }, [euiTheme]);
 };
 
-/**
- * Title region for the Chrome-Next project header: renders nothing when
- * `useTitle()` has no string; otherwise an `h1` with Emotion styles.
- */
-export const ProjectNextTitle = React.memo(() => {
+export const AppTitle = React.memo(() => {
   const title = useTitle();
   const styles = useTitleStyles();
 
@@ -47,4 +43,4 @@ export const ProjectNextTitle = React.memo(() => {
   return <h1 css={styles.title}>{title}</h1>;
 });
 
-ProjectNextTitle.displayName = 'ProjectNextTitle';
+AppTitle.displayName = 'AppTitle';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
similarity index 66%
rename from src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
index bc79b3ca3e3d5..e35199356d17d 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/back_button.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
@@ -12,12 +12,7 @@ import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { useBackButton } from './hooks';
 
-/**
- * Back control for Chrome-Next project header: uses explicit `chrome.next.header` `back` when
- * set; otherwise the last non-last project breadcrumb with an `href` (≥2 crumbs; scanning
- * right to left). Renders nothing when neither applies.
- */
-export const ProjectNextBackButton = React.memo(() => {
+export const BackButton = React.memo(() => {
   const back = useBackButton();
 
   const ariaLabel = useMemo(() => {
@@ -25,12 +20,12 @@ export const ProjectNextBackButton = React.memo(() => {
       return '';
     }
     if (back.backDestinationLabel) {
-      return i18n.translate('core.ui.chrome.projectNextHeader.backButtonAriaLabelWithDestination', {
+      return i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabelWithDestination', {
         defaultMessage: 'Back to {destination}',
         values: { destination: back.backDestinationLabel },
       });
     }
-    return i18n.translate('core.ui.chrome.projectNextHeader.backButtonAriaLabel', {
+    return i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabel', {
       defaultMessage: 'Back',
     });
   }, [back]);
@@ -46,10 +41,10 @@ export const ProjectNextBackButton = React.memo(() => {
       display="empty"
       size="s"
       aria-label={ariaLabel}
-      data-test-subj="chromeProjectNextHeaderBack"
+      data-test-subj="chromeNextAppHeaderBack"
       href={back.backHref}
     />
   );
 });
 
-ProjectNextBackButton.displayName = 'ProjectNextBackButton';
+BackButton.displayName = 'BackButton';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
similarity index 78%
rename from src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
index d298186962694..2e3d0b0c8c389 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/global_actions.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
@@ -11,9 +11,9 @@ import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
-import { useNextHeader } from '../shared/chrome_hooks';
+import { useNextHeader } from '../../shared/chrome_hooks';
 
-const SHARE_ARIA_LABEL = i18n.translate('core.ui.chrome.projectNextHeader.globalShareAriaLabel', {
+const SHARE_ARIA_LABEL = i18n.translate('core.ui.chrome.appHeader.globalShareAriaLabel', {
   defaultMessage: 'Share',
 });
 
@@ -39,12 +39,11 @@ const useGlobalActionsStyles = () => {
 };
 
 /**
- * Fixed-order global object actions (editTitle, share, favorite) next to the Chrome-Next title.
+ * Fixed-order global object actions (editTitle, share, favorite) next to the title.
  * Only renders actions the page opts into via `chrome.next.header.set({ globalActions })`.
- *
  * Favorite is a `ReactNode` slot so plugins own full behavior (clients, context, React Query).
  */
-export const ProjectNextGlobalActions = React.memo(() => {
+export const GlobalActions = React.memo(() => {
   const config = useNextHeader();
   const styles = useGlobalActionsStyles();
   const globalActions = config?.globalActions;
@@ -60,7 +59,7 @@ export const ProjectNextGlobalActions = React.memo(() => {
   }
 
   return (
-    <div css={styles.root} data-test-subj="chromeProjectNextHeaderGlobalActions">
+    <div css={styles.root} data-test-subj="chromeNextAppHeaderGlobalActions">
       {/* TODO: editTitle — Chrome-controlled inline title editor; wire onSave from config */}
       {share ? (
         <EuiButtonIcon
@@ -69,12 +68,12 @@ export const ProjectNextGlobalActions = React.memo(() => {
           display="empty"
           size="s"
           aria-label={SHARE_ARIA_LABEL}
-          data-test-subj="chromeProjectNextHeaderGlobalShare"
+          data-test-subj="chromeNextAppHeaderGlobalShare"
           onClick={share.onClick}
         />
       ) : null}
       {favorite ? (
-        <div css={styles.favoriteSlot} data-test-subj="chromeProjectNextHeaderGlobalFavoriteSlot">
+        <div css={styles.favoriteSlot} data-test-subj="chromeNextAppHeaderGlobalFavoriteSlot">
           {favorite}
         </div>
       ) : null}
@@ -82,4 +81,4 @@ export const ProjectNextGlobalActions = React.memo(() => {
   );
 });
 
-ProjectNextGlobalActions.displayName = 'ProjectNextGlobalActions';
+GlobalActions.displayName = 'GlobalActions';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
similarity index 84%
rename from src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
index 0b3ba150d2b3c..0b070a122b120 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
@@ -7,8 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { useAiButtons } from './use_ai_button';
-export { useProjectNextAppMenu } from './use_project_next_app_menu';
+export { useAppHeaderMenu } from './use_app_header_menu';
 export { useBackButton } from './use_back_button';
 export { useReportTopBarHeight } from './use_report_top_bar_height';
 export { useTitle } from './use_title';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
similarity index 78%
rename from src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
index 33c08b3d5c4dc..d742f0ffaa742 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_project_next_app_menu.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
@@ -8,13 +8,12 @@
  */
 
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
-import { useAppMenu, useNextHeader } from '../../shared/chrome_hooks';
+import { useAppMenu, useNextHeader } from '../../../shared/chrome_hooks';
 
 /**
- * Returns the app menu config for the Chrome-Next project header.
  * Fallback: `config.appMenu` from `chrome.next.header.set()` -> global `chrome.getAppMenu$()`.
  */
-export function useProjectNextAppMenu(): AppMenuConfig | undefined {
+export function useAppHeaderMenu(): AppMenuConfig | undefined {
   const config = useNextHeader();
   const globalAppMenu = useAppMenu();
   return config?.appMenu ?? globalAppMenu;
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
similarity index 89%
rename from src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
index 20719383c6028..d6cf302e97c52 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_back_button.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
@@ -8,8 +8,8 @@
  */
 
 import { useMemo } from 'react';
-import { useNextHeader, useProjectBreadcrumbs } from '../../shared/chrome_hooks';
-import { getBreadcrumbPlainText } from '../../shared/breadcrumb_utils';
+import { useNextHeader, useProjectBreadcrumbs } from '../../../shared/chrome_hooks';
+import { getBreadcrumbPlainText } from '../../../shared/breadcrumb_utils';
 
 export interface BackNavigation {
   backHref: string;
@@ -18,7 +18,7 @@ export interface BackNavigation {
 }
 
 /**
- * Resolution: explicit `chrome.next.header` `back.href` (and optional `back.label`) → else the
+ * Resolution: explicit `chrome.next.header` `back.href` (and optional `back.label`) -> else the
  * last non-last project breadcrumb with a truthy `href` (scanning right to left). Returns
  * `undefined` if neither applies.
  */
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts
similarity index 99%
rename from src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts
index 046223bcef46a..55c0486deec1a 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_report_top_bar_height.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts
@@ -13,7 +13,6 @@ import { useLayoutUpdate } from '@kbn/core-chrome-layout-components';
 /**
  * Measures the height of the application top bar via ResizeObserver and
  * reports it to the layout system through `useLayoutUpdate`.
- *
  * Returns a ref callback to attach to the top bar root element.
  * Reports `0` when the element is removed or on unmount.
  */
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
similarity index 72%
rename from src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
index c2f084c5decc1..047ef3aa8b05f 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_title.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
@@ -7,12 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { useNextHeader, useProjectBreadcrumbs } from '../../shared/chrome_hooks';
-import { getBreadcrumbPlainText } from '../../shared/breadcrumb_utils';
+import { useNextHeader, useProjectBreadcrumbs } from '../../../shared/chrome_hooks';
+import { getBreadcrumbPlainText } from '../../../shared/breadcrumb_utils';
 
 /**
- * Returns the display title for the Chrome-Next project header, or `undefined` when none.
- * Resolution: explicit `config.title` -> project breadcrumb text (last crumb) -> `undefined`.
+ * Resolution: explicit `config.title` -> last project breadcrumb text -> `undefined`.
  */
 export function useTitle(): string | undefined {
   const config = useNextHeader();
diff --git a/src/core/packages/chrome/browser-components/src/project_next/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/index.ts
similarity index 74%
rename from src/core/packages/chrome/browser-components/src/project_next/index.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/app_header/index.ts
index 1743a03c9c3b0..d5fd4180431f8 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/index.ts
@@ -7,4 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ProjectNextHeader } from './header';
+export { AppHeader } from './app_header';
+export { AppHeaderShell } from './app_header_shell';
+export type { AppHeaderShellProps } from './app_header_shell';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/ai_button_slot.tsx
similarity index 87%
rename from src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
rename to src/core/packages/chrome/browser-components/src/chrome_next/global_header/ai_button_slot.tsx
index 97765863b4771..d4cc22d0fc20e 100644
--- a/src/core/packages/chrome/browser-components/src/project_next/ai_button_slot.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/ai_button_slot.tsx
@@ -8,8 +8,8 @@
  */
 
 import React from 'react';
-import { HeaderExtension } from '../shared/header_extension';
-import { useAiButtons } from './hooks';
+import { HeaderExtension } from '../../shared/header_extension';
+import { useAiButtons } from './use_ai_button';
 
 export const AiButtonSlot = React.memo(() => {
   const buttons = useAiButtons();
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
new file mode 100644
index 0000000000000..3e09feda7bb6b
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { GlobalHeaderShell } from './global_header_shell';
+import { GlobalHeaderLogo } from './global_header_logo';
+import { AiButtonSlot } from './ai_button_slot';
+
+export const GlobalHeader = React.memo(() => (
+  <GlobalHeaderShell logo={<GlobalHeaderLogo />} actions={<AiButtonSlot />} />
+));
+
+GlobalHeader.displayName = 'GlobalHeader';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx
new file mode 100644
index 0000000000000..026daf85040dd
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useProjectHome, useBasePath, useCustomBranding } from '../../shared/chrome_hooks';
+import { LoadingIndicator } from '../../shared/loading_indicator';
+
+const LOGO_ARIA_LABEL = i18n.translate('core.ui.chrome.globalHeader.logoAriaLabel', {
+  defaultMessage: 'Elastic home',
+});
+
+export const GlobalHeaderLogo = React.memo(() => {
+  const basePath = useBasePath();
+  const homeHref = basePath.prepend(useProjectHome());
+  const { logo: customLogo } = useCustomBranding();
+
+  return (
+    <a href={homeHref} aria-label={LOGO_ARIA_LABEL} data-test-subj="chromeNextGlobalHeaderLogo">
+      <LoadingIndicator customLogo={customLogo} />
+    </a>
+  );
+});
+
+GlobalHeaderLogo.displayName = 'GlobalHeaderLogo';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
new file mode 100644
index 0000000000000..b77d454901b37
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { COLLAPSED_WIDTH, EXPANDED_WIDTH } from '@kbn/core-chrome-navigation';
+import { useSideNavCollapsed } from '@kbn/core-chrome-browser-hooks';
+import React, { useMemo } from 'react';
+
+const GLOBAL_HEADER_HEIGHT_PX = 48;
+
+const logoSlot = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 'var(--logo-width)',
+  height: GLOBAL_HEADER_HEIGHT_PX,
+  flexShrink: 0,
+});
+
+export interface GlobalHeaderShellProps {
+  logo?: ReactNode;
+  switcher?: ReactNode;
+  search?: ReactNode;
+  actions?: ReactNode;
+}
+
+const useGlobalHeaderStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const root = css`
+      display: flex;
+      align-items: center;
+      height: ${GLOBAL_HEADER_HEIGHT_PX}px;
+      box-sizing: border-box;
+      padding: 0 ${euiTheme.size.s} 0 0;
+      background: ${euiTheme.colors.backgroundTransparent};
+    `;
+
+    const leftGroup = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.s};
+      flex-shrink: 0;
+    `;
+
+    const switcherSlot = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+    `;
+
+    const spacer = css`
+      flex: 1 1 auto;
+      min-width: 0;
+    `;
+
+    const rightGroup = css`
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: ${euiTheme.size.s};
+    `;
+
+    const searchSlot = css`
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    `;
+
+    const actionsSlot = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.s};
+    `;
+
+    return { root, leftGroup, switcherSlot, spacer, rightGroup, searchSlot, actionsSlot };
+  }, [euiTheme]);
+};
+
+export const GlobalHeaderShell = React.memo<GlobalHeaderShellProps>(
+  ({ logo, switcher, search, actions }) => {
+    const { isCollapsed } = useSideNavCollapsed();
+    const styles = useGlobalHeaderStyles();
+    const logoWidth = isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
+
+    return (
+      <header css={styles.root} data-test-subj="chromeNextGlobalHeader">
+        <div css={styles.leftGroup}>
+          <div css={logoSlot} style={{ '--logo-width': `${logoWidth}px` } as React.CSSProperties}>
+            {logo}
+          </div>
+          {switcher && (
+            <div css={styles.switcherSlot} data-test-subj="chromeNextGlobalHeaderSwitcher">
+              {switcher}
+            </div>
+          )}
+        </div>
+        <div css={styles.spacer} />
+        <div css={styles.rightGroup}>
+          {search && (
+            <div css={styles.searchSlot} data-test-subj="chromeNextGlobalHeaderSearch">
+              {search}
+            </div>
+          )}
+          {actions && (
+            <div css={styles.actionsSlot} data-test-subj="chromeNextGlobalHeaderActions">
+              {actions}
+            </div>
+          )}
+        </div>
+      </header>
+    );
+  }
+);
+
+GlobalHeaderShell.displayName = 'GlobalHeaderShell';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts
new file mode 100644
index 0000000000000..fcdd0fa6bd0f4
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { GlobalHeader } from './global_header';
+export { GlobalHeaderShell } from './global_header_shell';
+export type { GlobalHeaderShellProps } from './global_header_shell';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/use_ai_button.ts
similarity index 100%
rename from src/core/packages/chrome/browser-components/src/project_next/hooks/use_ai_button.ts
rename to src/core/packages/chrome/browser-components/src/chrome_next/global_header/use_ai_button.ts
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
new file mode 100644
index 0000000000000..222d68d187f29
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { AppHeader, AppHeaderShell } from './app_header';
+export type { AppHeaderShellProps } from './app_header';
+export { GlobalHeader, GlobalHeaderShell } from './global_header';
+export type { GlobalHeaderShellProps } from './global_header';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/header.tsx b/src/core/packages/chrome/browser-components/src/project_next/header.tsx
deleted file mode 100644
index f2f20babb0b6b..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project_next/header.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
-import React, { useMemo } from 'react';
-import { ProjectNextBackButton } from './back_button';
-import { ProjectNextGlobalActions } from './global_actions';
-import { useReportTopBarHeight } from './hooks';
-import { ProjectNextTitle } from './title';
-import { ProjectNextTrailingActions } from './trailing_actions';
-
-/** Application top bar height; aligns with project layout `applicationTopBarHeight`. */
-const APPLICATION_TOP_BAR_HEIGHT_PX = 48;
-
-const useHeaderStyles = () => {
-  const { euiTheme } = useEuiTheme();
-
-  return useMemo(() => {
-    const root = css`
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      height: 100%;
-      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
-      box-sizing: border-box;
-      padding: 0 ${euiTheme.size.s};
-      background: ${euiTheme.colors.backgroundBasePlain};
-      border-bottom: ${euiTheme.border.thin};
-      margin-bottom: -${euiTheme.border.width.thin};
-    `;
-
-    const primaryRow = css`
-      display: flex;
-      align-items: center;
-      gap: ${euiTheme.size.xs};
-      min-width: 0;
-      flex: 1;
-      min-height: 0;
-    `;
-
-    const titleCluster = css`
-      display: flex;
-      align-items: center;
-      flex: 1;
-      min-width: 0;
-    `;
-
-    /**
-     * Keeps the title and global actions grouped on the left; the title truncates with ellipsis
-     * instead of growing and pushing icons toward the app menu (trailing) region.
-     */
-    const titleGroup = css`
-      display: flex;
-      align-items: center;
-      gap: ${euiTheme.size.xs};
-      flex: 0 1 auto;
-      min-width: 0;
-      max-width: 100%;
-    `;
-
-    const titleClusterSpacer = css`
-      flex: 1 1 auto;
-      min-width: 0;
-    `;
-
-    return { root, primaryRow, titleCluster, titleGroup, titleClusterSpacer };
-  }, [euiTheme]);
-};
-
-export const ProjectNextHeader = React.memo(() => {
-  const styles = useHeaderStyles();
-  const heightRef = useReportTopBarHeight();
-
-  return (
-    <div ref={heightRef} css={styles.root} data-test-subj="chromeProjectNextHeader">
-      <div css={styles.primaryRow}>
-        <ProjectNextBackButton />
-        <div css={styles.titleCluster}>
-          <div css={styles.titleGroup}>
-            <ProjectNextTitle />
-            <ProjectNextGlobalActions />
-          </div>
-          <div css={styles.titleClusterSpacer} aria-hidden />
-        </div>
-        <ProjectNextTrailingActions />
-      </div>
-    </div>
-  );
-});
-
-ProjectNextHeader.displayName = 'ProjectNextHeader';
diff --git a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx b/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
deleted file mode 100644
index cc5ec747af9f8..0000000000000
--- a/src/core/packages/chrome/browser-components/src/project_next/trailing_actions.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
-import React, { useMemo } from 'react';
-import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
-import { AiButtonSlot } from './ai_button_slot';
-import { ProjectNextAppMenu } from './app_menu';
-import { useAiButtons, useProjectNextAppMenu } from './hooks';
-
-const useTrailingStyles = () => {
-  const { euiTheme } = useEuiTheme();
-
-  return useMemo(() => {
-    const root = css`
-      display: flex;
-      align-items: center;
-      gap: ${euiTheme.size.s};
-      flex-shrink: 0;
-      margin-left: auto;
-    `;
-
-    return { root };
-  }, [euiTheme]);
-};
-
-/**
- * Trailing region of the Chrome-Next project header (app menu, AI button, future global actions).
- * Renders nothing when no trailing content is available.
- */
-export const ProjectNextTrailingActions = React.memo(() => {
-  const appMenuConfig = useProjectNextAppMenu();
-  const hasLegacyActionMenu = useHasLegacyActionMenu();
-  const aiButtons = useAiButtons();
-  const styles = useTrailingStyles();
-
-  const hasTrailingContent = !!appMenuConfig || hasLegacyActionMenu || aiButtons.length > 0;
-
-  if (!hasTrailingContent) {
-    return null;
-  }
-
-  return (
-    <div css={styles.root} data-test-subj="chromeProjectNextHeaderTrailing">
-      <ProjectNextAppMenu />
-      <AiButtonSlot />
-    </div>
-  );
-});
-
-ProjectNextTrailingActions.displayName = 'ProjectNextTrailingActions';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
index 795a68924bb88..59b75eb0beaee 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/header.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/header.ts
@@ -24,13 +24,13 @@ export interface ChromeNextHeaderConfig {
 
   /**
    * Badges inline next to the title. Chrome shows 1–2 as-is; for 3+, first badge plus "+N" popover
-   * for the rest. Max 200px per badge; `filled` is not exposed. TODO: render in `ProjectNextHeader`.
+   * for the rest. Max 200px per badge; `filled` is not exposed. TODO: render in `AppHeader`.
    */
   badges?: ChromeNextHeaderBadge[];
 
   /**
    * Second row below the title (max 3 items, all visible). Text (`EuiText`) or button (`EuiButtonEmpty`).
-   * TODO: render in `ProjectNextHeader`.
+   * TODO: render in `AppHeader`.
    */
   metadata?: ChromeNextHeaderMetadataSlotItem[];
 
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index 6e2d44dc74e99..e9035e6b0a99a 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -15,7 +15,8 @@ import {
   ChromeComponentsProvider,
   ClassicHeader,
   ProjectHeader,
-  ProjectNextHeader,
+  AppHeader,
+  GlobalHeader,
   GridLayoutProjectSideNav,
   HeaderTopBanner,
   ChromelessHeader,
@@ -66,14 +67,12 @@ const layoutConfigs: {
   },
   projectNext: {
     chromeStyle: 'project',
-    headerHeight: 0,
+    headerHeight: 48,
     bannerHeight: 32,
 
-    /** Height is reported dynamically by ProjectNextHeader via useReportLayoutHeight */
     applicationTopBarHeight: 0,
     applicationMarginRight: 8,
     applicationMarginBottom: 8,
-    applicationMarginTop: 8,
     sidebarWidth: 0,
     footerHeight: 0,
     navigationWidth: 0,
@@ -124,8 +123,9 @@ const useChromeSlots = (nextChrome: boolean): ChromeSlots => {
   if (nextChrome) {
     return {
       ...base,
+      header: <GlobalHeader />,
       navigation: <GridLayoutProjectSideNav />,
-      applicationTopBar: <ProjectNextHeader />,
+      applicationTopBar: <AppHeader />,
     };
   }
 

From 6ef32ee36ef373b52d8eb6b8a1f3943dcb4f302a Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Mon, 13 Apr 2026 11:44:51 +0200
Subject: [PATCH 26/77] [Chrome Next] Add badges (#262715)

## Summary

This PR adds badges API for chrome next. It intentionally does NOT
migrate badges that use `renderCustomBadge` as they use functionality
that does not exist for chrome next badges (e.g. open popovers, have
icons) and changing that requires design decisions.

Closes: https://github.com/elastic/kibana/issues/259987
---
 .../src/chrome_next/app_header/app_badge.tsx  |  67 ++++++++++++
 .../src/chrome_next/app_header/app_badges.tsx | 103 ++++++++++++++++++
 .../src/chrome_next/app_header/app_header.tsx |   2 +
 .../app_header/hooks/use_app_badges.ts        |  56 ++++++++++
 .../chrome/browser-internal-types/index.ts    |   6 +
 .../browser-internal/src/chrome_api.tsx       |   1 +
 .../browser-mocks/src/chrome_service.mock.ts  |   1 +
 .../chrome/browser/src/chrome_next/header.ts  |   5 +-
 src/core/packages/chrome/browser/src/types.ts |   3 +
 9 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
new file mode 100644
index 0000000000000..17c2eaba83107
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo } from 'react';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+
+const useBadgeStyle = () => {
+  return useMemo(() => {
+    const badge = css`
+      max-width: 200px;
+    `;
+
+    return { badge };
+  }, []);
+};
+
+export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
+  const { badge: badgeStyle } = useBadgeStyle();
+
+  // @ts-expect-error supported for backward compatibility. TODO: Remove it
+  if (badge?.renderCustomBadge) {
+    // @ts-expect-error supported for backward compatibility. TODO: Remove it
+    return badge.renderCustomBadge({ badgeText: badge.label });
+  }
+
+  const badgeOnClickAriaLabel =
+    badge?.onClickAriaLabel ??
+    i18n.translate('core.ui.chrome.appHeader.badge.ariaLabel', {
+      defaultMessage: 'Click {label} badge',
+      values: { label: badge.label },
+    });
+
+  const handleBadgeClick = () => {
+    if (badge?.onClick) {
+      badge.onClick();
+    }
+  };
+
+  const badgeComponent = (
+    <EuiBadge
+      onClick={handleBadgeClick}
+      onClickAriaLabel={badgeOnClickAriaLabel}
+      color={badge?.color ?? 'hollow'}
+      data-test-subj={badge?.['data-test-subj']}
+      css={badgeStyle}
+    >
+      {badge.label}
+    </EuiBadge>
+  );
+
+  if (badge?.tooltip) {
+    return <EuiToolTip content={badge.tooltip}>{badgeComponent}</EuiToolTip>;
+  }
+
+  return badgeComponent;
+};
+
+AppBadge.displayName = 'AppBadge';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
new file mode 100644
index 0000000000000..87a30a0a36cc4
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { memo, useMemo, useState } from 'react';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiPopover, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { AppBadge } from './app_badge';
+import { useAppBadges } from './hooks/use_app_badges';
+
+const MAX_VISIBLE_BADGES = 2;
+
+const useBadgesStyle = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const badgesContainer = css`
+      margin-left: ${euiTheme.size.s};
+    `;
+
+    return { badgesContainer };
+  }, [euiTheme]);
+};
+
+export const AppBadges = memo(() => {
+  const badges = useAppBadges();
+  const { badgesContainer } = useBadgesStyle();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  if (!badges || badges.length === 0) {
+    return null;
+  }
+
+  const visibleBadges = badges.slice(0, MAX_VISIBLE_BADGES);
+  const overflowBadges = badges.slice(MAX_VISIBLE_BADGES);
+
+  const handleClosePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  const handleTogglePopover = () => {
+    setIsPopoverOpen((open) => !open);
+  };
+
+  return (
+    <EuiFlexGroup
+      gutterSize="xs"
+      alignItems="center"
+      responsive={false}
+      wrap={false}
+      css={badgesContainer}
+    >
+      {visibleBadges.map((badge) => (
+        <EuiFlexItem grow={false} key={badge.label}>
+          <AppBadge badge={badge} />
+        </EuiFlexItem>
+      ))}
+      {overflowBadges.length > 0 && (
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            aria-label={i18n.translate('core.ui.chrome.appHeader.badges.popoverAriaLabel', {
+              defaultMessage: 'More badges',
+            })}
+            button={
+              <EuiBadge
+                color="hollow"
+                onClick={handleTogglePopover}
+                onClickAriaLabel={i18n.translate(
+                  'core.ui.chrome.appHeader.badges.overflowAriaLabel',
+                  {
+                    defaultMessage: 'Show {count} more badges',
+                    values: { count: overflowBadges.length },
+                  }
+                )}
+              >
+                +{overflowBadges.length}
+              </EuiBadge>
+            }
+            isOpen={isPopoverOpen}
+            closePopover={handleClosePopover}
+            panelPaddingSize="s"
+          >
+            <EuiFlexGroup direction="column" gutterSize="xs">
+              {overflowBadges.map((badge) => (
+                <EuiFlexItem key={badge.label}>
+                  <AppBadge badge={badge} />
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </EuiPopover>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+});
+
+AppBadges.displayName = 'AppBadges';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
index cf4cf3be9218b..dd21326aa47a5 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
@@ -9,6 +9,7 @@
 
 import React from 'react';
 import { AppHeaderShell } from './app_header_shell';
+import { AppBadges } from './app_badges';
 import { BackButton } from './back_button';
 import { AppTitle } from './app_title';
 import { GlobalActions } from './global_actions';
@@ -18,6 +19,7 @@ export const AppHeader = React.memo(() => (
   <AppHeaderShell
     leading={<BackButton />}
     title={<AppTitle />}
+    badges={<AppBadges />}
     titleActions={<GlobalActions />}
     trailing={<AppMenu />}
   />
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts
new file mode 100644
index 0000000000000..9eb4aadcf6792
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useMemo } from 'react';
+import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
+import type { ChromeBadge, ChromeBreadcrumbsBadge } from '@kbn/core-chrome-browser';
+import { useObservable } from '@kbn/use-observable';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import { useNextHeader } from '../../../shared/chrome_hooks';
+
+const breadcrumbsBadgeToHeaderBadge = (badge: ChromeBreadcrumbsBadge): ChromeNextHeaderBadge => ({
+  label: badge.badgeText,
+  tooltip: badge.toolTipProps?.content as string | undefined,
+  // @ts-expect-error supported for backward compatibility. TODO: Remove it
+  renderCustomBadge: badge.renderCustomBadge,
+});
+
+const legacyBadgeToHeaderBadge = (badge: ChromeBadge): ChromeNextHeaderBadge => ({
+  label: badge.text,
+  tooltip: badge.tooltip,
+});
+
+/**
+ * Fallback: `config.badges` from `chrome.next.header.set()` ->
+ * legacy `chrome.setBadge()` + `chrome.setBreadcrumbsBadges()` combined.
+ */
+export function useAppBadges(): ChromeNextHeaderBadge[] | undefined {
+  const config = useNextHeader();
+  const chrome = useChromeService();
+  const breadcrumbsBadges$ = useMemo(() => chrome.getBreadcrumbsBadges$(), [chrome]);
+  const breadcrumbsBadges = useObservable(breadcrumbsBadges$, []);
+  const legacyBadge$ = useMemo(() => chrome.getBadge$(), [chrome]);
+  const legacyBadge = useObservable(legacyBadge$, undefined);
+
+  if (config?.badges) {
+    return config.badges;
+  }
+
+  const fallback: ChromeNextHeaderBadge[] = [];
+
+  if (legacyBadge) {
+    fallback.push(legacyBadgeToHeaderBadge(legacyBadge));
+  }
+
+  if (breadcrumbsBadges.length > 0) {
+    fallback.push(...breadcrumbsBadges.map(breadcrumbsBadgeToHeaderBadge));
+  }
+
+  return fallback.length > 0 ? fallback : undefined;
+}
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index d76ccac6389cb..0f1296776b5f4 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -15,6 +15,7 @@ import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeBreadcrumbsAppendExtension,
+  ChromeBreadcrumbsBadge,
   ChromeNext,
   ChromeNextAiButton,
   ChromeNextHeaderConfig,
@@ -63,6 +64,11 @@ export interface InternalChromeStart extends ChromeStart {
    */
   getBreadcrumbsAppendExtensionsWithBadges$(): Observable<ChromeBreadcrumbsAppendExtension[]>;
 
+  /**
+   * Get an observable of the current breadcrumbs badges set via setBreadcrumbsBadges().
+   */
+  getBreadcrumbsBadges$(): Observable<ChromeBreadcrumbsBadge[]>;
+
   /** Set global footer. Used by the developer toolbar. */
   setGlobalFooter(node: ReactNode): void;
 
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 8c5740c4b15ae..18bf68f647007 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -113,6 +113,7 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
     },
     getBreadcrumbsAppendExtensions$: () => state.breadcrumbs.appendExtensions.$,
     getBreadcrumbsAppendExtensionsWithBadges$: () => state.breadcrumbs.appendExtensionsWithBadges$,
+    getBreadcrumbsBadges$: () => state.breadcrumbs.badges.$,
     setBreadcrumbsAppendExtension: (extension) => {
       state.breadcrumbs.appendExtensions.addSorted(
         extension,
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 2cde4142f2110..249f13f19f0b7 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -149,6 +149,7 @@ const createStartContractMock = () => {
     getAppMenu$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
     setAppMenu: jest.fn(),
     setBreadcrumbsBadges: jest.fn(),
+    getBreadcrumbsBadges$: jest.fn().mockReturnValue(new BehaviorSubject([])),
   });
 
   return startContract;
diff --git a/src/core/packages/chrome/browser/src/chrome_next/header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
index 59b75eb0beaee..3171a72164842 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/header.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/header.ts
@@ -24,7 +24,7 @@ export interface ChromeNextHeaderConfig {
 
   /**
    * Badges inline next to the title. Chrome shows 1–2 as-is; for 3+, first badge plus "+N" popover
-   * for the rest. Max 200px per badge; `filled` is not exposed. TODO: render in `AppHeader`.
+   * for the rest. Max 200px per badge; `filled` is not exposed.
    */
   badges?: ChromeNextHeaderBadge[];
 
@@ -78,6 +78,9 @@ export interface ChromeNextHeaderBadge {
   /** EUI badge color. `filled` is intentionally excluded. */
   color?: 'hollow' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'accent';
   tooltip?: string;
+  onClick?: () => void;
+  onClickAriaLabel?: string;
+  'data-test-subj'?: string;
 }
 
 /**
diff --git a/src/core/packages/chrome/browser/src/types.ts b/src/core/packages/chrome/browser/src/types.ts
index 92582f0dbe106..8fc83f559c945 100644
--- a/src/core/packages/chrome/browser/src/types.ts
+++ b/src/core/packages/chrome/browser/src/types.ts
@@ -21,6 +21,9 @@ export interface ChromeBadge {
 export type ChromeBreadcrumbsBadge = EuiBadgeProps & {
   badgeText: string;
   toolTipProps?: Partial<EuiToolTipProps>;
+  /**
+   * @deprecated
+   */
   renderCustomBadge?: (props: { badgeText: string }) => ReactElement;
 };
 

From 104a7b38ceb42d66417c8df6e8a68af896741c0b Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 13 Apr 2026 17:04:39 +0200
Subject: [PATCH 27/77] [FeatureBranch/DoNotReview][Chrome Next] header:
 separators, help button, user profile slot (#262798)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Catches up the Chrome-Next global header with the design prototype:

- **Vertical separators** between logo, spacer, and action groups
- **Help button** in the global header, reusing `HeaderHelpMenu` popover
logic via a `renderButton` callback
- **User profile slot** — simplified `chrome.next.userMenu` API to
accept a `ReactNode`; Security plugin provides `SecurityNavControl` with
a `renderButton` prop so Chrome-Next controls the avatar button styling
- **`HeaderActionButton`** — shared 32px action button component
(bordered/plain variants) used by both help and user menu buttons,
consolidating header button styling in one place

<img width="1761" height="1265" alt="Screenshot 2026-04-13 at 16 48 05"
src="https://github.com/user-attachments/assets/bd4b3456-97ef-4bb5-ae9b-8299c4ab0e2a"
/>
---
 .../chrome/browser-components/index.ts        |  14 +-
 .../global_header/global_header.tsx           |   9 +-
 .../global_header/global_header_shell.tsx     |  46 ++++++-
 .../global_header/header_action_button.tsx    |  94 +++++++++++++
 .../chrome_next/global_header/help_button.tsx |  40 ++++++
 .../src/chrome_next/global_header/index.ts    |   2 +
 .../src/chrome_next/index.ts                  |   4 +-
 .../src/shared/chrome_hooks.ts                |   7 +
 .../src/shared/header_help_menu.tsx           |  10 +-
 .../chrome/browser-internal-types/index.ts    |   3 +-
 .../src/state/chrome_state.ts                 |   5 +-
 .../browser-mocks/src/chrome_service.mock.ts  |   8 +-
 src/core/packages/chrome/browser/index.ts     |   2 -
 .../browser/src/chrome_next/chrome_next.ts    |   9 +-
 .../chrome/browser/src/chrome_next/index.ts   |   1 -
 .../browser/src/chrome_next/user_menu.ts      |  15 +-
 src/core/packages/chrome/browser/src/index.ts |   2 -
 .../platform/plugins/shared/security/moon.yml |   1 +
 .../nav_control_component.test.tsx            |  33 +++--
 .../nav_control/nav_control_component.tsx     |  53 +++++---
 .../nav_control/nav_control_service.tsx       | 128 +++++-------------
 .../plugins/shared/security/tsconfig.json     |   3 +-
 22 files changed, 328 insertions(+), 161 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx

diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 0b4d666ed0b73..657617840ec7e 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -12,8 +12,18 @@ export type { ChromeComponentsDeps } from './src/context';
 
 export { ClassicHeader } from './src/classic';
 export { ProjectHeader } from './src/project';
-export { AppHeader, AppHeaderShell, GlobalHeader, GlobalHeaderShell } from './src/chrome_next';
-export type { AppHeaderShellProps, GlobalHeaderShellProps } from './src/chrome_next';
+export {
+  AppHeader,
+  AppHeaderShell,
+  GlobalHeader,
+  GlobalHeaderShell,
+  HeaderActionButton,
+} from './src/chrome_next';
+export type {
+  AppHeaderShellProps,
+  GlobalHeaderShellProps,
+  HeaderActionButtonProps,
+} from './src/chrome_next';
 export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_sidenav';
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
index 3e09feda7bb6b..5120afd082471 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
@@ -11,9 +11,16 @@ import React from 'react';
 import { GlobalHeaderShell } from './global_header_shell';
 import { GlobalHeaderLogo } from './global_header_logo';
 import { AiButtonSlot } from './ai_button_slot';
+import { HelpButton } from './help_button';
+import { useUserMenu } from '../../shared/chrome_hooks';
 
 export const GlobalHeader = React.memo(() => (
-  <GlobalHeaderShell logo={<GlobalHeaderLogo />} actions={<AiButtonSlot />} />
+  <GlobalHeaderShell
+    logo={<GlobalHeaderLogo />}
+    help={<HelpButton />}
+    actions={<AiButtonSlot />}
+    userMenu={useUserMenu()}
+  />
 ));
 
 GlobalHeader.displayName = 'GlobalHeader';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
index b77d454901b37..55063ec1e0ee0 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
@@ -29,7 +29,9 @@ export interface GlobalHeaderShellProps {
   logo?: ReactNode;
   switcher?: ReactNode;
   search?: ReactNode;
+  help?: ReactNode;
   actions?: ReactNode;
+  userMenu?: ReactNode;
 }
 
 const useGlobalHeaderStyles = () => {
@@ -82,12 +84,40 @@ const useGlobalHeaderStyles = () => {
       gap: ${euiTheme.size.s};
     `;
 
-    return { root, leftGroup, switcherSlot, spacer, rightGroup, searchSlot, actionsSlot };
+    const helpSlot = css`
+      display: flex;
+      align-items: center;
+    `;
+
+    const userMenuSlot = css`
+      display: flex;
+      align-items: center;
+    `;
+
+    const separator = css`
+      width: 1px;
+      height: 20px;
+      flex-shrink: 0;
+      background: ${euiTheme.colors.borderBaseSubdued};
+    `;
+
+    return {
+      root,
+      leftGroup,
+      switcherSlot,
+      spacer,
+      rightGroup,
+      searchSlot,
+      actionsSlot,
+      helpSlot,
+      userMenuSlot,
+      separator,
+    };
   }, [euiTheme]);
 };
 
 export const GlobalHeaderShell = React.memo<GlobalHeaderShellProps>(
-  ({ logo, switcher, search, actions }) => {
+  ({ logo, switcher, search, help, actions, userMenu }) => {
     const { isCollapsed } = useSideNavCollapsed();
     const styles = useGlobalHeaderStyles();
     const logoWidth = isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
@@ -104,18 +134,30 @@ export const GlobalHeaderShell = React.memo<GlobalHeaderShellProps>(
             </div>
           )}
         </div>
+        <div css={styles.separator} />
         <div css={styles.spacer} />
+        <div css={styles.separator} />
         <div css={styles.rightGroup}>
           {search && (
             <div css={styles.searchSlot} data-test-subj="chromeNextGlobalHeaderSearch">
               {search}
             </div>
           )}
+          {help && (
+            <div css={styles.helpSlot} data-test-subj="chromeNextGlobalHeaderHelp">
+              {help}
+            </div>
+          )}
           {actions && (
             <div css={styles.actionsSlot} data-test-subj="chromeNextGlobalHeaderActions">
               {actions}
             </div>
           )}
+          {userMenu && (
+            <div css={styles.userMenuSlot} data-test-subj="chromeNextGlobalHeaderUserMenu">
+              {userMenu}
+            </div>
+          )}
         </div>
       </header>
     );
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx
new file mode 100644
index 0000000000000..43452394bfb91
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+import React from 'react';
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+const ACTION_BUTTON_SIZE = 32;
+
+const baseStyles = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box',
+  width: ACTION_BUTTON_SIZE,
+  height: ACTION_BUTTON_SIZE,
+  padding: 0,
+  background: 'transparent',
+  cursor: 'pointer',
+  '&:hover': { background: 'var(--action-btn-hover)' },
+  '&:focus-visible': {
+    outline: '2px solid var(--action-btn-focus)',
+    outlineOffset: -2,
+  },
+});
+
+const borderedStyles = css({
+  border: '1px solid var(--action-btn-border)',
+});
+
+const plainStyles = css({
+  border: 'none',
+});
+
+export interface HeaderActionButtonProps
+  extends Pick<React.AriaAttributes, 'aria-expanded' | 'aria-haspopup'> {
+  variant: 'bordered' | 'plain';
+  children: ReactNode;
+  onClick: () => void;
+  'aria-label': string;
+  'data-test-subj'?: string;
+}
+
+export const HeaderActionButton = React.forwardRef<HTMLButtonElement, HeaderActionButtonProps>(
+  (
+    {
+      variant,
+      children,
+      onClick,
+      'aria-label': ariaLabel,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHaspopup,
+      'data-test-subj': dataTestSubj,
+    },
+    ref
+  ) => {
+    const { euiTheme } = useEuiTheme();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={ariaExpanded}
+        aria-haspopup={ariaHaspopup}
+        aria-label={ariaLabel}
+        data-test-subj={dataTestSubj}
+        css={[
+          baseStyles,
+          variant === 'bordered' ? borderedStyles : plainStyles,
+          { borderRadius: euiTheme.border.radius.medium },
+        ]}
+        style={
+          {
+            '--action-btn-border': euiTheme.colors.borderBasePlain,
+            '--action-btn-hover': euiTheme.colors.backgroundBaseInteractiveHover,
+            '--action-btn-focus': euiTheme.colors.primary,
+          } as React.CSSProperties
+        }
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+HeaderActionButton.displayName = 'HeaderActionButton';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx
new file mode 100644
index 0000000000000..60790573135b1
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback } from 'react';
+import { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { HeaderHelpMenu } from '../../shared/header_help_menu';
+import { HeaderActionButton } from './header_action_button';
+
+const HELP_ARIA_LABEL = i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuButtonAriaLabel', {
+  defaultMessage: 'Help menu',
+});
+
+export const HelpButton = React.memo(() => {
+  const renderButton = useCallback(
+    ({ isOpen, toggleMenu }: { isOpen: boolean; toggleMenu: () => void }) => (
+      <HeaderActionButton
+        variant="bordered"
+        onClick={toggleMenu}
+        aria-expanded={isOpen}
+        aria-haspopup={true}
+        aria-label={HELP_ARIA_LABEL}
+        data-test-subj="chromeNextGlobalHeaderHelpButton"
+      >
+        <EuiIcon type="question" size="m" aria-hidden />
+      </HeaderActionButton>
+    ),
+    []
+  );
+
+  return <HeaderHelpMenu renderButton={renderButton} />;
+});
+
+HelpButton.displayName = 'HelpButton';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts
index fcdd0fa6bd0f4..cead996b4ffc2 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/index.ts
@@ -10,3 +10,5 @@
 export { GlobalHeader } from './global_header';
 export { GlobalHeaderShell } from './global_header_shell';
 export type { GlobalHeaderShellProps } from './global_header_shell';
+export { HeaderActionButton } from './header_action_button';
+export type { HeaderActionButtonProps } from './header_action_button';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
index 222d68d187f29..f5eda0f6adcd7 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
@@ -9,5 +9,5 @@
 
 export { AppHeader, AppHeaderShell } from './app_header';
 export type { AppHeaderShellProps } from './app_header';
-export { GlobalHeader, GlobalHeaderShell } from './global_header';
-export type { GlobalHeaderShellProps } from './global_header';
+export { GlobalHeader, GlobalHeaderShell, HeaderActionButton } from './global_header';
+export type { GlobalHeaderShellProps, HeaderActionButtonProps } from './global_header';
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index a698651d4c304..6fc7071f1d1f1 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import type { Observable } from 'rxjs';
 import { debounceTime, map } from 'rxjs';
@@ -250,6 +251,12 @@ export function useNextHeader(): ChromeNextHeaderConfig | undefined {
   return useObservable(config$, undefined);
 }
 
+export function useUserMenu(): ReactNode {
+  const chrome = useChromeService();
+  const content$ = useMemo(() => chrome.next.userMenu.get$(), [chrome]);
+  return useObservable(content$, null);
+}
+
 /** Returns whether the next-chrome experience is enabled via feature flag. */
 export function useIsNextChrome(): boolean {
   const { featureFlags } = useChromeComponentsDeps();
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
index 1446bf56cfd96..3a5ea57b98b86 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
@@ -43,7 +43,11 @@ const createCustomLink = (
   </Fragment>
 );
 
-export const HeaderHelpMenu = () => {
+interface HeaderHelpMenuProps {
+  renderButton?: (props: { isOpen: boolean; toggleMenu: () => void }) => React.ReactNode;
+}
+
+export const HeaderHelpMenu = ({ renderButton }: HeaderHelpMenuProps = {}) => {
   const [isOpen, setIsOpen] = useState(false);
   const closeMenu = useCallback(() => setIsOpen(false), []);
   const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
@@ -157,7 +161,9 @@ export const HeaderHelpMenu = () => {
     );
   }
 
-  const button = (
+  const button = renderButton ? (
+    renderButton({ isOpen, toggleMenu })
+  ) : (
     <EuiHeaderSectionItemButton
       aria-expanded={isOpen}
       aria-haspopup="true"
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index 0f1296776b5f4..abd0f31b410f0 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -21,7 +21,6 @@ import type {
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
   ChromeNextSpaceSelectorConfig,
-  ChromeNextUserMenuConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -133,7 +132,7 @@ export interface InternalChromeNext extends ChromeNext {
     get$(): Observable<ChromeNextGlobalSearchConfig | undefined>;
   };
   userMenu: ChromeNext['userMenu'] & {
-    get$(): Observable<ChromeNextUserMenuConfig | undefined>;
+    get$(): Observable<ReactNode>;
   };
   spaceSelector: ChromeNext['spaceSelector'] & {
     get$(): Observable<ChromeNextSpaceSelectorConfig | undefined>;
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 10b5759fe897c..247f7625c0571 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -22,7 +22,6 @@ import type {
   ChromeNextAiButton,
   ChromeNextGlobalSearchConfig,
   ChromeNextSpaceSelectorConfig,
-  ChromeNextUserMenuConfig,
   ChromeUserBanner,
 } from '@kbn/core-chrome-browser';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
@@ -70,7 +69,7 @@ export interface ChromeState {
   appMenu: State<AppMenuConfig | undefined>;
   aiButton: State<ReadonlySet<ChromeNextAiButton>>;
   globalSearch: State<ChromeNextGlobalSearchConfig | undefined>;
-  userMenu: State<ChromeNextUserMenuConfig | undefined>;
+  userMenu: State<ReactNode>;
   spaceSelector: State<ChromeNextSpaceSelectorConfig | undefined>;
 
   /** Help system */
@@ -117,7 +116,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   const globalFooter = createState<ReactNode>(null);
   const aiButton = createState<ReadonlySet<ChromeNextAiButton>>(new Set());
   const globalSearch = createState<ChromeNextGlobalSearchConfig | undefined>(undefined);
-  const userMenu = createState<ChromeNextUserMenuConfig | undefined>(undefined);
+  const userMenu = createState<ReactNode>(null);
   const spaceSelector = createState<ChromeNextSpaceSelectorConfig | undefined>(undefined);
   const customNavLink = createState<ChromeNavLink | undefined>(undefined);
 
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 249f13f19f0b7..020b039da4d08 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -9,13 +9,13 @@
 
 import { BehaviorSubject, of } from 'rxjs';
 import type { DeeplyMockedKeys } from '@kbn/utility-types-jest';
+import type { ReactNode } from 'react';
 import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
   ChromeNextSpaceSelectorConfig,
-  ChromeNextUserMenuConfig,
 } from '@kbn/core-chrome-browser';
 import type {
   InternalChromeSetup,
@@ -35,7 +35,7 @@ const createStartContractMock = () => {
   const nextGlobalSearchState$ = new BehaviorSubject<ChromeNextGlobalSearchConfig | undefined>(
     undefined
   );
-  const nextUserMenuState$ = new BehaviorSubject<ChromeNextUserMenuConfig | undefined>(undefined);
+  const nextUserMenuState$ = new BehaviorSubject<ReactNode>(null);
   const nextSpaceSelectorState$ = new BehaviorSubject<ChromeNextSpaceSelectorConfig | undefined>(
     undefined
   );
@@ -133,8 +133,8 @@ const createStartContractMock = () => {
       }),
       userMenu: lazyObject({
         get$: jest.fn().mockReturnValue(nextUserMenuState$),
-        set: jest.fn((config?: ChromeNextUserMenuConfig) => {
-          nextUserMenuState$.next(config);
+        set: jest.fn((content?: ReactNode) => {
+          nextUserMenuState$.next(content ?? null);
         }),
       }),
       spaceSelector: lazyObject({
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index 580130955782d..ee8b7ac969b3f 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -66,6 +66,4 @@ export type {
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
   ChromeNextSpaceSelectorConfig,
-  ChromeNextUserMenuConfig,
-  ChromeNextUserMenuItem,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
index 63c935fe3b070..7480157dca246 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
@@ -7,11 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { ReactNode } from 'react';
 import type { ChromeNextAiButton } from './ai_button';
 import type { ChromeNextGlobalSearchConfig } from './global_search';
 import type { ChromeNextHeaderConfig } from './header';
 import type { ChromeNextSpaceSelectorConfig } from './space_selector';
-import type { ChromeNextUserMenuConfig } from './user_menu';
 
 /**
  * Chrome-Next APIs: header configuration, AI button slot, global search, user menu, and space selector.
@@ -48,11 +48,12 @@ export interface ChromeNext {
   };
   userMenu: {
     /**
-     * Set the user menu configuration for the Chrome-Next sidenav.
-     * Chrome renders a user avatar in the sidenav footer with a popover listing the provided items.
+     * Set the user menu content for the Chrome-Next global header.
+     * The provided ReactNode is rendered as-is in the header's user menu slot.
+     * The consumer owns the full UI (avatar button, popover, menu items).
      * Pass `undefined` to remove. Global — persists across app changes.
      */
-    set(config?: ChromeNextUserMenuConfig): void;
+    set(content?: ReactNode): void;
   };
   spaceSelector: {
     /**
diff --git a/src/core/packages/chrome/browser/src/chrome_next/index.ts b/src/core/packages/chrome/browser/src/chrome_next/index.ts
index 7968c144add6b..3e6646906ba0b 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/index.ts
@@ -20,4 +20,3 @@ export type {
   ChromeNextHeaderTab,
 } from './header';
 export type { ChromeNextSpaceSelectorConfig } from './space_selector';
-export type { ChromeNextUserMenuConfig, ChromeNextUserMenuItem } from './user_menu';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts b/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
index 4869c7e0098ec..7f403bb190f0b 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/user_menu.ts
@@ -9,17 +9,4 @@
 
 import type { ReactNode } from 'react';
 
-export interface ChromeNextUserMenuConfig {
-  label: string;
-  renderAvatar: () => ReactNode;
-  items: ChromeNextUserMenuItem[];
-}
-
-export interface ChromeNextUserMenuItem {
-  id: string;
-  label: string;
-  href?: string;
-  isExternal?: boolean;
-  'data-test-subj'?: string;
-  onClick?: () => void;
-}
+export type ChromeNextUserMenu = ReactNode;
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index a59c61945a15e..cad9093c92bd8 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -72,6 +72,4 @@ export type {
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
   ChromeNextSpaceSelectorConfig,
-  ChromeNextUserMenuConfig,
-  ChromeNextUserMenuItem,
 } from './chrome_next';
diff --git a/x-pack/platform/plugins/shared/security/moon.yml b/x-pack/platform/plugins/shared/security/moon.yml
index 663a157dacc82..e8b015d136aac 100644
--- a/x-pack/platform/plugins/shared/security/moon.yml
+++ b/x-pack/platform/plugins/shared/security/moon.yml
@@ -104,6 +104,7 @@ dependsOn:
   - '@kbn/mock-idp-utils'
   - '@kbn/core-user-activity-server'
   - '@kbn/core-user-activity-server-mocks'
+  - '@kbn/core-chrome-browser-components'
 tags:
   - plugin
   - prod
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.test.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.test.tsx
index c5476dcbef1fd..f1a14d9c1a506 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.test.tsx
@@ -291,12 +291,25 @@ describe('SecurityNavControl', () => {
                     link3
                   </span>
                 </a>
-                <div>
-                  Dummy Component
-                </div>
-                <div
+                <button
+                  class="euiContextMenuItem emotion-euiContextMenuItem-s-center"
+                  data-test-subj="userMenuLink__dummyComponent"
+                  type="button"
+                >
+                  <span
+                    class="emotion-euiContextMenu__icon"
+                    data-euiicon-type="empty"
+                  />
+                  <span
+                    class="euiContextMenuItem__text emotion-euiContextMenuItem__text-s"
+                  >
+                    dummyComponent
+                  </span>
+                </button>
+                <button
                   class="euiContextMenuItem emotion-euiContextMenuItem-s-center"
                   data-test-subj="logoutLink"
+                  type="button"
                 >
                   <span
                     class="emotion-euiContextMenu__icon"
@@ -307,7 +320,7 @@ describe('SecurityNavControl', () => {
                   >
                     Log out
                   </span>
-                </div>
+                </button>
               </div>
             </div>
           </div>
@@ -413,9 +426,10 @@ describe('SecurityNavControl', () => {
                     link3
                   </span>
                 </a>
-                <div
+                <button
                   class="euiContextMenuItem emotion-euiContextMenuItem-s-center"
                   data-test-subj="logoutLink"
+                  type="button"
                 >
                   <span
                     class="emotion-euiContextMenu__icon"
@@ -426,7 +440,7 @@ describe('SecurityNavControl', () => {
                   >
                     Log out
                   </span>
-                </div>
+                </button>
               </div>
             </div>
           </div>
@@ -481,9 +495,10 @@ describe('SecurityNavControl', () => {
               tabindex="-1"
             >
               <div>
-                <div
+                <button
                   class="euiContextMenuItem emotion-euiContextMenuItem-s-center"
                   data-test-subj="logoutLink"
+                  type="button"
                 >
                   <span
                     class="emotion-euiContextMenu__icon"
@@ -494,7 +509,7 @@ describe('SecurityNavControl', () => {
                   >
                     Log in
                   </span>
-                </div>
+                </button>
               </div>
             </div>
           </div>
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
index 3b41fac1ab451..dfc660f563870 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
@@ -15,8 +15,8 @@ import {
   EuiLoadingSpinner,
   EuiPopover,
 } from '@elastic/eui';
-import type { FunctionComponent } from 'react';
-import React, { useState } from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
+import React, { useCallback, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 
@@ -59,48 +59,67 @@ const ContextMenuContent = ({ items, closePopover }: ContextMenuProps) => {
   );
 };
 
+export interface SecurityNavControlRenderButtonProps {
+  isOpen: boolean;
+  toggleMenu: () => void;
+  avatar: ReactNode;
+}
+
 interface SecurityNavControlProps {
   editProfileUrl: string;
   logoutUrl: string;
   userMenuLinks$: Observable<UserMenuLink[]>;
+  renderButton?: (props: SecurityNavControlRenderButtonProps) => NonNullable<ReactNode>;
+  avatarSize?: 's' | 'm' | 'l';
 }
 
 export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
   editProfileUrl,
   logoutUrl,
   userMenuLinks$,
+  renderButton,
+  avatarSize = 's',
 }) => {
   const userMenuLinks = useObservable(userMenuLinks$, []);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const userProfile = useUserProfile<{ avatar: UserProfileAvatarData }>('avatar,userSettings');
-  const currentUser = useCurrentUser(); // User profiles do not exist for anonymous users so need to fetch current user as well
+  const currentUser = useCurrentUser();
 
   const displayName = currentUser.value ? getUserDisplayName(currentUser.value) : '';
 
-  const button = (
+  const toggleMenu = useCallback(
+    () => setIsPopoverOpen((value) => (currentUser.value ? !value : false)),
+    [currentUser.value]
+  );
+
+  const avatar = userProfile.value ? (
+    <UserAvatar
+      user={userProfile.value.user}
+      avatar={userProfile.value.data.avatar}
+      size={avatarSize}
+      data-test-subj="userMenuAvatar"
+    />
+  ) : currentUser.value && userProfile.error ? (
+    <UserAvatar user={currentUser.value} size={avatarSize} data-test-subj="userMenuAvatar" />
+  ) : (
+    <EuiLoadingSpinner size="m" />
+  );
+
+  const button = renderButton ? (
+    renderButton({ isOpen: isPopoverOpen, toggleMenu, avatar })
+  ) : (
     <EuiHeaderSectionItemButton
       aria-expanded={isPopoverOpen}
       aria-haspopup="true"
       aria-label={i18n.translate('xpack.security.navControlComponent.accountMenuAriaLabel', {
         defaultMessage: 'Account menu',
       })}
-      onClick={() => setIsPopoverOpen((value) => (currentUser.value ? !value : false))}
+      onClick={toggleMenu}
       data-test-subj="userMenuButton"
       style={{ lineHeight: 'normal' }}
     >
-      {userProfile.value ? (
-        <UserAvatar
-          user={userProfile.value.user}
-          avatar={userProfile.value.data.avatar}
-          size="s"
-          data-test-subj="userMenuAvatar"
-        />
-      ) : currentUser.value && userProfile.error ? (
-        <UserAvatar user={currentUser.value} size="s" data-test-subj="userMenuAvatar" />
-      ) : (
-        <EuiLoadingSpinner size="m" />
-      )}
+      {avatar}
     </EuiHeaderSectionItemButton>
   );
 
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
index af24eb926241d..04f0b7b613d6c 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_service.tsx
@@ -12,7 +12,7 @@ import type { Subscription } from 'rxjs';
 import { BehaviorSubject, map, ReplaySubject, takeUntil } from 'rxjs';
 
 import type { CoreStart } from '@kbn/core/public';
-import type { ChromeNextUserMenuItem } from '@kbn/core-chrome-browser';
+import { HeaderActionButton } from '@kbn/core-chrome-browser-components';
 import { i18n } from '@kbn/i18n';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import type {
@@ -21,11 +21,10 @@ import type {
   UserMenuLink,
 } from '@kbn/security-plugin-types-public';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
-import { UserAvatar, type UserProfileAvatarData } from '@kbn/user-profile-components';
 
 import { SecurityNavControl } from './nav_control_component';
+import type { SecurityNavControlRenderButtonProps } from './nav_control_component';
 import type { SecurityLicense } from '../../common';
-import { getUserDisplayName, isUserAnonymous } from '../../common/model';
 import type { SecurityApiClients } from '../components';
 import { AuthenticationProvider, SecurityApiClientsProvider } from '../components';
 
@@ -128,96 +127,17 @@ export class SecurityNavControlService {
   }
 
   private registerChromeNextUserMenu(core: CoreStart, authc: AuthenticationServiceSetup) {
-    const editProfileUrl = core.http.basePath.prepend('/security/account');
-    const { userProfiles } = this.securityApiClients;
-
-    Promise.all([
-      authc.getCurrentUser(),
-      userProfiles
-        .getCurrent<{ avatar: UserProfileAvatarData }>({ dataPath: 'avatar' })
-        .catch(() => null),
-    ])
-      .then(([currentUser, userProfile]) => {
-        const userDisplayName = getUserDisplayName(currentUser);
-        const isAnonymous = isUserAnonymous(currentUser);
-
-        const renderAvatar = () =>
-          userProfile ? (
-            <UserAvatar
-              user={userProfile.user}
-              avatar={userProfile.data.avatar}
-              size="s"
-              data-test-subj="sideNavUserMenuAvatar"
-            />
-          ) : (
-            <UserAvatar user={currentUser} size="s" data-test-subj="sideNavUserMenuAvatar" />
-          );
-
-        const buildItems = (userMenuLinks: UserMenuLink[]): ChromeNextUserMenuItem[] => {
-          const items: ChromeNextUserMenuItem[] = [];
-
-          const sorted = this.sortUserMenuLinks(userMenuLinks);
-          const hasCustomProfileLinks = sorted.some(({ setAsProfile }) => setAsProfile === true);
-
-          if (!isAnonymous && !hasCustomProfileLinks) {
-            items.push({
-              id: 'profileLink',
-              label: i18n.translate('xpack.security.navControlComponent.editProfileLinkText', {
-                defaultMessage: 'Edit profile',
-              }),
-              href: editProfileUrl,
-              'data-test-subj': 'profileLink',
-            });
-          }
-
-          for (const link of sorted) {
-            if (!link.label || (!link.href && !link.onClick)) {
-              continue;
-            }
-            items.push({
-              id: `userMenuLink__${link.label}`,
-              label: link.label,
-              ...(link.href && { href: link.href }),
-              ...(link.onClick && {
-                onClick: () => {
-                  link.onClick?.();
-                },
-              }),
-              'data-test-subj': `userMenuLink__${link.label}`,
-            });
-          }
-
-          items.push({
-            id: 'logoutLink',
-            label: isAnonymous
-              ? i18n.translate('xpack.security.navControlComponent.loginLinkText', {
-                  defaultMessage: 'Log in',
-                })
-              : i18n.translate('xpack.security.navControlComponent.logoutLinkText', {
-                  defaultMessage: 'Log out',
-                }),
-            href: this.logoutUrl,
-            'data-test-subj': 'logoutLink',
-          });
-
-          return items;
-        };
-
-        const setConfig = (userMenuLinks: UserMenuLink[]) => {
-          core.chrome.next.userMenu.set({
-            label: userDisplayName,
-            renderAvatar,
-            items: buildItems(userMenuLinks),
-          });
-        };
-
-        setConfig(this.userMenuLinks$.value);
-
-        this.userMenuLinks$.pipe(takeUntil(this.stop$)).subscribe((links) => setConfig(links));
-      })
-      .catch(() => {
-        // Chrome Next user menu unavailable — legacy nav control still active
-      });
+    core.chrome.next.userMenu.set(
+      <Providers services={core} authc={authc} securityApiClients={this.securityApiClients}>
+        <SecurityNavControl
+          editProfileUrl={core.http.basePath.prepend('/security/account')}
+          logoutUrl={this.logoutUrl}
+          userMenuLinks$={this.userMenuLinks$}
+          renderButton={chromeNextUserMenuButton}
+          avatarSize="m"
+        />
+      </Providers>
+    );
   }
 
   private sortUserMenuLinks(userMenuLinks: UserMenuLink[]) {
@@ -225,6 +145,28 @@ export class SecurityNavControlService {
   }
 }
 
+const ACCOUNT_MENU_ARIA_LABEL = i18n.translate(
+  'xpack.security.navControlComponent.accountMenuAriaLabel',
+  { defaultMessage: 'Account menu' }
+);
+
+const chromeNextUserMenuButton = ({
+  isOpen,
+  toggleMenu,
+  avatar,
+}: SecurityNavControlRenderButtonProps) => (
+  <HeaderActionButton
+    variant="plain"
+    onClick={toggleMenu}
+    aria-expanded={isOpen}
+    aria-haspopup={true}
+    aria-label={ACCOUNT_MENU_ARIA_LABEL}
+    data-test-subj="chromeNextUserMenuButton"
+  >
+    {avatar}
+  </HeaderActionButton>
+);
+
 export interface ProvidersProps {
   authc: AuthenticationServiceSetup;
   services: CoreStart;
diff --git a/x-pack/platform/plugins/shared/security/tsconfig.json b/x-pack/platform/plugins/shared/security/tsconfig.json
index 73ba4c2bceb05..b3298c195527f 100644
--- a/x-pack/platform/plugins/shared/security/tsconfig.json
+++ b/x-pack/platform/plugins/shared/security/tsconfig.json
@@ -97,7 +97,8 @@
     "@kbn/scout",
     "@kbn/mock-idp-utils",
     "@kbn/core-user-activity-server",
-    "@kbn/core-user-activity-server-mocks"
+    "@kbn/core-user-activity-server-mocks",
+    "@kbn/core-chrome-browser-components"
   ],
   "exclude": ["target/**/*"]
 }

From 18d5897cae62c967832cdfbe13a1ff6b52789c1f Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 14 Apr 2026 13:05:52 +0200
Subject: [PATCH 28/77] [Chrome Next] Add search button to global header
 (#262997)

## Summary

Add a search button to the Chrome-Next global header that triggers the
global search modal via the existing `chrome.next.globalSearch` API.

- Styled as a fake search input (bordered button with magnifying glass
icon, "Find content..." placeholder, and keyboard shortcut badge)
- Registers a global keyboard shortcut handler (Cmd/Ctrl + /) to open
search
- Collapses to an icon-only square button on smaller screens via CSS
media query
- Extracts shared header button base styles (`headerButtonBaseStyles`,
`headerButtonBorderedStyles`, `useHeaderButtonStyleVars`) so both
`HeaderActionButton` and `SearchButton` share one source of truth

<img width="1800" height="1183" alt="Screenshot 2026-04-14 at 12 04 11"
src="https://github.com/user-attachments/assets/21c39001-edce-46b1-9594-6e4d2cbb5c20"
/>
---
 .../chrome/browser-components/moon.yml        |   1 +
 .../global_header/global_header.tsx           |   2 +
 .../global_header/global_header_shell.tsx     |   6 +-
 .../global_header/header_action_button.tsx    |  49 ++++----
 .../chrome_next/global_header/help_button.tsx |   2 +-
 .../global_header/search_button.tsx           | 115 ++++++++++++++++++
 .../src/shared/chrome_hooks.ts                |   7 ++
 .../src/shared/header_help_menu.tsx           |   2 +-
 .../chrome/browser-components/tsconfig.json   |   1 +
 .../shared/kbn-shared-ux-utility/index.ts     |   1 +
 .../src/browser/index.ts                      |   2 +
 .../src/browser/use_keyboard_shortcut.ts      |  67 ++++++++++
 .../public/components/types.ts                |   2 +-
 13 files changed, 229 insertions(+), 28 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/global_header/search_button.tsx
 create mode 100644 src/platform/packages/shared/kbn-shared-ux-utility/src/browser/use_keyboard_shortcut.ts

diff --git a/src/core/packages/chrome/browser-components/moon.yml b/src/core/packages/chrome/browser-components/moon.yml
index a64b7b61cc827..e7419f7a39a00 100644
--- a/src/core/packages/chrome/browser-components/moon.yml
+++ b/src/core/packages/chrome/browser-components/moon.yml
@@ -50,6 +50,7 @@ dependsOn:
   - '@kbn/test-jest-helpers'
   - '@kbn/use-observable'
   - '@kbn/core-chrome-layout-components'
+  - '@kbn/shared-ux-utility'
 tags:
   - shared-browser
   - package
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
index 5120afd082471..da9c8f1d21cff 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
@@ -11,12 +11,14 @@ import React from 'react';
 import { GlobalHeaderShell } from './global_header_shell';
 import { GlobalHeaderLogo } from './global_header_logo';
 import { AiButtonSlot } from './ai_button_slot';
+import { SearchButton } from './search_button';
 import { HelpButton } from './help_button';
 import { useUserMenu } from '../../shared/chrome_hooks';
 
 export const GlobalHeader = React.memo(() => (
   <GlobalHeaderShell
     logo={<GlobalHeaderLogo />}
+    search={<SearchButton />}
     help={<HelpButton />}
     actions={<AiButtonSlot />}
     userMenu={useUserMenu()}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
index 55063ec1e0ee0..169afc1c62d32 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
@@ -11,7 +11,7 @@ import type { ReactNode } from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { COLLAPSED_WIDTH, EXPANDED_WIDTH } from '@kbn/core-chrome-navigation';
-import { useSideNavCollapsed } from '@kbn/core-chrome-browser-hooks';
+import { useSideNavWidth } from '@kbn/core-chrome-browser-hooks';
 import React, { useMemo } from 'react';
 
 const GLOBAL_HEADER_HEIGHT_PX = 48;
@@ -118,9 +118,9 @@ const useGlobalHeaderStyles = () => {
 
 export const GlobalHeaderShell = React.memo<GlobalHeaderShellProps>(
   ({ logo, switcher, search, help, actions, userMenu }) => {
-    const { isCollapsed } = useSideNavCollapsed();
+    const sideNavWidth = useSideNavWidth();
     const styles = useGlobalHeaderStyles();
-    const logoWidth = isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
+    const logoWidth = sideNavWidth <= COLLAPSED_WIDTH ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
 
     return (
       <header css={styles.root} data-test-subj="chromeNextGlobalHeader">
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx
index 43452394bfb91..0eb804b8d8978 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx
@@ -12,33 +12,44 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { useEuiTheme } from '@elastic/eui';
 
-const ACTION_BUTTON_SIZE = 32;
-
-const baseStyles = css({
+export const headerButtonBaseStyles = css({
   display: 'inline-flex',
   alignItems: 'center',
-  justifyContent: 'center',
   boxSizing: 'border-box',
-  width: ACTION_BUTTON_SIZE,
-  height: ACTION_BUTTON_SIZE,
-  padding: 0,
+  height: 32,
   background: 'transparent',
   cursor: 'pointer',
-  '&:hover': { background: 'var(--action-btn-hover)' },
+  '&:hover': { background: 'var(--header-btn-hover)' },
   '&:focus-visible': {
-    outline: '2px solid var(--action-btn-focus)',
+    outline: '2px solid var(--header-btn-focus)',
     outlineOffset: -2,
   },
 });
 
-const borderedStyles = css({
-  border: '1px solid var(--action-btn-border)',
+export const headerButtonBorderedStyles = css({
+  border: '1px solid var(--header-btn-border)',
 });
 
 const plainStyles = css({
   border: 'none',
 });
 
+const squareStyles = css({
+  width: 32,
+  padding: 0,
+  justifyContent: 'center',
+});
+
+export const useHeaderButtonStyleVars = () => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    '--header-btn-border': euiTheme.colors.borderBasePlain,
+    '--header-btn-hover': euiTheme.colors.backgroundBaseInteractiveHover,
+    '--header-btn-focus': euiTheme.colors.primary,
+    borderRadius: euiTheme.border.radius.medium,
+  } as React.CSSProperties;
+};
+
 export interface HeaderActionButtonProps
   extends Pick<React.AriaAttributes, 'aria-expanded' | 'aria-haspopup'> {
   variant: 'bordered' | 'plain';
@@ -61,7 +72,7 @@ export const HeaderActionButton = React.forwardRef<HTMLButtonElement, HeaderActi
     },
     ref
   ) => {
-    const { euiTheme } = useEuiTheme();
+    const styleVars = useHeaderButtonStyleVars();
 
     return (
       <button
@@ -72,17 +83,11 @@ export const HeaderActionButton = React.forwardRef<HTMLButtonElement, HeaderActi
         aria-label={ariaLabel}
         data-test-subj={dataTestSubj}
         css={[
-          baseStyles,
-          variant === 'bordered' ? borderedStyles : plainStyles,
-          { borderRadius: euiTheme.border.radius.medium },
+          headerButtonBaseStyles,
+          squareStyles,
+          variant === 'bordered' ? headerButtonBorderedStyles : plainStyles,
         ]}
-        style={
-          {
-            '--action-btn-border': euiTheme.colors.borderBasePlain,
-            '--action-btn-hover': euiTheme.colors.backgroundBaseInteractiveHover,
-            '--action-btn-focus': euiTheme.colors.primary,
-          } as React.CSSProperties
-        }
+        style={styleVars}
         onClick={onClick}
       >
         {children}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx
index 60790573135b1..37cd390ca51c9 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/help_button.tsx
@@ -28,7 +28,7 @@ export const HelpButton = React.memo(() => {
         aria-label={HELP_ARIA_LABEL}
         data-test-subj="chromeNextGlobalHeaderHelpButton"
       >
-        <EuiIcon type="question" size="m" aria-hidden />
+        <EuiIcon type="question" size="m" color="subdued" aria-hidden />
       </HeaderActionButton>
     ),
     []
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/search_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/search_button.tsx
new file mode 100644
index 0000000000000..9ab5996de68c2
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/search_button.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo } from 'react';
+import { css } from '@emotion/react';
+import { EuiIcon, useEuiBreakpoint, useEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { isMac, useKeyboardShortcut } from '@kbn/shared-ux-utility';
+import { useGlobalSearch } from '../../shared/chrome_hooks';
+import {
+  headerButtonBaseStyles,
+  headerButtonBorderedStyles,
+  useHeaderButtonStyleVars,
+} from './header_action_button';
+
+const searchOverrides = css({
+  padding: '0 8px',
+  gap: 6,
+  whiteSpace: 'nowrap',
+});
+
+const placeholderStyles = css({
+  color: 'var(--search-btn-placeholder)',
+  fontSize: 13,
+  lineHeight: 1,
+  userSelect: 'none',
+});
+
+const kbdStyles = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 2,
+  padding: '2px 5px',
+  fontSize: 11,
+  lineHeight: 1,
+  fontFamily: 'inherit',
+  color: 'var(--search-btn-placeholder)',
+  background: 'var(--search-btn-kbd-bg)',
+  border: 'none',
+  borderRadius: 3,
+  userSelect: 'none',
+});
+
+const PLACEHOLDER = i18n.translate('core.ui.chrome.globalHeader.searchButton.placeholder', {
+  defaultMessage: 'Find content...',
+});
+
+const ARIA_LABEL = i18n.translate('core.ui.chrome.globalHeader.searchButton.ariaLabel', {
+  defaultMessage: 'Search',
+});
+
+const MODIFIER_KEY = isMac ? '⌘' : 'Ctrl';
+
+export const SearchButton = React.memo(() => {
+  const config = useGlobalSearch();
+  const { euiTheme } = useEuiTheme();
+  const baseStyleVars = useHeaderButtonStyleVars();
+  const compactQuery = useEuiBreakpoint(['xs', 's']);
+
+  const compactButton = css({
+    [compactQuery]: {
+      width: 32,
+      padding: 0,
+      justifyContent: 'center',
+      gap: 0,
+    },
+  });
+
+  const collapsible = css({
+    [compactQuery]: {
+      display: 'none',
+    },
+  });
+
+  const shortcut = useMemo(
+    () => (config?.shortcutKey ? { key: config.shortcutKey, meta: true } : undefined),
+    [config?.shortcutKey]
+  );
+  useKeyboardShortcut(shortcut, config?.onClick);
+
+  if (!config) return null;
+
+  const shortcutLabel = config.shortcutKey
+    ? `${MODIFIER_KEY} ${config.shortcutKey.toUpperCase()}`
+    : undefined;
+
+  return (
+    <button
+      type="button"
+      aria-label={ARIA_LABEL}
+      data-test-subj="chromeNextGlobalHeaderSearchButton"
+      css={[headerButtonBaseStyles, headerButtonBorderedStyles, searchOverrides, compactButton]}
+      style={
+        {
+          ...baseStyleVars,
+          '--search-btn-placeholder': euiTheme.colors.textSubdued,
+          '--search-btn-kbd-bg': euiTheme.colors.backgroundBaseSubdued,
+        } as React.CSSProperties
+      }
+      onClick={config.onClick}
+    >
+      <EuiIcon type="search" size="m" color="subdued" aria-hidden />
+      <span css={[placeholderStyles, collapsible]}>{PLACEHOLDER}</span>
+      {shortcutLabel && <kbd css={[kbdStyles, collapsible]}>{shortcutLabel}</kbd>}
+    </button>
+  );
+});
+
+SearchButton.displayName = 'SearchButton';
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index 6fc7071f1d1f1..e547ce2cf715b 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -15,6 +15,7 @@ import type {
   ChromeBreadcrumb,
   ChromeNavControl,
   ChromeNavLink,
+  ChromeNextGlobalSearchConfig,
   ChromeNextHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
@@ -251,6 +252,12 @@ export function useNextHeader(): ChromeNextHeaderConfig | undefined {
   return useObservable(config$, undefined);
 }
 
+export function useGlobalSearch(): ChromeNextGlobalSearchConfig | undefined {
+  const chrome = useChromeService();
+  const config$ = useMemo(() => chrome.next.globalSearch.get$(), [chrome]);
+  return useObservable(config$, undefined);
+}
+
 export function useUserMenu(): ReactNode {
   const chrome = useChromeService();
   const content$ = useMemo(() => chrome.next.userMenu.get$(), [chrome]);
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
index 3a5ea57b98b86..c2f98cfb97065 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
@@ -44,7 +44,7 @@ const createCustomLink = (
 );
 
 interface HeaderHelpMenuProps {
-  renderButton?: (props: { isOpen: boolean; toggleMenu: () => void }) => React.ReactNode;
+  renderButton?: (props: { isOpen: boolean; toggleMenu: () => void }) => NonNullable<React.ReactNode>;
 }
 
 export const HeaderHelpMenu = ({ renderButton }: HeaderHelpMenuProps = {}) => {
diff --git a/src/core/packages/chrome/browser-components/tsconfig.json b/src/core/packages/chrome/browser-components/tsconfig.json
index e2ecb2538e24a..c30af93d195c3 100644
--- a/src/core/packages/chrome/browser-components/tsconfig.json
+++ b/src/core/packages/chrome/browser-components/tsconfig.json
@@ -50,5 +50,6 @@
     "@kbn/test-jest-helpers",
     "@kbn/use-observable",
     "@kbn/core-chrome-layout-components",
+    "@kbn/shared-ux-utility",
   ]
 }
diff --git a/src/platform/packages/shared/kbn-shared-ux-utility/index.ts b/src/platform/packages/shared/kbn-shared-ux-utility/index.ts
index dcb0854fe38f0..3b28ade9a5cda 100644
--- a/src/platform/packages/shared/kbn-shared-ux-utility/index.ts
+++ b/src/platform/packages/shared/kbn-shared-ux-utility/index.ts
@@ -12,3 +12,4 @@ export { getClosestLink, hasActiveModifierKey } from './src/utils';
 export { withSuspense, type WithSuspenseExtendedDeps } from './src/with_suspense';
 export { dynamic, type DynamicOptions } from './src/dynamic';
 export { isMac, isWindows, isLinux, getPlatform, type Platform } from './src/browser';
+export { useKeyboardShortcut, type KeyboardShortcut } from './src/browser';
diff --git a/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/index.ts b/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/index.ts
index d56221845f8e2..866a5e623ee91 100644
--- a/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/index.ts
+++ b/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/index.ts
@@ -9,3 +9,5 @@
 
 export { isMac, isWindows, isLinux, getPlatform } from './platform';
 export type { Platform } from './platform';
+export { useKeyboardShortcut } from './use_keyboard_shortcut';
+export type { KeyboardShortcut } from './use_keyboard_shortcut';
diff --git a/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/use_keyboard_shortcut.ts b/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/use_keyboard_shortcut.ts
new file mode 100644
index 0000000000000..d6c3c606d42dd
--- /dev/null
+++ b/src/platform/packages/shared/kbn-shared-ux-utility/src/browser/use_keyboard_shortcut.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useEffect } from 'react';
+import { isMac } from './platform';
+
+export interface KeyboardShortcut {
+  key: string;
+  /** Cmd on Mac, Ctrl on other platforms. */
+  meta?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  /** Literal Ctrl on all platforms (distinct from meta on Mac). */
+  ctrl?: boolean;
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return true;
+  return target.isContentEditable;
+}
+
+export function useKeyboardShortcut(
+  shortcut: KeyboardShortcut | undefined,
+  callback: (() => void) | undefined
+) {
+  useEffect(() => {
+    if (!shortcut || !callback) return;
+
+    const target = shortcut.key.toLowerCase();
+    const wantMeta = shortcut.meta ?? false;
+    const wantShift = shortcut.shift ?? false;
+    const wantAlt = shortcut.alt ?? false;
+    const wantCtrl = shortcut.ctrl ?? false;
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() !== target) return;
+      if (isEditableTarget(e.target)) return;
+
+      if (wantShift !== e.shiftKey) return;
+      if (wantAlt !== e.altKey) return;
+
+      if (isMac) {
+        if (wantMeta !== e.metaKey) return;
+        if (wantCtrl !== e.ctrlKey) return;
+      } else {
+        // On non-Mac, meta and ctrl both map to the physical Ctrl key.
+        // They cannot be distinguished, so either flag claims e.ctrlKey.
+        const wantEither = wantMeta || wantCtrl;
+        if (wantEither !== e.ctrlKey) return;
+        if (e.metaKey) return;
+      }
+
+      e.preventDefault();
+      callback();
+    };
+
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [shortcut, callback]);
+}
diff --git a/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts b/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts
index 86c000e364f5f..a033ea348dbc5 100644
--- a/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts
+++ b/x-pack/platform/plugins/private/global_search_bar/public/components/types.ts
@@ -16,7 +16,7 @@ export const SEARCH_MODAL_SELECTOR_PREFIX = 'chromeProjectNextSearchModal';
 export const SEARCH_MODAL_HEIGHT = 50;
 export const SEARCH_MODAL_WIDTH = 800;
 export const SEARCH_MODAL_ROW_HEIGHT = 68;
-export const SEARCH_MODAL_KEYBOARD_SHORTCUT = 'k';
+export const SEARCH_MODAL_KEYBOARD_SHORTCUT = '/';
 
 /* @internal */
 export interface SearchProps {

From 57cad6b3dacd9ebfcab2cbb4718d5b0c93b28e9f Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Tue, 14 Apr 2026 13:18:06 +0200
Subject: [PATCH 29/77] Lint fix

---
 .../browser-components/src/shared/header_help_menu.tsx      | 5 ++++-
 .../security/public/nav_control/nav_control_component.tsx   | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
index c2f98cfb97065..77bee6bfa2ba8 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
@@ -44,7 +44,10 @@ const createCustomLink = (
 );
 
 interface HeaderHelpMenuProps {
-  renderButton?: (props: { isOpen: boolean; toggleMenu: () => void }) => NonNullable<React.ReactNode>;
+  renderButton?: (props: {
+    isOpen: boolean;
+    toggleMenu: () => void;
+  }) => NonNullable<React.ReactNode>;
 }
 
 export const HeaderHelpMenu = ({ renderButton }: HeaderHelpMenuProps = {}) => {
diff --git a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
index dfc660f563870..c74db037b000d 100644
--- a/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
+++ b/x-pack/platform/plugins/shared/security/public/nav_control/nav_control_component.tsx
@@ -129,7 +129,7 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
       .sort(({ order: orderA = Infinity }, { order: orderB = Infinity }) => orderA - orderB)
       .map(({ label, iconType, href, onClick }: UserMenuLink) => ({
         name: label,
-        icon: <EuiIcon type={iconType} size="m" />,
+        icon: <EuiIcon type={iconType} size="m" aria-hidden={true} />,
         href,
         onClick,
         'data-test-subj': `userMenuLink__${label}`,
@@ -148,7 +148,7 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
           defaultMessage="Edit profile"
         />
       ),
-      icon: <EuiIcon type="user" size="m" />,
+      icon: <EuiIcon type="user" size="m" aria-hidden={true} />,
       href: editProfileUrl,
       onClick: () => {
         setIsPopoverOpen(false);
@@ -172,7 +172,7 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
         defaultMessage="Log out"
       />
     ),
-    icon: <EuiIcon type="logOut" size="m" />,
+    icon: <EuiIcon type="logOut" size="m" aria-hidden={true} />,
     href: logoutUrl,
     'data-test-subj': 'logoutLink',
   });

From d7697d37fdbee38ab2c7af00a1621f5fca256572 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 14 Apr 2026 19:28:56 +0200
Subject: [PATCH 30/77] Chrome-next logo, separators, and home nav item
 (#263093)

---
 .../global_header/global_header_logo.tsx      | 27 +++++++++-
 .../global_header/global_header_shell.tsx     |  2 +-
 .../project/sidenav/navigation/navigation.tsx |  5 +-
 .../navigation/to_navigation_items.tsx        | 50 +++++++++----------
 .../src/shared/loading_indicator.tsx          |  8 ++-
 .../navigation/packaging/react/types.ts       |  2 +
 .../navigation/src/components/navigation.tsx  | 38 ++++++++++----
 .../navigation/src/hooks/use_navigation.ts    |  2 +-
 8 files changed, 93 insertions(+), 41 deletions(-)

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx
index 026daf85040dd..d04b96f70645e 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_logo.tsx
@@ -8,22 +8,45 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import React from 'react';
 import { useProjectHome, useBasePath, useCustomBranding } from '../../shared/chrome_hooks';
 import { LoadingIndicator } from '../../shared/loading_indicator';
+import { headerButtonBaseStyles, useHeaderButtonStyleVars } from './header_action_button';
 
 const LOGO_ARIA_LABEL = i18n.translate('core.ui.chrome.globalHeader.logoAriaLabel', {
   defaultMessage: 'Elastic home',
 });
 
+const logoLinkStyles = css`
+  ${headerButtonBaseStyles};
+  width: 32px;
+  justify-content: center;
+  border: none;
+  text-decoration: none;
+  color: inherit;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
 export const GlobalHeaderLogo = React.memo(() => {
   const basePath = useBasePath();
   const homeHref = basePath.prepend(useProjectHome());
   const { logo: customLogo } = useCustomBranding();
+  const styleVars = useHeaderButtonStyleVars();
 
   return (
-    <a href={homeHref} aria-label={LOGO_ARIA_LABEL} data-test-subj="chromeNextGlobalHeaderLogo">
-      <LoadingIndicator customLogo={customLogo} />
+    <a
+      href={homeHref}
+      aria-label={LOGO_ARIA_LABEL}
+      data-test-subj="chromeNextGlobalHeaderLogo"
+      css={logoLinkStyles}
+      style={styleVars}
+    >
+      <LoadingIndicator customLogo={customLogo} elasticLogoColor={'text'} />
     </a>
   );
 });
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
index 169afc1c62d32..5f727a8d86d76 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
@@ -96,7 +96,7 @@ const useGlobalHeaderStyles = () => {
 
     const separator = css`
       width: 1px;
-      height: 20px;
+      height: 24px;
       flex-shrink: 0;
       background: ${euiTheme.colors.borderBaseSubdued};
     `;
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
index de3343b6ee4ca..f31d195ffe14d 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
@@ -28,6 +28,7 @@ export interface ChromeNavigationProps {
 
 export const Navigation = (props: ChromeNavigationProps) => {
   const state = useNavigationItems();
+  const isNextChrome = useIsNextChrome();
 
   if (!state) {
     return null;
@@ -44,6 +45,7 @@ export const Navigation = (props: ChromeNavigationProps) => {
         setWidth={props.setWidth}
         onToggleCollapsed={props.onToggleCollapsed}
         activeItemId={activeItemId}
+        showTopSeparator={isNextChrome}
         data-test-subj={classnames(`${solutionId}SideNav`, 'projectSideNav', 'projectSideNavV2')}
       />
     </KibanaSectionErrorBoundary>
@@ -71,7 +73,8 @@ const useNavigationItems = (): NavigationState | null => {
         const { navItems, logoItem, activeItemId } = toNavigationItems(
           nav.navigationTree,
           nav.activeNodes,
-          panelStateManager
+          panelStateManager,
+          isNextChrome
         );
         return {
           solutionId: nav.solutionId,
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_navigation_items.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_navigation_items.tsx
index ad798056c0d78..a444dc6a9d85e 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_navigation_items.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/to_navigation_items.tsx
@@ -28,7 +28,7 @@ import { isActiveFromUrl } from './utils/is_active_from_url';
 const SKIP_WARNINGS = process.env.NODE_ENV === 'production';
 
 export interface NavigationItems {
-  logoItem: SideNavLogo;
+  logoItem?: SideNavLogo;
   navItems: NavigationStructure;
   activeItemId?: string;
 }
@@ -58,12 +58,11 @@ export interface NavigationItems {
 export const toNavigationItems = (
   navigationTree: NavigationTreeDefinitionUI,
   activeNodes: ChromeProjectNavigationNode[][],
-  panelStateManager: PanelStateManager
+  panelStateManager: PanelStateManager,
+  isNextChrome: boolean = false
 ): NavigationItems => {
-  // HACK: extract the logo, primary and footer nodes from the navigation tree
-  let logoNode: ChromeProjectNavigationNode | null = null;
-  let primaryNodes: ChromeProjectNavigationNode[] = [];
-  let footerNodes: ChromeProjectNavigationNode[] = [];
+  let primaryNodes: ChromeProjectNavigationNode[] = navigationTree.body;
+  const footerNodes: ChromeProjectNavigationNode[] = navigationTree.footer ?? [];
 
   let deepestActiveItemId: string | undefined;
   let currentActiveItemIdLevel = -1;
@@ -102,28 +101,31 @@ export const toNavigationItems = (
     );
   };
 
-  primaryNodes = navigationTree.body;
-  footerNodes = navigationTree.footer ?? [];
+  let logoItem: SideNavLogo | undefined;
 
   const homeNodeIndex = primaryNodes.findIndex((node) => node.renderAs === 'home');
   if (homeNodeIndex !== -1) {
-    logoNode = primaryNodes[homeNodeIndex];
-    primaryNodes = primaryNodes.filter((_, index) => index !== homeNodeIndex); // Remove the logo node from primary items
-    maybeMarkActive(logoNode, 0);
+    const homeNode = primaryNodes[homeNodeIndex];
+    maybeMarkActive(homeNode, 0);
+
+    if (isNextChrome) {
+      primaryNodes[homeNodeIndex] = { ...homeNode, title: 'Home', icon: 'home' };
+    } else {
+      primaryNodes = primaryNodes.filter((_, i) => i !== homeNodeIndex);
+      logoItem = {
+        href: warnIfMissing(homeNode, 'href', '/missing-href-😭'),
+        iconType: getIcon(homeNode),
+        id: warnIfMissing(homeNode, 'id', 'kibana'),
+        label: warnIfMissing(homeNode, 'title', 'Kibana'),
+        'data-test-subj': getTestSubj(homeNode, ['nav-item-home']),
+      };
+    }
   } else {
     warnOnce(
       `No "home" node found in primary nodes. There should be a logo node with solution logo, name and home page href. renderAs: "home" is expected.`
     );
   }
 
-  const logoItem: SideNavLogo = {
-    href: warnIfMissing(logoNode, 'href', '/missing-href-😭'),
-    iconType: getIcon(logoNode),
-    id: warnIfMissing(logoNode, 'id', 'kibana'),
-    label: warnIfMissing(logoNode, 'title', 'Kibana'),
-    'data-test-subj': logoNode ? getTestSubj(logoNode, ['nav-item-home']) : undefined,
-  };
-
   const toMenuItem = (navNode: ChromeProjectNavigationNode): MenuItem[] | MenuItem | null => {
     if (!navNode) return null;
 
@@ -358,13 +360,12 @@ function warnAboutDuplicates(
 }
 
 function warnAboutDuplicateIcons(
-  logoItem: SideNavLogo,
+  logoItem: SideNavLogo | undefined,
   primaryItems: MenuItem[],
   footerItems: MenuItem[]
 ) {
   if (SKIP_WARNINGS) return;
-  // Collect all items with icons (only logo + primary items, excluding fallback)
-  const icons = [logoItem, ...primaryItems, ...footerItems]
+  const icons = [...(logoItem ? [logoItem] : []), ...primaryItems, ...footerItems]
     .filter(
       (item) =>
         item.iconType && item.iconType !== FALLBACK_ICON && typeof item.iconType === 'string'
@@ -379,13 +380,12 @@ function warnAboutDuplicateIcons(
 }
 
 function warnAboutDuplicateIds(
-  logoItem: SideNavLogo,
+  logoItem: SideNavLogo | undefined,
   primaryItems: MenuItem[],
   footerItems: MenuItem[]
 ) {
   if (SKIP_WARNINGS) return;
-  // Collect all IDs from all items, including secondary menu items
-  let allIds: string[] = [logoItem.id];
+  let allIds: string[] = logoItem ? [logoItem.id] : [];
 
   // Helper to extract IDs from menu items including their secondary sections
   const collectIds = (items: MenuItem[]) => {
diff --git a/src/core/packages/chrome/browser-components/src/shared/loading_indicator.tsx b/src/core/packages/chrome/browser-components/src/shared/loading_indicator.tsx
index 0fad5e798b159..b1ca71e275a8c 100644
--- a/src/core/packages/chrome/browser-components/src/shared/loading_indicator.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/loading_indicator.tsx
@@ -16,9 +16,14 @@ import { useIsLoading } from './chrome_hooks';
 export interface LoadingIndicatorProps {
   showAsBar?: boolean;
   customLogo?: string;
+  elasticLogoColor?: string;
 }
 
-export const LoadingIndicator = ({ showAsBar = false, customLogo }: LoadingIndicatorProps) => {
+export const LoadingIndicator = ({
+  showAsBar = false,
+  customLogo,
+  elasticLogoColor,
+}: LoadingIndicatorProps) => {
   const isLoading = useIsLoading();
 
   const loadingSubj = isLoading ? 'globalLoadingIndicator' : 'globalLoadingIndicator-hidden';
@@ -42,6 +47,7 @@ export const LoadingIndicator = ({ showAsBar = false, customLogo }: LoadingIndic
     <EuiIcon
       type={'logoElastic'}
       size="l"
+      color={elasticLogoColor}
       data-test-subj={testSubj}
       aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.logoAriaLabel', {
         defaultMessage: 'Elastic Logo',
diff --git a/src/core/packages/chrome/navigation/packaging/react/types.ts b/src/core/packages/chrome/navigation/packaging/react/types.ts
index 1df7bc44dd478..3688f8042475c 100644
--- a/src/core/packages/chrome/navigation/packaging/react/types.ts
+++ b/src/core/packages/chrome/navigation/packaging/react/types.ts
@@ -118,6 +118,8 @@ export interface NavigationProps {
   onItemClick?: (item: MenuItem | SecondaryMenuItem | SideNavLogo) => void;
   /** Callback fired when the collapse button is toggled. Omit to hide the toggle button. */
   onToggleCollapsed?: (isCollapsed: boolean) => void;
+  /** When true, renders a centered horizontal separator at the top of the side nav. */
+  showTopSeparator?: boolean;
   /** Content to display inside the side panel footer. */
   sidePanelFooter?: ReactNode;
   /** Optional `data-test-subj` attribute for testing purposes. */
diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx
index 9a322be8e69d1..ed4f32b1aa00b 100644
--- a/src/core/packages/chrome/navigation/src/components/navigation.tsx
+++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx
@@ -11,7 +11,7 @@ import React, { useState, type ReactNode } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { useIsWithinBreakpoints } from '@elastic/eui';
+import { useEuiTheme, useIsWithinBreakpoints } from '@elastic/eui';
 
 import type { NavigationStructure, SideNavLogo, MenuItem, SecondaryMenuItem } from '../../types';
 import {
@@ -29,6 +29,7 @@ import { useLayoutWidth } from '../hooks/use_layout_width';
 import { useNavigation } from '../hooks/use_navigation';
 import { useNewItems } from '../hooks/use_new_items';
 import { useResponsiveMenu } from '../hooks/use_responsive_menu';
+import { getHighContrastSeparator } from '../hooks/use_high_contrast_mode_styles';
 
 const navigationWrapperStyles = css`
   display: flex;
@@ -50,7 +51,7 @@ export interface NavigationProps {
   /**
    * The logo object containing the route ID, href, label, and type.
    */
-  logo: SideNavLogo;
+  logo?: SideNavLogo;
   /**
    * Required by the grid layout to set the width of the navigation slot.
    */
@@ -70,6 +71,11 @@ export interface NavigationProps {
    * (optional) Content to display inside the side panel footer.
    */
   sidePanelFooter?: ReactNode;
+  /**
+   * When true, renders a centered horizontal separator at the top of the side nav,
+   * between the global header and the logo/primary menu.
+   */
+  showTopSeparator?: boolean;
   /**
    * (optional) data-test-subj attribute for testing purposes.
    */
@@ -84,11 +90,20 @@ export const Navigation = ({
   onItemClick,
   onToggleCollapsed,
   setWidth,
+  showTopSeparator = false,
   sidePanelFooter,
   ...rest
 }: NavigationProps) => {
   const forcedCollapsed = useIsWithinBreakpoints(['xs', 's']);
   const isCollapsed = forcedCollapsed || isCollapsedProp;
+  const euiThemeContext = useEuiTheme();
+
+  const topSeparatorStyles = css`
+    position: relative;
+    flex-shrink: 0;
+    ${getHighContrastSeparator(euiThemeContext, { side: 'bottom' })}
+  `;
+
   const popoverItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverItem`;
   const popoverFooterItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-popoverFooterItem`;
   const sidePanelItemPrefix = `${NAVIGATION_SELECTOR_PREFIX}-sidePanelItem`;
@@ -100,7 +115,7 @@ export const Navigation = ({
     visuallyActiveSubpageId,
     isSidePanelOpen,
     openerNode,
-  } = useNavigation(isCollapsed, items, logo.id, activeItemId);
+  } = useNavigation(isCollapsed, items, logo?.id, activeItemId);
 
   const [isAnyPopoverLocked, setIsAnyPopoverLocked] = useState(false);
 
@@ -131,13 +146,16 @@ export const Navigation = ({
       id={NAVIGATION_ROOT_SELECTOR}
     >
       <SideNav isCollapsed={isCollapsed}>
-        <SideNav.Logo
-          isCollapsed={isCollapsed}
-          isCurrent={actualActiveItemId === logo.id}
-          isHighlighted={visuallyActivePageId === logo.id}
-          onClick={() => onItemClick?.(logo)}
-          {...logo}
-        />
+        {showTopSeparator && <div css={topSeparatorStyles} aria-hidden />}
+        {logo && (
+          <SideNav.Logo
+            isCollapsed={isCollapsed}
+            isCurrent={actualActiveItemId === logo.id}
+            isHighlighted={visuallyActivePageId === logo.id}
+            onClick={() => onItemClick?.(logo)}
+            {...logo}
+          />
+        )}
 
         <SideNav.PrimaryMenu ref={primaryMenuRef} isCollapsed={isCollapsed}>
           {({ mainNavigationInstructionsId }) => (
diff --git a/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts b/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
index 01620f070cfe5..bb30c12bf4ceb 100644
--- a/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
+++ b/src/core/packages/chrome/navigation/src/hooks/use_navigation.ts
@@ -39,7 +39,7 @@ interface NavigationState {
 export const useNavigation = (
   isCollapsed: boolean,
   items: NavigationStructure,
-  logoId: string,
+  logoId: string | undefined,
   activeItemId?: string
 ) => {
   const { primaryItem, secondaryItem, isLogoActive } = useMemo(

From 7db5a624ea510200c13aba5a5fc3e41b77b1eada Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 15 Apr 2026 14:29:29 +0200
Subject: [PATCH 31/77] wip polish title styles

---
 .../src/chrome_next/app_header/app_header.tsx |  6 +--
 .../app_header/app_header_shell.tsx           | 38 +++++++++----
 .../chrome_next/app_header/back_button.tsx    |  8 +--
 .../src/chrome_next/app_header/title_area.tsx | 54 +++++++++++++++++++
 4 files changed, 89 insertions(+), 17 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
index dd21326aa47a5..d861ecf3b8d7f 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
@@ -10,15 +10,13 @@
 import React from 'react';
 import { AppHeaderShell } from './app_header_shell';
 import { AppBadges } from './app_badges';
-import { BackButton } from './back_button';
-import { AppTitle } from './app_title';
+import { TitleArea } from './title_area';
 import { GlobalActions } from './global_actions';
 import { AppMenu } from './app_menu';
 
 export const AppHeader = React.memo(() => (
   <AppHeaderShell
-    leading={<BackButton />}
-    title={<AppTitle />}
+    title={<TitleArea />}
     badges={<AppBadges />}
     titleActions={<GlobalActions />}
     trailing={<AppMenu />}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
index 9136bb15813b2..df76c27b63b87 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
@@ -13,11 +13,9 @@ import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { useReportTopBarHeight } from './hooks';
 
-/** Minimum row height; aligns with project layout `applicationTopBarHeight`. */
-const APPLICATION_TOP_BAR_HEIGHT_PX = 48;
+const APPLICATION_TOP_BAR_MIN_HEIGHT_PX = 48;
 
 export interface AppHeaderShellProps {
-  leading?: ReactNode;
   title?: ReactNode;
   badges?: ReactNode;
   titleActions?: ReactNode;
@@ -35,20 +33,26 @@ const useHeaderStyles = () => {
       display: flex;
       flex-direction: column;
       min-width: 0;
-      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+      min-height: ${APPLICATION_TOP_BAR_MIN_HEIGHT_PX}px;
       box-sizing: border-box;
-      padding: 0 ${euiTheme.size.s};
+      padding: 0 ${euiTheme.size.m};
       background: ${euiTheme.colors.backgroundBasePlain};
       border-bottom: ${euiTheme.border.thin};
       margin-bottom: -${euiTheme.border.width.thin};
+
+      &:hover .titleActionsReveal,
+      &:focus-within .titleActionsReveal {
+        opacity: 1;
+        pointer-events: auto;
+      }
     `;
 
     const primaryRow = css`
       display: flex;
       align-items: center;
-      gap: ${euiTheme.size.xs};
+      gap: ${euiTheme.size.m};
       min-width: 0;
-      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+      min-height: ${APPLICATION_TOP_BAR_MIN_HEIGHT_PX}px;
     `;
 
     const titleCluster = css`
@@ -88,12 +92,23 @@ const useHeaderStyles = () => {
       align-items: stretch;
     `;
 
+    const titleActionsReveal = css`
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity ${euiTheme.animation.fast} ease;
+    `;
+
     return {
       root,
       primaryRow,
       titleCluster,
       titleGroup,
       titleClusterSpacer,
+      titleActionsReveal,
       metadataRow,
       calloutRow,
       tabsRow,
@@ -102,19 +117,22 @@ const useHeaderStyles = () => {
 };
 
 export const AppHeaderShell = React.memo<AppHeaderShellProps>(
-  ({ leading, title, badges, titleActions, trailing, metadata, callout, tabs }) => {
+  ({ title, badges, titleActions, trailing, metadata, callout, tabs }) => {
     const styles = useHeaderStyles();
     const heightRef = useReportTopBarHeight();
 
     return (
       <div ref={heightRef} css={styles.root} data-test-subj="chromeNextAppHeader">
         <div css={styles.primaryRow}>
-          {leading}
           <div css={styles.titleCluster}>
             <div css={styles.titleGroup}>
               {title}
               {badges}
-              {titleActions}
+              {titleActions && (
+                <div className="titleActionsReveal" css={styles.titleActionsReveal}>
+                  {titleActions}
+                </div>
+              )}
             </div>
             <div css={styles.titleClusterSpacer} aria-hidden />
           </div>
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
index e35199356d17d..4018abc28a029 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
@@ -7,12 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { useBackButton } from './hooks';
 
 export const BackButton = React.memo(() => {
+  const { euiTheme } = useEuiTheme();
   const back = useBackButton();
 
   const ariaLabel = useMemo(() => {
@@ -36,10 +37,11 @@ export const BackButton = React.memo(() => {
 
   return (
     <EuiButtonIcon
-      iconType="arrowLeft"
+      iconType="sortLeft"
       color="text"
       display="empty"
-      size="s"
+      size="xs"
+      css={{ color: euiTheme.colors.textSubdued }}
       aria-label={ariaLabel}
       data-test-subj="chromeNextAppHeaderBack"
       href={back.backHref}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx
new file mode 100644
index 0000000000000..fed8a312fb30a
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { useBackButton, useTitle } from './hooks';
+import { BackButton } from './back_button';
+
+export const TitleArea = React.memo(() => {
+  const { euiTheme } = useEuiTheme();
+  const back = useBackButton();
+  const title = useTitle();
+
+  const styles = useMemo(() => {
+    const wrapper = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.m};
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+    `;
+
+    const titleOffset = css`
+      padding-left: ${euiTheme.size.xs};
+    `;
+
+    return { wrapper, titleOffset };
+  }, [euiTheme]);
+
+  if (!title && !back) {
+    return null;
+  }
+
+  return (
+    <div css={styles.wrapper}>
+      {back && <BackButton />}
+      {title && (
+        <EuiTitle size="xs" css={!back ? styles.titleOffset : undefined}>
+          <h1 className="eui-textTruncate">{title}</h1>
+        </EuiTitle>
+      )}
+    </div>
+  );
+});
+
+TitleArea.displayName = 'TitleArea';

From e410accc662b552947e071a693a17adfd45bac9d Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 15 Apr 2026 18:50:51 +0200
Subject: [PATCH 32/77] [FeatureBranch/DoNotReview] Chrome-next: header API
 partial-merge, back button popover, title wiring (#263533)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- Refactor `chrome.next.header` API: `set()` now shallow-merges
(undefined values ignored), new `reset()` clears all or specific keys
- Enhance back button with tooltip ("Back to ..."), popover menu for
multiple targets, and extensible exclusion lists (deep link IDs + href
patterns)
- `back` config now accepts a single object or an array for explicit
multi-target back navigation
- Remove breadcrumb fallback from `useTitle` — apps must explicitly set
title via the header API
- Wire Discover to set title on mount/unmount, update Discover and
Dashboard to use new `reset()` API
- Exclude Stack Management root from back button breadcrumb fallback
targets

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../src/chrome_next/app_header/app_header.tsx |   6 +-
 .../app_header/app_header_shell.tsx           |  38 +++++--
 .../chrome_next/app_header/back_button.tsx    | 107 ++++++++++++++----
 .../app_header/hooks/use_back_button.ts       |  53 ++++++---
 .../chrome_next/app_header/hooks/use_title.ts |  24 +---
 .../src/chrome_next/app_header/title_area.tsx |  55 +++++++++
 .../browser-internal/src/chrome_api.tsx       |   1 +
 .../next_header/next_header_service.ts        |  28 ++++-
 .../browser-mocks/src/chrome_service.mock.ts  |  23 +++-
 .../browser/src/chrome_next/chrome_next.ts    |  18 ++-
 .../chrome/browser/src/chrome_next/header.ts  |   5 +-
 .../internal_dashboard_top_nav.tsx            |   4 +-
 .../single_tab_view_with_app_menu.tsx         |   2 +-
 .../components/tabs_view/hide_tabs_bar.tsx    |   2 +-
 .../main/components/tabs_view/tabs_view.tsx   |   2 +-
 .../application/main/discover_main_route.tsx  |   7 ++
 16 files changed, 280 insertions(+), 95 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
index dd21326aa47a5..d861ecf3b8d7f 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
@@ -10,15 +10,13 @@
 import React from 'react';
 import { AppHeaderShell } from './app_header_shell';
 import { AppBadges } from './app_badges';
-import { BackButton } from './back_button';
-import { AppTitle } from './app_title';
+import { TitleArea } from './title_area';
 import { GlobalActions } from './global_actions';
 import { AppMenu } from './app_menu';
 
 export const AppHeader = React.memo(() => (
   <AppHeaderShell
-    leading={<BackButton />}
-    title={<AppTitle />}
+    title={<TitleArea />}
     badges={<AppBadges />}
     titleActions={<GlobalActions />}
     trailing={<AppMenu />}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
index 9136bb15813b2..df76c27b63b87 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
@@ -13,11 +13,9 @@ import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { useReportTopBarHeight } from './hooks';
 
-/** Minimum row height; aligns with project layout `applicationTopBarHeight`. */
-const APPLICATION_TOP_BAR_HEIGHT_PX = 48;
+const APPLICATION_TOP_BAR_MIN_HEIGHT_PX = 48;
 
 export interface AppHeaderShellProps {
-  leading?: ReactNode;
   title?: ReactNode;
   badges?: ReactNode;
   titleActions?: ReactNode;
@@ -35,20 +33,26 @@ const useHeaderStyles = () => {
       display: flex;
       flex-direction: column;
       min-width: 0;
-      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+      min-height: ${APPLICATION_TOP_BAR_MIN_HEIGHT_PX}px;
       box-sizing: border-box;
-      padding: 0 ${euiTheme.size.s};
+      padding: 0 ${euiTheme.size.m};
       background: ${euiTheme.colors.backgroundBasePlain};
       border-bottom: ${euiTheme.border.thin};
       margin-bottom: -${euiTheme.border.width.thin};
+
+      &:hover .titleActionsReveal,
+      &:focus-within .titleActionsReveal {
+        opacity: 1;
+        pointer-events: auto;
+      }
     `;
 
     const primaryRow = css`
       display: flex;
       align-items: center;
-      gap: ${euiTheme.size.xs};
+      gap: ${euiTheme.size.m};
       min-width: 0;
-      min-height: ${APPLICATION_TOP_BAR_HEIGHT_PX}px;
+      min-height: ${APPLICATION_TOP_BAR_MIN_HEIGHT_PX}px;
     `;
 
     const titleCluster = css`
@@ -88,12 +92,23 @@ const useHeaderStyles = () => {
       align-items: stretch;
     `;
 
+    const titleActionsReveal = css`
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity ${euiTheme.animation.fast} ease;
+    `;
+
     return {
       root,
       primaryRow,
       titleCluster,
       titleGroup,
       titleClusterSpacer,
+      titleActionsReveal,
       metadataRow,
       calloutRow,
       tabsRow,
@@ -102,19 +117,22 @@ const useHeaderStyles = () => {
 };
 
 export const AppHeaderShell = React.memo<AppHeaderShellProps>(
-  ({ leading, title, badges, titleActions, trailing, metadata, callout, tabs }) => {
+  ({ title, badges, titleActions, trailing, metadata, callout, tabs }) => {
     const styles = useHeaderStyles();
     const heightRef = useReportTopBarHeight();
 
     return (
       <div ref={heightRef} css={styles.root} data-test-subj="chromeNextAppHeader">
         <div css={styles.primaryRow}>
-          {leading}
           <div css={styles.titleCluster}>
             <div css={styles.titleGroup}>
               {title}
               {badges}
-              {titleActions}
+              {titleActions && (
+                <div className="titleActionsReveal" css={styles.titleActionsReveal}>
+                  {titleActions}
+                </div>
+              )}
             </div>
             <div css={styles.titleClusterSpacer} aria-hidden />
           </div>
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
index e35199356d17d..34c97c7b5ff2a 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
@@ -7,44 +7,101 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButtonIcon } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiToolTip,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useBackButton } from './hooks';
 
+const backLabel = i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabel', {
+  defaultMessage: 'Back',
+});
+
+const getBackToLabel = (destination: string) =>
+  i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabelWithDestination', {
+    defaultMessage: 'Back to {destination}',
+    values: { destination },
+  });
+
+const useBackButtonStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const button = css`
+      color: ${euiTheme.colors.textSubdued};
+    `;
+
+    return { button };
+  }, [euiTheme]);
+};
+
 export const BackButton = React.memo(() => {
-  const back = useBackButton();
-
-  const ariaLabel = useMemo(() => {
-    if (!back) {
-      return '';
-    }
-    if (back.backDestinationLabel) {
-      return i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabelWithDestination', {
-        defaultMessage: 'Back to {destination}',
-        values: { destination: back.backDestinationLabel },
-      });
-    }
-    return i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabel', {
-      defaultMessage: 'Back',
-    });
-  }, [back]);
-
-  if (!back) {
+  const styles = useBackButtonStyles();
+  const targets = useBackButton();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const togglePopover = useCallback(() => setIsPopoverOpen((open) => !open), []);
+  const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+
+  const primary = targets[0];
+  const tooltip = primary?.backDestinationLabel
+    ? getBackToLabel(primary.backDestinationLabel)
+    : backLabel;
+
+  if (!primary) {
     return null;
   }
 
-  return (
+  const buttonIcon = (
     <EuiButtonIcon
-      iconType="arrowLeft"
+      iconType="sortLeft"
       color="text"
       display="empty"
-      size="s"
-      aria-label={ariaLabel}
+      size="xs"
+      css={styles.button}
+      aria-label={tooltip}
       data-test-subj="chromeNextAppHeaderBack"
-      href={back.backHref}
+      {...(targets.length > 1 ? { onClick: togglePopover } : { href: primary.backHref })}
     />
   );
+
+  if (targets.length > 1) {
+    return (
+      <EuiPopover
+        button={
+          <EuiToolTip content={tooltip} delay="long">
+            {buttonIcon}
+          </EuiToolTip>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+        anchorPosition="downLeft"
+      >
+        <EuiContextMenuPanel
+          items={targets.map((target, idx) => (
+            <EuiContextMenuItem key={idx} href={target.backHref} size="s">
+              {target.backDestinationLabel ?? target.backHref}
+            </EuiContextMenuItem>
+          ))}
+          size="s"
+        />
+      </EuiPopover>
+    );
+  }
+
+  return (
+    <EuiToolTip content={tooltip} delay="long">
+      {buttonIcon}
+    </EuiToolTip>
+  );
 });
 
 BackButton.displayName = 'BackButton';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
index d6cf302e97c52..3d359347aba53 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
@@ -8,46 +8,67 @@
  */
 
 import { useMemo } from 'react';
+import type { AppDeepLinkId, ChromeBreadcrumb } from '@kbn/core-chrome-browser';
 import { useNextHeader, useProjectBreadcrumbs } from '../../../shared/chrome_hooks';
 import { getBreadcrumbPlainText } from '../../../shared/breadcrumb_utils';
 
+const EXCLUDED_BACK_DEEP_LINKS = new Set<AppDeepLinkId>([]);
+const EXCLUDED_BACK_HREFS = [/\/app\/management\/?$/];
+
+const isExcludedBackTarget = (crumb: ChromeBreadcrumb): boolean => {
+  if (crumb.deepLinkId && EXCLUDED_BACK_DEEP_LINKS.has(crumb.deepLinkId)) {
+    return true;
+  }
+  if (crumb.href) {
+    return EXCLUDED_BACK_HREFS.some((re) => re.test(crumb.href!));
+  }
+  return false;
+};
+
 export interface BackNavigation {
   backHref: string;
-  /** Plain-text title of the destination crumb (for `aria-label` on the back control). */
   backDestinationLabel?: string;
 }
 
+const EMPTY: BackNavigation[] = [];
+
 /**
- * Resolution: explicit `chrome.next.header` `back.href` (and optional `back.label`) -> else the
- * last non-last project breadcrumb with a truthy `href` (scanning right to left). Returns
- * `undefined` if neither applies.
+ * Returns all valid back-navigation targets derived from project breadcrumbs
+ * (scanning right-to-left, so the immediate parent is first).
+ *
+ * An explicit `chrome.next.header` `back.href` takes priority and produces a
+ * single-element array.
  */
-export function useBackButton(): BackNavigation | undefined {
+export function useBackButton(): BackNavigation[] {
   const config = useNextHeader();
   const breadcrumbs = useProjectBreadcrumbs();
 
   return useMemo(() => {
-    const explicitHref = config?.back?.href?.trim();
-    if (explicitHref) {
-      return {
-        backHref: explicitHref,
-        backDestinationLabel: config?.back?.label,
-      };
+    if (config?.back) {
+      const backItems = Array.isArray(config.back) ? config.back : [config.back];
+      const explicit = backItems
+        .filter((b) => b.href?.trim())
+        .map((b) => ({ backHref: b.href, backDestinationLabel: b.label }));
+      if (explicit.length > 0) {
+        return explicit;
+      }
     }
 
     if (breadcrumbs.length < 2) {
-      return undefined;
+      return EMPTY;
     }
+
+    const targets: BackNavigation[] = [];
     for (let i = breadcrumbs.length - 2; i >= 0; i--) {
       const crumb = breadcrumbs[i];
       const href = crumb.href;
-      if (href) {
-        return {
+      if (href && !isExcludedBackTarget(crumb)) {
+        targets.push({
           backHref: href,
           backDestinationLabel: getBreadcrumbPlainText(crumb),
-        };
+        });
       }
     }
-    return undefined;
+    return targets.length > 0 ? targets : EMPTY;
   }, [breadcrumbs, config]);
 }
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
index 047ef3aa8b05f..dfade4e013a2e 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
@@ -7,29 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { useNextHeader, useProjectBreadcrumbs } from '../../../shared/chrome_hooks';
-import { getBreadcrumbPlainText } from '../../../shared/breadcrumb_utils';
+import { useNextHeader } from '../../../shared/chrome_hooks';
 
-/**
- * Resolution: explicit `config.title` -> last project breadcrumb text -> `undefined`.
- */
 export function useTitle(): string | undefined {
   const config = useNextHeader();
-  const breadcrumbs = useProjectBreadcrumbs();
-
-  if (config?.title) {
-    return config.title;
-  }
-
-  if (breadcrumbs.length === 0) {
-    return undefined;
-  }
-
-  const crumbForTitle = breadcrumbs[breadcrumbs.length - 1];
-  const plain = getBreadcrumbPlainText(crumbForTitle);
-  if (plain) {
-    return plain;
-  }
-
-  return undefined;
+  return config?.title;
 }
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx
new file mode 100644
index 0000000000000..f23a9c69e402c
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { useBackButton, useTitle } from './hooks';
+import { BackButton } from './back_button';
+
+export const TitleArea = React.memo(() => {
+  const { euiTheme } = useEuiTheme();
+  const backTargets = useBackButton();
+  const hasBack = backTargets.length > 0;
+  const title = useTitle();
+
+  const styles = useMemo(() => {
+    const wrapper = css`
+      display: flex;
+      align-items: center;
+      gap: ${euiTheme.size.m};
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+    `;
+
+    const titleOffset = css`
+      padding-left: ${euiTheme.size.xs};
+    `;
+
+    return { wrapper, titleOffset };
+  }, [euiTheme]);
+
+  if (!title && !hasBack) {
+    return null;
+  }
+
+  return (
+    <div css={styles.wrapper}>
+      {hasBack && <BackButton />}
+      {title && (
+        <EuiTitle size="xs" css={!hasBack ? styles.titleOffset : undefined}>
+          <h1 className="eui-textTruncate">{title}</h1>
+        </EuiTitle>
+      )}
+    </div>
+  );
+});
+
+TitleArea.displayName = 'TitleArea';
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 18bf68f647007..90a50e0d8db5e 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -176,6 +176,7 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
       header: {
         get$: services.nextHeader.get$,
         set: services.nextHeader.set,
+        reset: services.nextHeader.reset,
       },
       aiButton: {
         get$: () => state.aiButton.$.pipe(map((buttons) => [...buttons])),
diff --git a/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts b/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
index 488502d43c280..a990334acb996 100644
--- a/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
+++ b/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
@@ -18,9 +18,31 @@ export class NextHeaderService {
   public start() {
     return {
       get$: () => this.config.$,
-      set: (value?: ChromeNextHeaderConfig) => this.config.set(value),
-      /** @internal Reset to initial state (e.g. on app change). */
-      reset: () => this.config.set(undefined),
+      set: (partial: Partial<ChromeNextHeaderConfig>) => {
+        const current = this.config.get() ?? {};
+        const next = { ...current };
+        for (const [key, value] of Object.entries(partial)) {
+          if (value !== undefined) {
+            (next as Record<string, unknown>)[key] = value;
+          }
+        }
+        this.config.set(
+          Object.keys(next).length > 0 ? (next as ChromeNextHeaderConfig) : undefined
+        );
+      },
+      reset: (...keys: Array<keyof ChromeNextHeaderConfig>) => {
+        if (keys.length === 0) {
+          this.config.set(undefined);
+          return;
+        }
+        const current = this.config.get();
+        if (!current) return;
+        const next = { ...current };
+        for (const key of keys) {
+          delete next[key];
+        }
+        this.config.set(Object.keys(next).length > 0 ? next : undefined);
+      },
     };
   }
 
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 020b039da4d08..2cf8b3f5cdda7 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -117,8 +117,27 @@ const createStartContractMock = () => {
     next: lazyObject({
       header: lazyObject({
         get$: jest.fn().mockReturnValue(nextHeaderState$),
-        set: jest.fn((config?: ChromeNextHeaderConfig) => {
-          nextHeaderState$.next(config);
+        set: jest.fn((config: Partial<ChromeNextHeaderConfig>) => {
+          const current = nextHeaderState$.getValue();
+          const next = { ...current, ...config };
+          nextHeaderState$.next(
+            Object.keys(next).length > 0 ? (next as ChromeNextHeaderConfig) : undefined
+          );
+        }),
+        reset: jest.fn((...keys: Array<keyof ChromeNextHeaderConfig>) => {
+          if (keys.length === 0) {
+            nextHeaderState$.next(undefined);
+            return;
+          }
+          const current = nextHeaderState$.getValue();
+          if (!current) return;
+          const next = { ...current };
+          for (const key of keys) {
+            delete next[key];
+          }
+          nextHeaderState$.next(
+            Object.keys(next).length > 0 ? (next as ChromeNextHeaderConfig) : undefined
+          );
         }),
       }),
       aiButton: lazyObject({
diff --git a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
index 7480157dca246..d402451bc5cdc 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
@@ -20,13 +20,19 @@ import type { ChromeNextSpaceSelectorConfig } from './space_selector';
 export interface ChromeNext {
   header: {
     /**
-     * Set the Chrome-Next header configuration for the current page.
-     * Chrome renders the title, metadata, global actions, and app menu.
-     *
-     * Pass `undefined` to clear (e.g. on unmount or route change).
-     * Automatically cleared on app change.
+     * Shallow-merge fields into the current Chrome-Next header configuration.
+     * Only provided keys are updated; `undefined` values in the partial are ignored.
+     * Use {@link reset} to clear fields.
      */
-    set(config?: ChromeNextHeaderConfig): void;
+    set(config: Partial<ChromeNextHeaderConfig>): void;
+
+    /**
+     * Clear Chrome-Next header configuration.
+     * Called with no arguments: clears everything.
+     * Called with key names: clears only those fields.
+     * Automatically called with no arguments on app change.
+     */
+    reset(...keys: Array<keyof ChromeNextHeaderConfig>): void;
   };
   aiButton: {
     /**
diff --git a/src/core/packages/chrome/browser/src/chrome_next/header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
index 3171a72164842..befb6fd40b972 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/header.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/header.ts
@@ -61,9 +61,10 @@ export interface ChromeNextHeaderConfig {
 
   /**
    * Optional explicit back navigation for the Chrome-Next header back control.
-   * When `href` is set, overrides breadcrumb-derived back destination.
+   * When set, overrides breadcrumb-derived back destinations.
+   * A single object produces a direct link; an array produces a popover menu.
    */
-  back?: ChromeNextHeaderBack;
+  back?: ChromeNextHeaderBack | ChromeNextHeaderBack[];
 }
 
 /** Explicit back target for {@link ChromeNextHeaderConfig.back}. */
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
index 439626b243a71..aa3ad3dec692c 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -323,10 +323,10 @@ export function InternalDashboardTopNav({
 
     coreServices.chrome.next.header.set({
       title: title ?? '',
-      globalActions: Object.keys(globalActions).length > 0 ? globalActions : undefined,
+      ...(Object.keys(globalActions).length > 0 ? { globalActions } : {}),
     });
     return () => {
-      coreServices.chrome.next.header.set(undefined);
+      coreServices.chrome.next.header.reset();
     };
   }, [title, chromeNextHeaderShareGlobalAction, chromeNextHeaderFavoriteGlobalAction]);
 
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx b/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
index 8846dd758ce05..f2b19d664096e 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
@@ -22,7 +22,7 @@ export const SingleTabViewWithAppMenu = (props: SingleTabViewProps) => {
     if (isNextChrome && topNavMenuItems) {
       chrome.next.header.set({ appMenu: topNavMenuItems });
       return () => {
-        chrome.next.header.set(undefined);
+        chrome.next.header.reset('appMenu');
       };
     }
   }, [isNextChrome, topNavMenuItems, chrome.next.header]);
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
index 0bae1e40c41a0..7f77f7208f78a 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
@@ -39,7 +39,7 @@ export const HideTabsBar: FC<{
     if (isNextChrome && customizationContext.displayMode === 'standalone' && topNavMenuItems) {
       chrome.next.header.set({ appMenu: topNavMenuItems });
       return () => {
-        chrome.next.header.set(undefined);
+        chrome.next.header.reset('appMenu');
       };
     }
   }, [isNextChrome, customizationContext.displayMode, topNavMenuItems, chrome.next.header]);
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
index b944bf68e72f1..fba76539a3052 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
@@ -53,7 +53,7 @@ export const TabsView = (props: SingleTabViewProps) => {
     if (isNextChrome && topNavMenuItems) {
       services.chrome.next.header.set({ appMenu: topNavMenuItems });
       return () => {
-        services.chrome.next.header.set(undefined);
+        services.chrome.next.header.reset('appMenu');
       };
     }
   }, [isNextChrome, topNavMenuItems, services.chrome.next.header]);
diff --git a/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx b/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx
index db2fb4daaa52b..bdd71a2c44c7d 100644
--- a/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx
@@ -220,9 +220,16 @@ const DiscoverMainRouteContent = (props: SingleTabViewProps) => {
         titleBreadcrumbText: persistedDiscoverSession?.title,
         services,
       });
+      chrome.next.header.set({
+        title: persistedDiscoverSession?.title || 'Discover',
+      });
     }
+    return () => {
+      chrome.next.header.reset('title');
+    };
   }, [
     chrome.docTitle,
+    chrome.next.header,
     persistedDiscoverSession?.title,
     customizationContext.displayMode,
     services,

From 21227e3b905077cf1849844db361504dca1d1f35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngeles=20Mart=C3=ADnez=20Barrio?=
 <angeles.martinezbarrio@elastic.co>
Date: Thu, 16 Apr 2026 10:00:32 +0200
Subject: [PATCH 33/77] [FeatureBranch/DoNotReview][Chrome Next] Add context
 switcher UI package (#263516)

Relates to https://github.com/elastic/kibana/issues/259992

## Summary

- This PR introduces a new shared UI package for the context switcher
that will be rendered in the Kibana global header

## Testing

- Run `node scripts/storybook context-switcher-components` and verify
all three stories render correctly
---
 .github/CODEOWNERS                            |   1 +
 package.json                                  |   1 +
 src/dev/storybook/aliases.ts                  |   2 +
 .../.storybook/main.js                        |  10 +
 .../context-switcher-components/README.md     |   3 +
 .../context-switcher-components/index.ts      |  18 ++
 .../jest.config.js                            |  14 +
 .../context-switcher-components/kibana.jsonc  |   7 +
 .../context-switcher-components/package.json  |   7 +
 .../src/components/context_row.tsx            |  78 ++++++
 .../components/context_switcher.stories.tsx   | 219 ++++++++++++++++
 .../src/components/context_switcher.tsx       | 240 ++++++++++++++++++
 .../context_switcher_trigger_button.tsx       |  64 +++++
 .../src/components/footer.tsx                 |  39 +++
 .../src/components/links_list.tsx             |  51 ++++
 .../src/components/selectable_list.tsx        | 185 ++++++++++++++
 .../src/components/types.ts                   |  98 +++++++
 .../src/components/views/context_menu.tsx     |  52 ++++
 .../src/components/views/context_submenu.tsx  |  83 ++++++
 .../src/components/views/spaces_list.tsx      | 149 +++++++++++
 .../context-switcher-components/tsconfig.json |  16 ++
 tsconfig.base.json                            |   2 +
 yarn.lock                                     |   4 +
 23 files changed, 1343 insertions(+)
 create mode 100644 src/platform/packages/shared/context-switcher-components/.storybook/main.js
 create mode 100644 src/platform/packages/shared/context-switcher-components/README.md
 create mode 100644 src/platform/packages/shared/context-switcher-components/index.ts
 create mode 100644 src/platform/packages/shared/context-switcher-components/jest.config.js
 create mode 100644 src/platform/packages/shared/context-switcher-components/kibana.jsonc
 create mode 100644 src/platform/packages/shared/context-switcher-components/package.json
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/footer.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/types.ts
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
 create mode 100644 src/platform/packages/shared/context-switcher-components/tsconfig.json

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 193af296d4256..3aeb9b9557d81 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -452,6 +452,7 @@ src/platform/packages/shared/content-management/table_list_view @elastic/appex-s
 src/platform/packages/shared/content-management/table_list_view_common @elastic/appex-sharedux
 src/platform/packages/shared/content-management/table_list_view_table @elastic/appex-sharedux
 src/platform/packages/shared/content-management/user_profiles @elastic/appex-sharedux
+src/platform/packages/shared/context-switcher-components @elastic/appex-sharedux
 src/platform/packages/shared/controls/control-group-renderer @elastic/kibana-presentation
 src/platform/packages/shared/controls/controls-constants @elastic/kibana-presentation
 src/platform/packages/shared/controls/controls-schemas @elastic/kibana-presentation
diff --git a/package.json b/package.json
index e5eac78bdaa5f..c56c7fc732bcf 100644
--- a/package.json
+++ b/package.json
@@ -318,6 +318,7 @@
     "@kbn/content-management-user-profiles": "link:src/platform/packages/shared/content-management/user_profiles",
     "@kbn/content-management-utils": "link:src/platform/packages/shared/kbn-content-management-utils",
     "@kbn/content-packs-schema": "link:x-pack/platform/packages/shared/kbn-content-packs-schema",
+    "@kbn/context-switcher-components": "link:src/platform/packages/shared/context-switcher-components",
     "@kbn/control-group-renderer": "link:src/platform/packages/shared/controls/control-group-renderer",
     "@kbn/controls-constants": "link:src/platform/packages/shared/controls/controls-constants",
     "@kbn/controls-example-plugin": "link:examples/controls_example",
diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 0b5e8b6a78904..1bddc349557ce 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -24,6 +24,8 @@ export const storybookAliases = {
   content_management:
     'src/platform/packages/shared/content-management/kbn-content-management-storybook',
   content_management_examples: 'examples/content_management_examples/.storybook',
+  context_switcher_components:
+    'src/platform/packages/shared/context-switcher-components/.storybook',
   classic_stream_flyout: 'x-pack/platform/packages/shared/kbn-classic-stream-flyout/.storybook',
   custom_icons: 'src/platform/packages/shared/kbn-custom-icons/.storybook',
   custom_integrations: 'src/platform/plugins/shared/custom_integrations/storybook',
diff --git a/src/platform/packages/shared/context-switcher-components/.storybook/main.js b/src/platform/packages/shared/context-switcher-components/.storybook/main.js
new file mode 100644
index 0000000000000..4c71be3362b05
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/.storybook/main.js
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = require('@kbn/storybook').defaultConfig;
diff --git a/src/platform/packages/shared/context-switcher-components/README.md b/src/platform/packages/shared/context-switcher-components/README.md
new file mode 100644
index 0000000000000..0acbf137cbdd5
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/README.md
@@ -0,0 +1,3 @@
+# @kbn/context-switcher-components
+
+Context switcher components.
diff --git a/src/platform/packages/shared/context-switcher-components/index.ts b/src/platform/packages/shared/context-switcher-components/index.ts
new file mode 100644
index 0000000000000..d10ce06ed150e
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { ContextSwitcher } from './src/components/context_switcher';
+export type {
+  ContextSwitcherProps,
+  ContextSwitcherSpacesConfig,
+  ContextSwitcherEnvironmentConfig,
+  SpaceItem,
+  LinksListItem,
+  FooterAction,
+} from './src/components/types';
diff --git a/src/platform/packages/shared/context-switcher-components/jest.config.js b/src/platform/packages/shared/context-switcher-components/jest.config.js
new file mode 100644
index 0000000000000..db103b4bb8f1f
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/jest.config.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/src/platform/packages/shared/context-switcher-components'],
+};
diff --git a/src/platform/packages/shared/context-switcher-components/kibana.jsonc b/src/platform/packages/shared/context-switcher-components/kibana.jsonc
new file mode 100644
index 0000000000000..03e25d465a87f
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/kibana.jsonc
@@ -0,0 +1,7 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/context-switcher-components",
+  "owner": "@elastic/appex-sharedux",
+  "group": "platform",
+  "visibility": "shared"
+}
diff --git a/src/platform/packages/shared/context-switcher-components/package.json b/src/platform/packages/shared/context-switcher-components/package.json
new file mode 100644
index 0000000000000..02af0cca8ffd2
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/context-switcher-components",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}
\ No newline at end of file
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx
new file mode 100644
index 0000000000000..99ff378d2dcf8
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiListGroupItem, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { CONTEXT_ROW_HEIGHT, type ContextRowModel } from './types';
+
+export interface ContextRowProps {
+  readonly row: ContextRowModel;
+  readonly onClick: () => void;
+}
+
+/**
+ * The row component for the context switcher that contains the avatar, the title, the subtitle and the chevron.
+ */
+
+export const ContextRow = ({ row, onClick }: ContextRowProps) => {
+  const rowStyles = css`
+    && .euiListGroupItem__label {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    && .euiListGroupItem__button {
+      min-height: ${CONTEXT_ROW_HEIGHT}px;
+    }
+    /* no underline */
+    && .euiListGroupItem__button:hover,
+    && .euiListGroupItem__button:focus {
+      text-decoration: none;
+    }
+  `;
+
+  const truncateCss = css`
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+
+  const rowLabel = (
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow>
+        <EuiText size="s" css={truncateCss}>
+          {row.label}
+        </EuiText>
+        {row.value != null && (
+          <EuiText size="xs" color="subdued" css={truncateCss}>
+            {row.value}
+          </EuiText>
+        )}
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="arrowRight" size="m" color="subdued" aria-hidden={true} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  return (
+    <EuiListGroupItem
+      css={rowStyles}
+      label={rowLabel}
+      icon={row.prepend}
+      onClick={onClick}
+      isDisabled={row.disabled}
+      aria-label={row.ariaLabel}
+      data-test-subj={row['data-test-subj']}
+      size="s"
+      color="text"
+    />
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx
new file mode 100644
index 0000000000000..771a808a8d511
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx
@@ -0,0 +1,219 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { EuiAvatar, EuiBadge, EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+
+import { ContextSwitcher } from './context_switcher';
+import type { SpaceItem, LinksListItem } from './types';
+
+interface StoryArgs {
+  searchThreshold: number;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Context switcher',
+  parameters: { layout: 'centered' },
+  argTypes: {
+    searchThreshold: {
+      control: { type: 'number', min: 1, max: 15 },
+      description: 'Number of spaces required to show the search box',
+    },
+  },
+  args: {
+    searchThreshold: 15,
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const MOCK_SPACES: Array<SpaceItem> = [
+  { id: 'default', name: 'Default', solution: 'Security', solutionIcon: 'logoSecurity' },
+  {
+    id: 'obs',
+    name: 'My awesome space',
+    solution: 'Observability',
+    solutionIcon: 'logoObservability',
+  },
+  {
+    id: 'search',
+    name: 'One more space',
+    solution: 'Elasticsearch',
+    solutionIcon: 'logoElasticsearch',
+  },
+  { id: 'sec', name: 'Another awesome space', solution: 'Security', solutionIcon: 'logoSecurity' },
+  {
+    id: 'data',
+    name: 'Data Insight Realm',
+    solution: 'Elasticsearch',
+    solutionIcon: 'logoElasticsearch',
+  },
+  {
+    id: 'k',
+    name: 'Knowledge Discovery',
+    solution: 'Observability',
+    solutionIcon: 'logoObservability',
+  },
+];
+
+const MOCK_FOOTER_LINKS: LinksListItem[] = [
+  {
+    id: 'connection-details',
+    label: 'Connection details',
+    onClick: () => action('connection-details')(),
+    iconType: 'plugs',
+  },
+  {
+    id: 'manage-deployments',
+    label: 'Manage deployments',
+    onClick: () => action('manage-deployments')(),
+    iconType: 'gear',
+  },
+  {
+    id: 'invite-users',
+    label: 'Invite users',
+    href: 'https://example.com',
+    iconType: 'user',
+    external: true,
+  },
+];
+
+const buildSpaceItems = (showBadges: boolean): SpaceItem[] =>
+  MOCK_SPACES.map((s) => ({
+    ...s,
+    avatar: <EuiAvatar type="space" name={s.name} size="s" />,
+    badge: showBadges ? (
+      <EuiBadge color="hollow" iconType={s.solutionIcon}>
+        {s.solution}
+      </EuiBadge>
+    ) : undefined,
+  }));
+
+const buildManageAction = () => (
+  <EuiButtonEmpty size="s" onClick={action('manage-spaces')}>
+    Manage
+  </EuiButtonEmpty>
+);
+
+const useSpacesConfig = (showBadges: boolean, searchThreshold?: number) => {
+  const [activeSpaceId, setActiveSpaceId] = useState('obs');
+  const activeSpace = MOCK_SPACES.find((s) => s.id === activeSpaceId)!;
+  return {
+    active: activeSpace,
+    items: buildSpaceItems(showBadges),
+    onSelect: (spaceId: string) => {
+      action('select-space')(spaceId);
+      setActiveSpaceId(spaceId);
+    },
+    headerAction: buildManageAction(),
+    footerAction: SPACES_FOOTER_ACTION,
+    search: searchThreshold != null ? { threshold: searchThreshold } : undefined,
+  };
+};
+
+const SPACES_FOOTER_ACTION = {
+  id: 'create-space',
+  label: 'Create space',
+  onClick: () => action('create-space')(),
+};
+
+const CloudScenario = ({ searchThreshold }: { searchThreshold: number }) => {
+  const spaces = useSpacesConfig(true, searchThreshold);
+
+  return (
+    <EuiPanel color="subdued" paddingSize="m" hasBorder hasShadow={false}>
+      <ContextSwitcher
+        spaces={spaces}
+        environmentContext={{
+          environmentType: 'deployment',
+          name: 'My Favorite Deployment',
+          submenuItems: [
+            {
+              id: 'manage-discovery-insights',
+              label: 'Manage Discovery Insights',
+              iconType: 'gear',
+              onClick: () => action('manage-discovery-insights')(),
+            },
+            {
+              id: 'view-all-deployments',
+              label: 'View all deployments',
+              iconType: 'grid',
+              onClick: () => action('view-all-deployments')(),
+            },
+          ],
+          submenuFooterAction: {
+            id: 'create-deployment',
+            label: 'Create deployment',
+            onClick: () => action('create-deployment')(),
+          },
+        }}
+        footerLinks={MOCK_FOOTER_LINKS}
+      />
+    </EuiPanel>
+  );
+};
+
+const ServerlessScenario = ({ searchThreshold }: { searchThreshold: number }) => {
+  const spaces = useSpacesConfig(false, searchThreshold);
+
+  return (
+    <EuiPanel color="subdued" paddingSize="m" hasBorder hasShadow={false}>
+      <ContextSwitcher
+        spaces={spaces}
+        environmentContext={{
+          environmentType: 'project',
+          name: 'My Favorite Project',
+          submenuItems: [
+            {
+              id: 'manage-insightful-analytics',
+              label: 'Manage Insightful Analytics',
+              iconType: 'gear',
+              onClick: () => action('manage-insightful-analytics')(),
+            },
+            {
+              id: 'view-all-projects',
+              label: 'View all projects',
+              iconType: 'grid',
+              onClick: () => action('view-all-projects')(),
+            },
+          ],
+          submenuFooterAction: {
+            id: 'create-project',
+            label: 'Create project',
+            onClick: () => action('create-project')(),
+          },
+        }}
+        footerLinks={MOCK_FOOTER_LINKS}
+      />
+    </EuiPanel>
+  );
+};
+
+const SelfHostedScenario = ({ searchThreshold }: { searchThreshold: number }) => {
+  const spaces = useSpacesConfig(true, searchThreshold);
+
+  return (
+    <EuiPanel color="subdued" paddingSize="m" hasBorder hasShadow={false}>
+      <ContextSwitcher spaces={spaces} />
+    </EuiPanel>
+  );
+};
+
+export const CloudMode: Story = {
+  render: (args) => <CloudScenario searchThreshold={args.searchThreshold} />,
+};
+export const ServerlessMode: Story = {
+  render: (args) => <ServerlessScenario searchThreshold={args.searchThreshold} />,
+};
+export const SelfHostedMode: Story = {
+  render: (args) => <SelfHostedScenario searchThreshold={args.searchThreshold} />,
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
new file mode 100644
index 0000000000000..c80386222ce0c
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
@@ -0,0 +1,240 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactElement } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  EuiAvatar,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  useEuiTheme,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { SpacesListView } from './views/spaces_list';
+import type { SpacesListViewProps } from './views/spaces_list';
+import { ContextMenuView } from './views/context_menu';
+import type { ContextMenuViewProps } from './views/context_menu';
+import { ContextSubmenuView } from './views/context_submenu';
+import type { ContextSubmenuViewProps } from './views/context_submenu';
+import { ContextSwitcherTriggerButton } from './context_switcher_trigger_button';
+import { POPOVER_WIDTH, type ContextSwitcherProps, type SpaceItem } from './types';
+import type { SelectableListItem } from './selectable_list';
+
+const SEARCH_THRESHOLD = 15;
+
+const SUBMENU_TITLES: Record<'project' | 'deployment', string> = {
+  project: i18n.translate('contextSwitcherComponents.submenuTitle.projects', {
+    defaultMessage: 'My projects',
+  }),
+  deployment: i18n.translate('contextSwitcherComponents.submenuTitle.deployments', {
+    defaultMessage: 'My deployments',
+  }),
+};
+
+const SPACES_TITLE = i18n.translate('contextSwitcherComponents.spacesTitle', {
+  defaultMessage: 'Spaces',
+});
+
+const CONTEXT_SWITCHER_ARIA_LABEL = i18n.translate('contextSwitcherComponents.popover.ariaLabel', {
+  defaultMessage: 'Context switcher',
+});
+
+const mapSpaceToSelectableItem = (space: SpaceItem, activeId: string): SelectableListItem => ({
+  id: space.id,
+  label: space.name,
+  checked: space.id === activeId,
+  prepend: space.avatar ?? <EuiAvatar type="space" name={space.name} size="s" />,
+  append: space.badge,
+  'data-test-subj': `space-${space.id}`,
+});
+
+type PopoverViewId = 'root' | 'environment' | 'spaces';
+
+interface TwoStepContentProps {
+  readonly rootView: Omit<ContextMenuViewProps, 'onClickEnvironmentRow' | 'onClickSpacesRow'>;
+  readonly environmentSubmenuView: Omit<ContextSubmenuViewProps, 'onBack'>;
+  readonly spacesSubmenuView: Omit<SpacesListViewProps, 'onBack'>;
+}
+
+const TwoStepContent = ({
+  rootView,
+  environmentSubmenuView,
+  spacesSubmenuView,
+}: TwoStepContentProps) => {
+  const [view, setView] = useState<PopoverViewId>('root');
+
+  if (view === 'environment') {
+    return <ContextSubmenuView {...environmentSubmenuView} onBack={() => setView('root')} />;
+  }
+  if (view === 'spaces') {
+    return <SpacesListView {...spacesSubmenuView} onBack={() => setView('root')} />;
+  }
+  return (
+    <ContextMenuView
+      {...rootView}
+      onClickEnvironmentRow={() => setView('environment')}
+      onClickSpacesRow={() => setView('spaces')}
+    />
+  );
+};
+
+/**
+ * The context switcher component.
+ * It shows a trigger button and a popover.
+ * The popover can be a single step or a two step content.
+ * The single step content is the spaces list.
+ * The two step content is the context menu and the spaces list.
+ */
+export const ContextSwitcher = ({
+  spaces,
+  environmentContext,
+  footerLinks,
+}: ContextSwitcherProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const togglePopover = useCallback(() => setIsOpen((prev) => !prev), []);
+  const closePopover = useCallback(() => setIsOpen(false), []);
+
+  const triggerButtonIcon = spaces.active.solutionIcon ?? 'logoElastic';
+
+  const selectableItems = useMemo(
+    () => spaces.items.map((space) => mapSpaceToSelectableItem(space, spaces.active.id)),
+    [spaces.items, spaces.active.id]
+  );
+
+  const handleSpaceSelect = useCallback<SpacesListViewProps['onSelect']>(
+    ({ item }) => {
+      spaces.onSelect(item.id);
+      closePopover();
+    },
+    [spaces, closePopover]
+  );
+
+  const searchConfig =
+    selectableItems.length >= (spaces.search?.threshold ?? SEARCH_THRESHOLD)
+      ? {
+          enabled: true,
+          props: {
+            placeholder:
+              spaces.search?.placeholder ??
+              i18n.translate('contextSwitcherComponents.searchPlaceholder', {
+                defaultMessage: 'Find a space',
+              }),
+            compressed: true,
+            isClearable: true,
+          },
+        }
+      : undefined;
+
+  const spacesViewProps = {
+    id: 'contextSwitcherSpacesList',
+    title: SPACES_TITLE,
+    headerAction: spaces.headerAction,
+    items: selectableItems,
+    onSelect: handleSpaceSelect,
+    search: searchConfig,
+    isLoading: spaces.isLoading,
+    footerAction: spaces.footerAction,
+  };
+
+  const environmentDescription =
+    environmentContext && spaces.active.solution
+      ? i18n.translate('contextSwitcherComponents.environmentContext.description', {
+          defaultMessage: '{solution} {kind}',
+          values: {
+            solution: spaces.active.solution,
+            kind: environmentContext.environmentType,
+          },
+        })
+      : undefined;
+
+  const environmentIcon: ReactElement | undefined =
+    environmentContext?.environmentType === 'project' && spaces.active.solutionIcon ? (
+      <EuiAvatar
+        type="space"
+        name={spaces.active.solution ?? ''}
+        iconType={spaces.active.solutionIcon}
+        iconSize="m"
+        size="l"
+        color={euiTheme.colors.backgroundBaseSubdued}
+      />
+    ) : undefined;
+
+  const spacesDescription =
+    spaces.active.solution && environmentContext?.environmentType === 'deployment' ? (
+      <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false} component="span">
+        {spaces.active.solutionIcon && (
+          <EuiFlexItem grow={false} component="span">
+            <EuiIcon type={spaces.active.solutionIcon} size="s" aria-hidden={true} />
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem grow={false} component="span">
+          {i18n.translate('contextSwitcherComponents.spacesRow.description', {
+            defaultMessage: '{solution} space',
+            values: { solution: spaces.active.solution },
+          })}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ) : undefined;
+
+  return (
+    <EuiPopover
+      aria-label={CONTEXT_SWITCHER_ARIA_LABEL}
+      button={
+        <ContextSwitcherTriggerButton
+          solutionIcon={triggerButtonIcon}
+          spaceName={spaces.active.name}
+          onClick={togglePopover}
+          isSelected={isOpen}
+        />
+      }
+      isOpen={isOpen}
+      closePopover={closePopover}
+      anchorPosition="downLeft"
+      panelStyle={{ width: POPOVER_WIDTH }}
+      panelPaddingSize="s"
+      ownFocus
+      repositionOnScroll
+      data-test-subj="contextSwitcherPopover"
+    >
+      {!environmentContext ? (
+        <SpacesListView {...spacesViewProps} />
+      ) : (
+        <TwoStepContent
+          rootView={{
+            environmentRow: {
+              id: environmentContext.environmentType,
+              label: environmentContext.name,
+              value: environmentDescription,
+              prepend: environmentIcon,
+            },
+            spacesRow: {
+              id: 'spaces',
+              label: spaces.active.name,
+              prepend: spaces.active.avatar ?? (
+                <EuiAvatar type="space" name={spaces.active.name} size="l" />
+              ),
+              value: spacesDescription,
+            },
+            footerLinks,
+          }}
+          environmentSubmenuView={{
+            title: SUBMENU_TITLES[environmentContext.environmentType],
+            items: environmentContext.submenuItems,
+            footerAction: environmentContext.submenuFooterAction,
+          }}
+          spacesSubmenuView={spacesViewProps}
+        />
+      )}
+    </EuiPopover>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
new file mode 100644
index 0000000000000..2c8830ca62c89
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { IconType } from '@elastic/eui';
+import { EuiButtonEmpty, EuiIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+
+const CONTEXT_SWITCHER_BUTTON_ARIA_LABEL = i18n.translate(
+  'contextSwitcherComponents.triggerButton.ariaLabel',
+  {
+    defaultMessage: 'Open context switcher',
+  }
+);
+
+interface ContextSwitcherTriggerButtonProps {
+  readonly solutionIcon: IconType;
+  readonly spaceName: string;
+  readonly onClick: () => void;
+  readonly isSelected?: boolean;
+}
+
+/**
+ * Trigger button UI for the context switcher popover.
+ * Solution logo (left), space name (middle), down arrow (right).
+ */
+export const ContextSwitcherTriggerButton = ({
+  solutionIcon,
+  spaceName,
+  onClick,
+  isSelected,
+}: ContextSwitcherTriggerButtonProps): ReactElement => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiButtonEmpty
+      color="text"
+      size="m"
+      onClick={onClick}
+      iconType="arrowDown"
+      iconSide="right"
+      isSelected={isSelected}
+      aria-label={CONTEXT_SWITCHER_BUTTON_ARIA_LABEL}
+      data-test-subj="contextSwitcherTriggerButton"
+    >
+      <EuiIcon type={solutionIcon} size="m" aria-hidden={true} />
+      <span
+        css={css`
+          padding-left: ${euiTheme.size.s};
+        `}
+      >
+        {spaceName}
+      </span>
+    </EuiButtonEmpty>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx b/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx
new file mode 100644
index 0000000000000..ee7fd2ff280f9
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
+import type { FooterAction } from './types';
+
+export interface FooterProps {
+  readonly action?: FooterAction;
+}
+
+/**
+ * Renders a single footer action row.
+ */
+export const Footer = ({ action }: FooterProps) => {
+  if (!action) return null;
+
+  return (
+    <EuiListGroup gutterSize="none" flush>
+      <EuiListGroupItem
+        label={action.label}
+        iconType={'plus'}
+        href={action.href}
+        onClick={action.onClick}
+        external={action.external}
+        isDisabled={action.disabled}
+        size="s"
+        color="text"
+        data-test-subj={action['data-test-subj']}
+      />
+    </EuiListGroup>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx
new file mode 100644
index 0000000000000..66be2b6b93689
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
+import { css } from '@emotion/react';
+import type { LinksListItem } from './types';
+
+export interface LinksListProps {
+  readonly items: ReadonlyArray<LinksListItem>;
+}
+
+/**
+ * Renders a list of links.
+ */
+
+export const LinksList = ({ items }: LinksListProps) => {
+  const itemCss = css`
+    /* no underline */
+    && .euiListGroupItem__button:hover,
+    && .euiListGroupItem__button:focus {
+      text-decoration: none;
+    }
+  `;
+
+  return (
+    <EuiListGroup gutterSize="none" flush>
+      {items.map((item) => (
+        <EuiListGroupItem
+          css={itemCss}
+          key={item.id}
+          label={item.label}
+          href={item.href}
+          onClick={item.onClick}
+          external={item.external}
+          isDisabled={item.disabled}
+          iconType={item.iconType}
+          size="s"
+          color="text"
+          data-test-subj={item['data-test-subj']}
+        />
+      ))}
+    </EuiListGroup>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx
new file mode 100644
index 0000000000000..578a263fc1a15
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { EuiSelectable, useEuiTheme } from '@elastic/eui';
+import type { EuiSelectableOption } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import classNames from 'classnames';
+import { SELECTABLE_ROW_HEIGHT } from './types';
+
+const SELECTABLE_LIST_CHECKED_ITEM_CLASS = 'kbnContextSwitcherSelectableListItem--checked';
+
+type EuiSelectableChangeHandler = NonNullable<ComponentProps<typeof EuiSelectable>['onChange']>;
+type EuiSelectableChangeEvent = Parameters<EuiSelectableChangeHandler>[1];
+
+export interface SelectableListSearchConfig {
+  readonly enabled: boolean;
+  readonly props?: ComponentProps<typeof EuiSelectable>['searchProps'];
+}
+
+export interface SelectableListItem {
+  readonly id: string;
+  readonly label: string;
+  readonly prepend?: ReactNode;
+  readonly append?: ReactNode;
+  readonly checked?: boolean;
+  readonly disabled?: boolean;
+  readonly className?: string;
+  readonly ['data-test-subj']?: string;
+}
+
+export interface SelectableListProps {
+  readonly id: string;
+  readonly items: ReadonlyArray<SelectableListItem>;
+  readonly isLoading?: boolean;
+  readonly loadingMessage?: string;
+  readonly noMatchesMessage?: ReactElement;
+  readonly search?: SelectableListSearchConfig;
+  readonly onSelect: (args: {
+    readonly item: SelectableListItem;
+    readonly event: EuiSelectableChangeEvent;
+    readonly previousSelectedId?: string;
+  }) => void;
+  readonly children?: (nodes: {
+    readonly list: ReactNode;
+    readonly search?: ReactNode;
+  }) => ReactNode;
+}
+
+/**
+ * Generic selectable list for context-switcher:
+ * - Single selection (always)
+ * - Optional search UI
+ * - Supports prepend/append per item
+ */
+export const SelectableList = ({
+  id,
+  items,
+  isLoading = false,
+  loadingMessage,
+  noMatchesMessage,
+  search,
+  onSelect,
+  children,
+}: SelectableListProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  const previousSelectedId = useMemo(() => items.find((i) => i.checked)?.id, [items]);
+
+  const itemById = useMemo(() => {
+    const map = new Map<string, SelectableListItem>();
+    for (const item of items) map.set(item.id, item);
+    return map;
+  }, [items]);
+
+  const options: Array<EuiSelectableOption> = useMemo(
+    () =>
+      items.map((item) => ({
+        key: item.id,
+        label: item.label,
+        prepend: item.prepend,
+        append: item.append,
+        checked: item.checked ? ('on' as const) : undefined,
+        disabled: item.disabled,
+        className: classNames(item.className, item.checked && SELECTABLE_LIST_CHECKED_ITEM_CLASS),
+        'data-test-subj': item['data-test-subj'],
+      })),
+    [items]
+  );
+
+  const defaultNoMatchesMessage = (
+    <FormattedMessage
+      id="contextSwitcherComponents.selectableList.noMatchesFound"
+      defaultMessage="No matches found"
+    />
+  );
+
+  const handleChange = useCallback<EuiSelectableChangeHandler>(
+    (newOptions, event) => {
+      const selected = newOptions.find((o) => o.checked === 'on');
+      const selectedId = selected?.key != null ? String(selected.key) : undefined;
+      if (!selectedId) return;
+
+      const item = itemById.get(selectedId);
+      if (!item) return;
+
+      onSelect({ item, event, previousSelectedId });
+    },
+    [itemById, onSelect, previousSelectedId]
+  );
+
+  const selectableStyles = css`
+    /* no underline */
+    .euiSelectableListItem:hover .euiSelectableListItem__text,
+    .euiSelectableListItem.euiSelectableListItem-isFocused .euiSelectableListItem__text {
+      text-decoration: none;
+    }
+    /* blue background color and rounded corners */
+    .euiSelectableListItem {
+      &:hover:not([aria-disabled='true']),
+      &.euiSelectableListItem-isFocused:not([aria-disabled='true']),
+      &.${SELECTABLE_LIST_CHECKED_ITEM_CLASS} {
+        background-color: ${euiTheme.colors.backgroundBaseInteractiveSelect};
+        border-radius: ${euiTheme.border.radius.small};
+      }
+    }
+    /* blue icon color */
+    .euiSelectableListItem__icon {
+      color: ${euiTheme.colors.textPrimary};
+    }
+    /* badges: no background + no border */
+    .euiSelectableListItem__append .euiBadge:not(.euiSelectableListItem__onFocusBadge) {
+      --euiBadgeTextColor: ${euiTheme.colors.textSubdued};
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+    /* no bottom border between items */
+    .euiSelectableListItem:not(:last-of-type) {
+      border-bottom: 0;
+    }
+  `;
+
+  const searchableProps = search?.enabled
+    ? { searchable: true as const, searchProps: search.props }
+    : { searchable: false as const };
+
+  return (
+    <EuiSelectable
+      id={id}
+      options={options}
+      singleSelection="always"
+      onChange={handleChange}
+      isLoading={isLoading}
+      loadingMessage={loadingMessage}
+      noMatchesMessage={noMatchesMessage ?? defaultNoMatchesMessage}
+      css={selectableStyles}
+      listProps={{
+        rowHeight: SELECTABLE_ROW_HEIGHT,
+        showIcons: true,
+        onFocusBadge: false,
+      }}
+      {...searchableProps}
+    >
+      {(list, searchNode) => {
+        if (children) return <>{children({ list, search: searchNode ?? undefined })}</>;
+
+        return (
+          <>
+            {searchNode}
+            {list}
+          </>
+        );
+      }}
+    </EuiSelectable>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/types.ts b/src/platform/packages/shared/context-switcher-components/src/components/types.ts
new file mode 100644
index 0000000000000..9f15a3492cee9
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/types.ts
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactElement, ReactNode } from 'react';
+import type { IconType } from '@elastic/eui';
+
+export const POPOVER_WIDTH = 400;
+export const SELECTABLE_ROW_HEIGHT = 40;
+export const CONTEXT_ROW_HEIGHT = 48;
+
+export interface SpaceItem {
+  id: string;
+  name: string;
+  /** Avatar or icon to display. */
+  avatar?: ReactElement;
+  /** Optional solution badge or metadata shown alongside. */
+  badge?: ReactNode;
+  /** Solution name (e.g. "Security", "Observability"). Used to derive labels and icons. */
+  solution?: string;
+  /** Solution icon type (e.g. "logoSecurity"). Used for trigger button and environment row avatar. */
+  solutionIcon?: IconType;
+}
+
+export interface ContextSwitcherSpacesConfig {
+  /** The currently active space. */
+  active: SpaceItem;
+  /** All available spaces (including the active one). */
+  items: SpaceItem[];
+  /** Called when user selects a space. */
+  onSelect: (spaceId: string) => void;
+  /** Optional search config. */
+  search?: { placeholder?: string; threshold?: number };
+  /** Header action (e.g. "Manage" button). */
+  headerAction?: ReactNode;
+  /** Footer action (e.g. "Create space"). */
+  footerAction?: FooterAction;
+  isLoading?: boolean;
+}
+
+export interface ContextSwitcherEnvironmentConfig {
+  /** Determines static labels (e.g. "My projects" vs "My deployments"). */
+  environmentType: 'project' | 'deployment';
+  name: string;
+  /** Submenu link items (e.g. "Manage project", "View all deployments"). */
+  submenuItems: LinksListItem[];
+  /** Submenu footer action (e.g. "Create project"). */
+  submenuFooterAction?: FooterAction;
+}
+
+export interface ContextSwitcherProps {
+  /** Active space info + full list of spaces. */
+  spaces: ContextSwitcherSpacesConfig;
+  /**
+   * If provided, enables the root menu with an environment row
+   * (project or deployment) + submenu navigation.
+   * When absent, the popover shows only the spaces list.
+   */
+  environmentContext?: ContextSwitcherEnvironmentConfig;
+  /** Optional footer links (e.g. "Connection details", "Manage deployments"). */
+  footerLinks?: LinksListItem[];
+}
+
+export interface LinksListItem {
+  id: string;
+  label: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  external?: boolean;
+  disabled?: boolean;
+  iconType?: IconType;
+  ['data-test-subj']?: string;
+}
+
+export interface FooterAction {
+  id: string;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  external?: boolean;
+  disabled?: boolean;
+  ['data-test-subj']?: string;
+}
+
+export interface ContextRowModel {
+  id: string;
+  label: ReactNode;
+  value?: ReactNode;
+  prepend?: ReactElement;
+  disabled?: boolean;
+  ariaLabel?: string;
+  ['data-test-subj']?: string;
+}
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx
new file mode 100644
index 0000000000000..c8b577b8cc2f4
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiHorizontalRule, EuiListGroup } from '@elastic/eui';
+
+import { ContextRow } from '../context_row';
+import { LinksList } from '../links_list';
+import type { ContextRowModel } from '../types';
+import { type LinksListItem } from '../types';
+
+export interface ContextMenuViewProps {
+  readonly environmentRow: ContextRowModel;
+  readonly spacesRow: ContextRowModel;
+  readonly footerLinks?: ReadonlyArray<LinksListItem>;
+  readonly onClickEnvironmentRow: () => void;
+  readonly onClickSpacesRow: () => void;
+}
+
+/**
+ * The menu view for the context switcher that contains the environment row and the spaces row.
+ */
+
+export const ContextMenuView = ({
+  environmentRow,
+  spacesRow,
+  onClickEnvironmentRow,
+  onClickSpacesRow,
+  footerLinks,
+}: ContextMenuViewProps) => {
+  return (
+    <>
+      <EuiListGroup gutterSize="none" flush>
+        <ContextRow row={environmentRow} onClick={onClickEnvironmentRow} />
+        <ContextRow row={spacesRow} onClick={onClickSpacesRow} />
+      </EuiListGroup>
+
+      {!!footerLinks?.length && (
+        <>
+          <EuiHorizontalRule margin="xs" />
+          <LinksList items={footerLinks} />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx
new file mode 100644
index 0000000000000..0a1bef26385fb
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import type { ReactNode } from 'react';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPopoverTitle,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+import { i18n } from '@kbn/i18n';
+import { LinksList } from '../links_list';
+import { Footer } from '../footer';
+import { type FooterAction, type LinksListItem } from '../types';
+
+const BACK_BUTTON_ARIA_LABEL = i18n.translate(
+  'contextSwitcherComponents.contextSubmenuView.backButtonAriaLabel',
+  {
+    defaultMessage: 'Back',
+  }
+);
+export interface ContextSubmenuViewProps {
+  readonly title: ReactNode;
+  readonly onBack: () => void;
+  readonly items: ReadonlyArray<LinksListItem>;
+  readonly footerAction?: FooterAction;
+}
+
+/**
+ * The submenu view for the environment context that contains the title, the links list and the footer action.
+ */
+
+export const ContextSubmenuView = ({
+  title,
+  onBack,
+  items,
+  footerAction,
+}: ContextSubmenuViewProps) => {
+  return (
+    <>
+      <EuiPopoverTitle
+        css={css`
+          border-bottom: 0;
+          padding-bottom: 0;
+        `}
+      >
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              iconType="arrowLeft"
+              aria-label={BACK_BUTTON_ARIA_LABEL}
+              color="text"
+              display="empty"
+              size="s"
+              onClick={onBack}
+              data-test-subj="contextSwitcherSubmenuBackButton"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{title}</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverTitle>
+
+      <LinksList items={items} />
+
+      {footerAction && (
+        <>
+          <EuiHorizontalRule margin="xs" />
+          <Footer action={footerAction} />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
new file mode 100644
index 0000000000000..e3751955dbd8a
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
@@ -0,0 +1,149 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPopoverTitle,
+  EuiSpacer,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+import { i18n } from '@kbn/i18n';
+import { SelectableList } from '../selectable_list';
+import type {
+  SelectableListItem,
+  SelectableListProps,
+  SelectableListSearchConfig,
+} from '../selectable_list';
+
+import { Footer } from '../footer';
+import { type FooterAction } from '../types';
+
+const BACK_BUTTON_ARIA_LABEL = i18n.translate(
+  'contextSwitcherComponents.spacesListView.backButtonAriaLabel',
+  {
+    defaultMessage: 'Back',
+  }
+);
+export interface SpacesListViewProps {
+  readonly id: string;
+  readonly title: string;
+  readonly headerAction?: ReactNode;
+  readonly items: ReadonlyArray<SelectableListItem>;
+  readonly search?: SelectableListSearchConfig;
+  readonly isLoading?: boolean;
+  readonly loadingMessage?: string;
+  readonly noMatchesMessage?: ReactElement;
+  readonly footerAction?: FooterAction;
+  readonly onBack?: () => void;
+  readonly onSelect: SelectableListProps['onSelect'];
+}
+
+/**
+ * The list view for the spaces that contains the title, the selectable list and the footer action.
+ */
+
+export const SpacesListView = ({
+  id,
+  title,
+  onBack,
+  headerAction,
+  items,
+  onSelect,
+  search,
+  isLoading,
+  loadingMessage,
+  noMatchesMessage,
+  footerAction,
+}: SpacesListViewProps) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <>
+      <SelectableList
+        id={id}
+        items={items}
+        isLoading={isLoading}
+        loadingMessage={loadingMessage}
+        noMatchesMessage={noMatchesMessage}
+        search={search}
+        onSelect={onSelect}
+      >
+        {({ list, search: searchNode }) => (
+          <>
+            <EuiPopoverTitle
+              css={css`
+                border-bottom: 0;
+                padding-bottom: 0;
+              `}
+            >
+              <EuiFlexGroup
+                alignItems="center"
+                justifyContent="spaceBetween"
+                gutterSize="s"
+                responsive={false}
+              >
+                <EuiFlexItem grow={false}>
+                  <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+                    {onBack && (
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonIcon
+                          iconType="arrowLeft"
+                          aria-label={BACK_BUTTON_ARIA_LABEL}
+                          color="text"
+                          display="empty"
+                          size="s"
+                          onClick={onBack}
+                          data-test-subj="contextSwitcherSpacesBackButton"
+                        />
+                      </EuiFlexItem>
+                    )}
+                    <EuiFlexItem
+                      grow={false}
+                      css={
+                        !onBack
+                          ? css`
+                              padding-left: ${euiTheme.size.xs};
+                            `
+                          : undefined
+                      }
+                    >
+                      {title}
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                {headerAction && <EuiFlexItem grow={false}>{headerAction}</EuiFlexItem>}
+              </EuiFlexGroup>
+
+              {searchNode && (
+                <>
+                  <EuiSpacer size="s" />
+                  {searchNode}
+                </>
+              )}
+            </EuiPopoverTitle>
+            {list}
+          </>
+        )}
+      </SelectableList>
+
+      {footerAction && (
+        <>
+          <EuiHorizontalRule margin="xs" />
+          <Footer action={footerAction} />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/src/platform/packages/shared/context-switcher-components/tsconfig.json b/src/platform/packages/shared/context-switcher-components/tsconfig.json
new file mode 100644
index 0000000000000..a35436b8034d8
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@kbn/tsconfig-base/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/storybook",
+  ]
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index fe338dd5ad3e8..f4c6eacf5cb87 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -344,6 +344,8 @@
       "@kbn/content-management-utils/*": ["src/platform/packages/shared/kbn-content-management-utils/*"],
       "@kbn/content-packs-schema": ["x-pack/platform/packages/shared/kbn-content-packs-schema"],
       "@kbn/content-packs-schema/*": ["x-pack/platform/packages/shared/kbn-content-packs-schema/*"],
+      "@kbn/context-switcher-components": ["src/platform/packages/shared/context-switcher-components"],
+      "@kbn/context-switcher-components/*": ["src/platform/packages/shared/context-switcher-components/*"],
       "@kbn/control-group-renderer": ["src/platform/packages/shared/controls/control-group-renderer"],
       "@kbn/control-group-renderer/*": ["src/platform/packages/shared/controls/control-group-renderer/*"],
       "@kbn/controls-constants": ["src/platform/packages/shared/controls/controls-constants"],
diff --git a/yarn.lock b/yarn.lock
index a5f0b12c8dc98..85f37217f35a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5231,6 +5231,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/context-switcher-components@link:src/platform/packages/shared/context-switcher-components":
+  version "0.0.0"
+  uid ""
+
 "@kbn/control-group-renderer@link:src/platform/packages/shared/controls/control-group-renderer":
   version "0.0.0"
   uid ""

From d83008755dc22c6081dc97c8d1922a66941aac5c Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Thu, 16 Apr 2026 10:33:14 +0200
Subject: [PATCH 34/77] Fix project lint

---
 .../packages/shared/context-switcher-components/tsconfig.json  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/platform/packages/shared/context-switcher-components/tsconfig.json b/src/platform/packages/shared/context-switcher-components/tsconfig.json
index a35436b8034d8..6b3950a308fb4 100644
--- a/src/platform/packages/shared/context-switcher-components/tsconfig.json
+++ b/src/platform/packages/shared/context-switcher-components/tsconfig.json
@@ -11,6 +11,7 @@
     "target/**/*"
   ],
   "kbn_references": [
-    "@kbn/storybook",
+    "@kbn/i18n",
+    "@kbn/i18n-react",
   ]
 }

From dd75d70895e3239760cd0d1715d2646b8d8fb714 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 16 Apr 2026 17:35:16 +0200
Subject: [PATCH 35/77] [DoNotReview/FeatureBranch] Auto-promote share from app
 menu to global actions (#263766)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

<img width="1912" height="1191" alt="Screenshot 2026-04-16 at 15 08 15"
src="https://github.com/user-attachments/assets/527dad85-e545-49bc-b7fb-81a5ebd7f497"
/>
<img width="1912" height="1191" alt="Screenshot 2026-04-16 at 15 08 19"
src="https://github.com/user-attachments/assets/f9b68838-f47a-4eb7-b7b9-8ed4f73386d6"
/>



### Share auto-promotion from app menu to global actions

Chrome now auto-extracts the share item (`id='share'`) from the app menu
and promotes it to a dedicated icon button in the global actions area
next to the title.

Previously, Dashboard explicitly wired `globalActions.share` via
`chrome.next.header.set()`. Discover had no share in global actions at
all. Instead of duplicating similar plumbing in both plugins, Chrome
handles it centrally: if an app menu item has `id='share'`, Chrome
strips it from the overflow menu and renders the icon button
automatically.

This is a pragmatic short-term approach — it's convention-based and
somewhat hacky, but it avoids boilerplate in both plugins while we
figure out the longer-term story. The explicit `globalActions.share` API
is kept for now but may not be useful going forward; a cleaner solution
would likely come through the share plugin itself.

**Changes:**
- `useResolvedAppMenu` finds and extracts the share item from the app
menu config
- `useShareAction` exposes the extracted `onClick`, `tooltipContent`,
and `tooltipTitle` to `GlobalActions`
- Dashboard no longer builds `chromeNextHeaderShareGlobalAction` or
passes it to `chrome.next.header.set()`
- Discover's `enhanceAppMenuItemWithRunAction` now handles the case
where `run()` is called without params (Chrome calls it directly, not
through the app menu UI that provides trigger element context)

### Global actions styling

- Share button size `s` -> `xs`, color set to `textSubdued`
- Favorite slot applies `textSubdued` color override and 24px dimensions
to the plugin-owned `FavoriteButton`
- Share button wrapped in `EuiToolTip` with `delay="long"`, using
tooltip data from the app menu item when available (Dashboard sets
`tooltipContent`/`tooltipTitle`), falling back to generic "Share"

### Empty badges container fix

Deprecated `renderCustomBadge` items (e.g. Discover's
`SolutionsViewBadge`) may return `null` at runtime, leaving empty
`EuiFlexItem` wrappers. The container's `margin-left` creates a visible
gap next to the title. Added a CSS `:has()` rule to hide the container
when all children are empty.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../core-chrome-app-menu-components/index.ts  |  1 +
 .../src/constants.ts                          |  1 +
 .../src/index.ts                              |  1 +
 .../src/chrome_next/app_header/app_badges.tsx |  8 +++
 .../chrome_next/app_header/global_actions.tsx | 59 +++++++++------
 .../src/chrome_next/app_header/hooks/index.ts |  2 +-
 .../app_header/hooks/use_app_header_menu.ts   | 71 +++++++++++++++++--
 .../src/components/app_menu/types.ts          |  2 +
 .../plugins/shared/dashboard/moon.yml         |  1 -
 .../top_nav/use_dashboard_menu_items.tsx      | 11 +--
 .../internal_dashboard_top_nav.tsx            | 28 +++-----
 .../plugins/shared/dashboard/tsconfig.json    |  1 -
 .../app_menu_actions/run_app_menu_action.tsx  | 11 +++
 13 files changed, 142 insertions(+), 55 deletions(-)

diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
index 3c6c5a97ebae1..b54b342785052 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
@@ -28,6 +28,7 @@ export {
   APP_MENU_ITEM_LIMIT,
   APP_MENU_NOTIFICATION_INDICATOR_LEFT,
   APP_MENU_NOTIFICATION_INDICATOR_TOP,
+  APP_MENU_SHARE_ID,
 } from './src';
 
 export {
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/constants.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/constants.ts
index f2f4c4814c24d..0a335417ec726 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/constants.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/constants.ts
@@ -18,3 +18,4 @@ export const APP_MENU_ITEM_LIMIT = 3;
 export const APP_MENU_NOTIFICATION_INDICATOR_TOP = 2;
 export const APP_MENU_NOTIFICATION_INDICATOR_LEFT = 25;
 export const DEFAULT_POPOVER_WIDTH = 200;
+export const APP_MENU_SHARE_ID = 'share';
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
index 3545791d5c23c..eb48109db1424 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
@@ -28,6 +28,7 @@ export {
   APP_MENU_ITEM_LIMIT,
   APP_MENU_NOTIFICATION_INDICATOR_LEFT,
   APP_MENU_NOTIFICATION_INDICATOR_TOP,
+  APP_MENU_SHARE_ID,
   DEFAULT_POPOVER_WIDTH,
 } from './constants';
 
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
index 87a30a0a36cc4..5822ed28d22f5 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
@@ -22,6 +22,14 @@ const useBadgesStyle = () => {
   return useMemo(() => {
     const badgesContainer = css`
       margin-left: ${euiTheme.size.s};
+
+      /* Deprecated renderCustomBadge items may return null at runtime,
+         leaving empty EuiFlexItem wrappers in the DOM. Hide the container
+         when none of its children have visible content to avoid a stale
+         margin-left gap next to the title. */
+      &:not(:has(.euiFlexItem:not(:empty))) {
+        display: none;
+      }
     `;
 
     return { badgesContainer };
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
index 2e3d0b0c8c389..f1115f782a144 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
@@ -7,11 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { useNextHeader } from '../../shared/chrome_hooks';
+import { useShareAction } from './hooks';
 
 const SHARE_ARIA_LABEL = i18n.translate('core.ui.chrome.appHeader.globalShareAriaLabel', {
   defaultMessage: 'Share',
@@ -28,49 +29,65 @@ const useGlobalActionsStyles = () => {
       gap: ${euiTheme.size.xs};
     `;
 
+    const iconButton = css`
+      color: ${euiTheme.colors.textSubdued};
+    `;
+
     const favoriteSlot = css`
       display: flex;
       flex-shrink: 0;
       align-items: center;
+
+      .euiButtonIcon {
+        color: ${euiTheme.colors.textSubdued};
+        block-size: 24px;
+        inline-size: 24px;
+      }
     `;
 
-    return { root, favoriteSlot };
+    return { root, iconButton, favoriteSlot };
   }, [euiTheme]);
 };
 
 /**
  * Fixed-order global object actions (editTitle, share, favorite) next to the title.
- * Only renders actions the page opts into via `chrome.next.header.set({ globalActions })`.
+ * Share is auto-extracted from the app menu (item with id 'share') or explicitly set
+ * via `chrome.next.header.set({ globalActions: { share } })`.
  * Favorite is a `ReactNode` slot so plugins own full behavior (clients, context, React Query).
  */
 export const GlobalActions = React.memo(() => {
   const config = useNextHeader();
   const styles = useGlobalActionsStyles();
-  const globalActions = config?.globalActions;
+  const shareAction = useShareAction();
+  const favorite = config?.globalActions?.favorite;
 
-  if (!globalActions) {
+  if (!shareAction && !favorite) {
     return null;
   }
 
-  const { share, favorite } = globalActions;
-
-  if (!share && !favorite) {
-    return null;
-  }
+  const shareTooltipContent = shareAction?.tooltipContent ?? SHARE_ARIA_LABEL;
+  const hasCustomTooltip = !!shareAction?.tooltipContent || !!shareAction?.tooltipTitle;
 
   return (
     <div css={styles.root} data-test-subj="chromeNextAppHeaderGlobalActions">
-      {/* TODO: editTitle — Chrome-controlled inline title editor; wire onSave from config */}
-      {share ? (
-        <EuiButtonIcon
-          iconType="share"
-          color="text"
-          display="empty"
-          size="s"
-          aria-label={SHARE_ARIA_LABEL}
-          data-test-subj="chromeNextAppHeaderGlobalShare"
-          onClick={share.onClick}
-        />
+      {shareAction ? (
+        <EuiToolTip
+          content={shareTooltipContent}
+          title={shareAction.tooltipTitle}
+          delay="long"
+          {...(!hasCustomTooltip && { disableScreenReaderOutput: true })}
+        >
+          <EuiButtonIcon
+            iconType="share"
+            color="text"
+            display="empty"
+            size="xs"
+            css={styles.iconButton}
+            aria-label={SHARE_ARIA_LABEL}
+            data-test-subj={`chromeNextAppHeaderGlobalShare ${shareAction.testId ?? ''}`.trim()}
+            onClick={shareAction.onClick}
+          />
+        </EuiToolTip>
       ) : null}
       {favorite ? (
         <div css={styles.favoriteSlot} data-test-subj="chromeNextAppHeaderGlobalFavoriteSlot">
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
index 0b070a122b120..98fd20f1eb40e 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { useAppHeaderMenu } from './use_app_header_menu';
+export { useAppHeaderMenu, useShareAction } from './use_app_header_menu';
 export { useBackButton } from './use_back_button';
 export { useReportTopBarHeight } from './use_report_top_bar_height';
 export { useTitle } from './use_title';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
index d742f0ffaa742..2c9c3735ded46 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
@@ -7,14 +7,77 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { useMemo } from 'react';
+import type { AppMenuConfig, AppMenuItemType } from '@kbn/core-chrome-app-menu-components';
+import { APP_MENU_SHARE_ID, getTooltip } from '@kbn/core-chrome-app-menu-components';
 import { useAppMenu, useNextHeader } from '../../../shared/chrome_hooks';
 
+interface ResolvedAppMenu {
+  menu: AppMenuConfig | undefined;
+  shareItem: AppMenuItemType | undefined;
+}
+
+function useResolvedAppMenu(): ResolvedAppMenu {
+  const config = useNextHeader();
+  const globalAppMenu = useAppMenu();
+  const menu = config?.appMenu ?? globalAppMenu;
+  const hasExplicitShare = !!config?.globalActions?.share;
+
+  return useMemo((): ResolvedAppMenu => {
+    if (!menu) return { menu: undefined, shareItem: undefined };
+
+    const shareItem = hasExplicitShare
+      ? undefined
+      : menu.items?.find((item) => item.id === APP_MENU_SHARE_ID);
+
+    if (!shareItem) return { menu, shareItem: undefined };
+
+    return {
+      menu: { ...menu, items: menu.items?.filter((item) => item.id !== APP_MENU_SHARE_ID) },
+      shareItem,
+    };
+  }, [menu, hasExplicitShare]);
+}
+
 /**
- * Fallback: `config.appMenu` from `chrome.next.header.set()` -> global `chrome.getAppMenu$()`.
+ * Returns the resolved app menu with the `share` item stripped out.
+ * The share action is auto-promoted to the global actions area by Chrome.
  */
 export function useAppHeaderMenu(): AppMenuConfig | undefined {
+  return useResolvedAppMenu().menu;
+}
+
+export interface ShareAction {
+  onClick: () => void;
+  tooltipContent?: string;
+  tooltipTitle?: string;
+  testId?: string;
+}
+
+/**
+ * Returns a share action auto-extracted from the app menu,
+ * or built from the explicitly set `globalActions.share` if provided.
+ * Includes tooltip data from the app menu item when available.
+ */
+export function useShareAction(): ShareAction | undefined {
   const config = useNextHeader();
-  const globalAppMenu = useAppMenu();
-  return config?.appMenu ?? globalAppMenu;
+  const { shareItem } = useResolvedAppMenu();
+  const explicitShare = config?.globalActions?.share?.onClick;
+
+  return useMemo(() => {
+    if (explicitShare) return { onClick: explicitShare };
+    if (!shareItem?.run) return undefined;
+
+    const { content, title } = getTooltip({
+      tooltipContent: shareItem.tooltipContent,
+      tooltipTitle: shareItem.tooltipTitle,
+    });
+
+    return {
+      onClick: () => shareItem.run!(),
+      tooltipContent: content,
+      tooltipTitle: title,
+      testId: shareItem.testId,
+    };
+  }, [explicitShare, shareItem]);
 }
diff --git a/src/platform/packages/shared/kbn-discover-utils/src/components/app_menu/types.ts b/src/platform/packages/shared/kbn-discover-utils/src/components/app_menu/types.ts
index 5119e53b1d88f..cadf02d441a3c 100644
--- a/src/platform/packages/shared/kbn-discover-utils/src/components/app_menu/types.ts
+++ b/src/platform/packages/shared/kbn-discover-utils/src/components/app_menu/types.ts
@@ -18,6 +18,8 @@ import type { ReactElement, ReactNode } from 'react';
 export enum AppMenuActionId {
   new = 'new',
   open = 'open',
+  // Must match APP_MENU_SHARE_ID from @kbn/core-chrome-app-menu-components.
+  // Chrome auto-promotes app menu items with this id to a global action button.
   share = 'share',
   export = 'export',
   alerts = 'alerts',
diff --git a/src/platform/plugins/shared/dashboard/moon.yml b/src/platform/plugins/shared/dashboard/moon.yml
index 32346e1d65f4c..7f705ca3c60b6 100644
--- a/src/platform/plugins/shared/dashboard/moon.yml
+++ b/src/platform/plugins/shared/dashboard/moon.yml
@@ -114,7 +114,6 @@ dependsOn:
   - '@kbn/test'
   - '@kbn/core-chrome-app-menu-components'
   - '@kbn/core-chrome-app-menu'
-  - '@kbn/core-chrome-browser'
   - '@kbn/test-jest-helpers'
   - '@kbn/scout'
   - '@kbn/cps-utils'
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
index d795e208f167a..aac6fa7a973b1 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
@@ -19,6 +19,7 @@ import type {
   AppMenuItemType,
   AppMenuPrimaryActionItem,
 } from '@kbn/core-chrome-app-menu-components';
+import { APP_MENU_SHARE_ID } from '@kbn/core-chrome-app-menu-components';
 import { useDashboardExportItems } from './share/use_dashboard_export_items';
 import { getAccessControlClient } from '../../services/access_control_service';
 import { UI_SETTINGS } from '../../../common/constants';
@@ -277,7 +278,7 @@ export const useDashboardMenuItems = ({
         label: topNavStrings.share.label,
         tooltipContent: getShareTooltip(),
         tooltipTitle: topNavStrings.share.tooltipTitle,
-        id: 'share',
+        id: APP_MENU_SHARE_ID,
         iconType: 'share',
         testId: 'shareTopNavButton',
         disableButton: disableTopNav,
@@ -492,13 +493,6 @@ export const useDashboardMenuItems = ({
     hasExportMenuItems,
   ]);
 
-  const chromeNextHeaderShareGlobalAction = useMemo(() => {
-    if (!shareService) {
-      return undefined;
-    }
-    return { onClick: showShare };
-  }, [showShare]);
-
   const editModeTopNavConfig = useMemo(() => {
     const { storeSearchSession } = getDashboardCapabilities();
 
@@ -546,6 +540,5 @@ export const useDashboardMenuItems = ({
   return {
     viewModeTopNavConfig,
     editModeTopNavConfig,
-    chromeNextHeaderShareGlobalAction,
   };
 };
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
index aa3ad3dec692c..32880c7201937 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -31,7 +31,6 @@ import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyLabsFlyout, withSuspense } from '@kbn/presentation-util-plugin/public';
 
 import { AppMenu } from '@kbn/core-chrome-app-menu';
-import type { ChromeNextHeaderGlobalActions } from '@kbn/core-chrome-browser';
 import { UI_SETTINGS } from '../../common/constants';
 import { DASHBOARD_APP_ID } from '../../common/page_bundle_constants';
 import type { SaveDashboardReturn } from '../dashboard_api/save_modal/types';
@@ -304,31 +303,24 @@ export function InternalDashboardTopNav({
     [redirectTo]
   );
 
-  const { viewModeTopNavConfig, editModeTopNavConfig, chromeNextHeaderShareGlobalAction } =
-    useDashboardMenuItems({
-      isLabsShown,
-      setIsLabsShown,
-      maybeRedirect,
-      showResetChange,
-    });
+  const { viewModeTopNavConfig, editModeTopNavConfig } = useDashboardMenuItems({
+    isLabsShown,
+    setIsLabsShown,
+    maybeRedirect,
+    showResetChange,
+  });
 
   useEffect(() => {
-    const globalActions: ChromeNextHeaderGlobalActions = {};
-    if (chromeNextHeaderShareGlobalAction) {
-      globalActions.share = chromeNextHeaderShareGlobalAction;
-    }
-    if (chromeNextHeaderFavoriteGlobalAction) {
-      globalActions.favorite = chromeNextHeaderFavoriteGlobalAction;
-    }
-
     coreServices.chrome.next.header.set({
       title: title ?? '',
-      ...(Object.keys(globalActions).length > 0 ? { globalActions } : {}),
+      ...(chromeNextHeaderFavoriteGlobalAction
+        ? { globalActions: { favorite: chromeNextHeaderFavoriteGlobalAction } }
+        : {}),
     });
     return () => {
       coreServices.chrome.next.header.reset();
     };
-  }, [title, chromeNextHeaderShareGlobalAction, chromeNextHeaderFavoriteGlobalAction]);
+  }, [title, chromeNextHeaderFavoriteGlobalAction]);
 
   UseUnmount(() => {
     dashboardApi.clearOverlays();
diff --git a/src/platform/plugins/shared/dashboard/tsconfig.json b/src/platform/plugins/shared/dashboard/tsconfig.json
index 52245dbb5ea4d..4525789f59648 100644
--- a/src/platform/plugins/shared/dashboard/tsconfig.json
+++ b/src/platform/plugins/shared/dashboard/tsconfig.json
@@ -112,7 +112,6 @@
     "@kbn/test",
     "@kbn/core-chrome-app-menu-components",
     "@kbn/core-chrome-app-menu",
-    "@kbn/core-chrome-browser",
     "@kbn/test-jest-helpers",
     "@kbn/scout",
     "@kbn/cps-utils",
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.tsx b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.tsx
index 45b744c83bff6..90cbe7b5201e1 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.tsx
@@ -129,6 +129,17 @@ export function enhanceAppMenuItemWithRunAction<T extends DiscoverAppMenuItem>({
             services,
             returnFocus: params.returnFocus,
           });
+        } else {
+          // Chrome-Next auto-promotes the share item from the app menu to a
+          // global action icon button. When triggered from there, no UI-context
+          // params are available (no anchor element, no return-focus callback).
+          // Stub them so the Discover run signature is satisfied — share doesn't
+          // use any of these, it opens its own modal via toggleShareContextMenu.
+          appMenuItem.run?.({
+            triggerElement: document.body,
+            returnFocus: () => {},
+            context: { onFinishAction: () => {} },
+          });
         }
       }
     : undefined;

From cc4b2ca1d54f9bb127befe7e1772526e6ac2eb4b Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Fri, 17 Apr 2026 14:10:45 +0200
Subject: [PATCH 36/77] [DoNotReview/FeatureBranch] [Chrome Next] Add feedback
 global app menu item (#263786)

## Summary

This PR adds global feedback button to app menu. Only apps with an
already existing app menu will see the global items, to avoid flickering
when rendering app menu.

Closes: https://github.com/elastic/kibana/issues/261959
---
 packages/kbn-optimizer/limits.yml             |  2 +-
 .../src/chrome_next/app_header/app_menu.tsx   |  8 ++--
 .../app_header/hooks/use_app_header_menu.ts   | 28 ++++++++++--
 .../browser-internal/src/chrome_api.tsx       |  8 ++++
 .../src/state/chrome_state.ts                 |  7 +++
 .../packages/chrome/browser/src/contracts.ts  | 13 ++++++
 .../shared/feedback-components/index.ts       |  2 +-
 .../src/components/index.ts                   |  3 +-
 .../shared/feedback-components/src/index.ts   |  2 +-
 .../private/feedback/public/plugin.tsx        | 45 +++++++++++++++++++
 10 files changed, 105 insertions(+), 13 deletions(-)

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index f562d227b5fab..566d7f92c6696 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -70,7 +70,7 @@ pageLoadAssetSize:
   expressionTagcloud: 14009
   expressionXY: 45000
   features: 4145
-  feedback: 7000
+  feedback: 7500
   fieldFormats: 64634
   fieldsMetadata: 4901
   files: 6037
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
index bcac05ad4c39b..76682a953c1f1 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
@@ -17,15 +17,15 @@ const AppMenuComponent = lazy(async () => {
   return { default: Component };
 });
 
-/** Fallback chain: AppMenuConfig -> legacy HeaderActionMenu -> nothing. */
+/** Fallback chain: AppMenuConfig + staticItems -> Legacy HeaderActionMenu -> nothing. */
 export const AppMenu = React.memo(() => {
-  const appMenuConfig = useAppHeaderMenu();
+  const { config, staticItems } = useAppHeaderMenu();
   const hasLegacyActionMenu = useHasLegacyActionMenu();
 
-  if (appMenuConfig) {
+  if (config) {
     return (
       <Suspense>
-        <AppMenuComponent config={appMenuConfig} />
+        <AppMenuComponent config={config} staticItems={staticItems} />
       </Suspense>
     );
   }
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
index 2c9c3735ded46..5b1a2cc840db1 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
@@ -10,14 +10,24 @@
 import { useMemo } from 'react';
 import type { AppMenuConfig, AppMenuItemType } from '@kbn/core-chrome-app-menu-components';
 import { APP_MENU_SHARE_ID, getTooltip } from '@kbn/core-chrome-app-menu-components';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import { useObservable } from '@kbn/use-observable';
 import { useAppMenu, useNextHeader } from '../../../shared/chrome_hooks';
 
+const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuItemType => ({
+  label: 'Feedback',
+  id: 'feedback',
+  iconType: 'comment',
+  order: 1,
+  run: feedbackHandler,
+});
+
 interface ResolvedAppMenu {
   menu: AppMenuConfig | undefined;
   shareItem: AppMenuItemType | undefined;
 }
 
-function useResolvedAppMenu(): ResolvedAppMenu {
+const useResolvedAppMenu = (): ResolvedAppMenu => {
   const config = useNextHeader();
   const globalAppMenu = useAppMenu();
   const menu = config?.appMenu ?? globalAppMenu;
@@ -37,14 +47,24 @@ function useResolvedAppMenu(): ResolvedAppMenu {
       shareItem,
     };
   }, [menu, hasExplicitShare]);
-}
+};
 
 /**
  * Returns the resolved app menu with the `share` item stripped out.
  * The share action is auto-promoted to the global actions area by Chrome.
  */
-export function useAppHeaderMenu(): AppMenuConfig | undefined {
-  return useResolvedAppMenu().menu;
+export function useAppHeaderMenu(): {
+  config: AppMenuConfig | undefined;
+  staticItems: AppMenuItemType[];
+} {
+  const { menu } = useResolvedAppMenu();
+  const chrome = useChromeService();
+  const feedbackHandler = useObservable(chrome.getFeedbackHandler$(), undefined);
+
+  return {
+    config: menu,
+    staticItems: feedbackHandler ? [createFeedbackMenuItem(feedbackHandler)] : [],
+  };
 }
 
 export interface ShareAction {
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 90a50e0d8db5e..441ebca9533d8 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -206,6 +206,14 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
     },
 
     sidebar,
+
+    registerFeedbackHandler: (handler: () => void) => {
+      state.feedbackHandler.set(handler);
+      return () => {
+        state.feedbackHandler.update((current) => (current === handler ? undefined : current));
+      };
+    },
+    getFeedbackHandler$: () => state.feedbackHandler.$,
   };
 
   return chromeStart;
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 247f7625c0571..925491b962f03 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -78,6 +78,9 @@ export interface ChromeState {
     supportUrl: State<string>;
     globalMenuLinks: ArrayState<ChromeGlobalHelpExtensionMenuLink>;
   };
+
+  /** Feedback handler registered by the feedback plugin */
+  feedbackHandler: State<(() => void) | undefined>;
 }
 
 export interface ChromeStateDeps {
@@ -125,6 +128,9 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   const helpSupportUrl = createState<string>(docLinks.links.kibana.askElastic);
   const globalHelpMenuLinks = createArrayState<ChromeGlobalHelpExtensionMenuLink>();
 
+  // Feedback
+  const feedbackHandler = createState<(() => void) | undefined>(undefined);
+
   return {
     visibility,
     style,
@@ -152,5 +158,6 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
       supportUrl: helpSupportUrl,
       globalMenuLinks: globalHelpMenuLinks,
     },
+    feedbackHandler,
   };
 }
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 0d869c8843a53..ae8570acd49c0 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -326,6 +326,19 @@ export interface ChromeStart {
   /** {@inheritdoc ChromeNext} */
   next: ChromeNext;
 
+  /**
+   * Register a handler that opens the feedback UI.
+   * Called by the feedback plugin during `start`.
+   *
+   * @returns A function to unregister the handler.
+   */
+  registerFeedbackHandler(handler: () => void): () => void;
+
+  /**
+   * Get an observable of the currently registered feedback handler, or `undefined` if none.
+   */
+  getFeedbackHandler$(): Observable<(() => void) | undefined>;
+
   /**
    * Used only by the rendering service and KibanaRenderingContextProvider to wrap the rendering tree in the Chrome context providers
    */
diff --git a/src/platform/packages/shared/feedback-components/index.ts b/src/platform/packages/shared/feedback-components/index.ts
index d5b7cb1032aec..732d349f73449 100644
--- a/src/platform/packages/shared/feedback-components/index.ts
+++ b/src/platform/packages/shared/feedback-components/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { FeedbackTriggerButton } from './src';
+export { FeedbackTriggerButton, FeedbackContainer } from './src';
diff --git a/src/platform/packages/shared/feedback-components/src/components/index.ts b/src/platform/packages/shared/feedback-components/src/components/index.ts
index d15db96e7142c..e70c962476012 100644
--- a/src/platform/packages/shared/feedback-components/src/components/index.ts
+++ b/src/platform/packages/shared/feedback-components/src/components/index.ts
@@ -8,6 +8,7 @@
  */
 
 export { FeedbackTriggerButton } from './feedback_trigger_button';
+export { FeedbackContainer } from './feedback_container';
 
 export { FeedbackHeader } from './header';
 
@@ -21,5 +22,3 @@ export { FeedbackBody } from './body';
 
 export { SendFeedbackButton } from './footer';
 export { FeedbackFooter } from './footer';
-
-export { FeedbackContainer } from './feedback_container';
diff --git a/src/platform/packages/shared/feedback-components/src/index.ts b/src/platform/packages/shared/feedback-components/src/index.ts
index bf636c3e0aa9d..f2d26fbf09cce 100644
--- a/src/platform/packages/shared/feedback-components/src/index.ts
+++ b/src/platform/packages/shared/feedback-components/src/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { FeedbackTriggerButton } from './components';
+export { FeedbackTriggerButton, FeedbackContainer } from './components';
diff --git a/x-pack/platform/plugins/private/feedback/public/plugin.tsx b/x-pack/platform/plugins/private/feedback/public/plugin.tsx
index d644350c8f482..4a7e7a3c8cb33 100644
--- a/x-pack/platform/plugins/private/feedback/public/plugin.tsx
+++ b/x-pack/platform/plugins/private/feedback/public/plugin.tsx
@@ -6,12 +6,17 @@
  */
 
 import React, { lazy, Suspense } from 'react';
+import { EuiModal } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
 import type { CloudSetup, CloudStart } from '@kbn/cloud-plugin/public';
 import type { TelemetryPluginStart } from '@kbn/telemetry-plugin/public';
 import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import type { FeedbackRegistryEntry } from '@kbn/feedback-registry';
 import { getFeedbackQuestionsForApp } from '@kbn/feedback-registry';
+import { isNextChrome } from '@kbn/core-chrome-feature-flags';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { i18n } from '@kbn/i18n';
 import type { FeedbackFormData } from '../common';
 import { getAppDetails } from './src/utils';
 
@@ -31,6 +36,12 @@ const LazyFeedbackTriggerButton = lazy(() =>
   }))
 );
 
+const LazyFeedbackContainer = lazy(() =>
+  import('@kbn/feedback-components').then(({ FeedbackContainer }) => ({
+    default: FeedbackContainer,
+  }))
+);
+
 export class FeedbackPlugin implements Plugin {
   private organizationId?: string;
 
@@ -102,6 +113,40 @@ export class FeedbackPlugin implements Plugin {
       }
     };
 
+    if (isNextChrome(core.featureFlags)) {
+      const modalCss = css`
+        overflow-y: auto;
+      `;
+
+      core.chrome.registerFeedbackHandler(() => {
+        const modal = core.overlays.openModal(
+          toMountPoint(
+            core.rendering.addContext(
+              <EuiModal
+                onClose={() => modal.close()}
+                aria-label={i18n.translate('feedback.modal.ariaLabel', {
+                  defaultMessage: 'Feedback form',
+                })}
+                css={modalCss}
+              >
+                <Suspense fallback={null}>
+                  <LazyFeedbackContainer
+                    getQuestions={getQuestions}
+                    getAppDetails={getAppDetailsWrapper}
+                    getCurrentUserEmail={getCurrentUserEmail}
+                    sendFeedback={sendFeedback}
+                    showToast={showToast}
+                    hideFeedbackContainer={() => modal.close()}
+                  />
+                </Suspense>
+              </EuiModal>
+            ),
+            core
+          )
+        );
+      });
+    }
+
     core.chrome.navControls.registerRight({
       order: 1001,
       content: (

From 1d7c31eefe9dc80093df3ef5b5ea397670b94360 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Fri, 17 Apr 2026 14:29:04 +0200
Subject: [PATCH 37/77] Lint fix

---
 .../packages/chrome/browser-mocks/src/chrome_service.mock.ts | 2 ++
 x-pack/platform/plugins/private/feedback/tsconfig.json       | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 2cf8b3f5cdda7..aa3bf32d29f9d 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -169,6 +169,8 @@ const createStartContractMock = () => {
     setAppMenu: jest.fn(),
     setBreadcrumbsBadges: jest.fn(),
     getBreadcrumbsBadges$: jest.fn().mockReturnValue(new BehaviorSubject([])),
+    getFeedbackHandler$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
+    registerFeedbackHandler: jest.fn().mockReturnValue(() => {}),
   });
 
   return startContract;
diff --git a/x-pack/platform/plugins/private/feedback/tsconfig.json b/x-pack/platform/plugins/private/feedback/tsconfig.json
index 0ea91773321e9..46fbe0173d20b 100644
--- a/x-pack/platform/plugins/private/feedback/tsconfig.json
+++ b/x-pack/platform/plugins/private/feedback/tsconfig.json
@@ -16,7 +16,10 @@
     "@kbn/config-schema",
     "@kbn/feedback-registry",
     "@kbn/feedback-components",
-    "@kbn/core-http-router-server-mocks"
+    "@kbn/core-http-router-server-mocks",
+    "@kbn/core-chrome-feature-flags",
+    "@kbn/react-kibana-mount",
+    "@kbn/i18n"
   ],
   "exclude": [
     "target/**/*",

From bbb89109cd49e624755804df961314bf0bdecae2 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Tue, 21 Apr 2026 23:54:07 +0200
Subject: [PATCH 38/77] Moon regenerate

---
 .../context-switcher-components/moon.yml      | 36 +++++++++++++++++++
 .../plugins/private/feedback/moon.yml         |  3 ++
 2 files changed, 39 insertions(+)
 create mode 100644 src/platform/packages/shared/context-switcher-components/moon.yml

diff --git a/src/platform/packages/shared/context-switcher-components/moon.yml b/src/platform/packages/shared/context-switcher-components/moon.yml
new file mode 100644
index 0000000000000..4e29930dd8890
--- /dev/null
+++ b/src/platform/packages/shared/context-switcher-components/moon.yml
@@ -0,0 +1,36 @@
+# This file is generated by the @kbn/moon package. Any manual edits will be erased!
+#  To extend this, write your extensions/overrides to 'moon.extend.yml'
+#  then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/context-switcher-components'
+
+$schema: https://moonrepo.dev/schemas/project.json
+id: '@kbn/context-switcher-components'
+layer: unknown
+owners:
+  defaultOwner: '@elastic/appex-sharedux'
+toolchains:
+  default: node
+language: typescript
+project:
+  title: '@kbn/context-switcher-components'
+  description: Moon project for @kbn/context-switcher-components
+  channel: ''
+  owner: '@elastic/appex-sharedux'
+  sourceRoot: src/platform/packages/shared/context-switcher-components
+dependsOn:
+  - '@kbn/i18n'
+  - '@kbn/i18n-react'
+tags:
+  - shared-browser
+  - package
+  - prod
+  - group-platform
+  - shared
+  - jest-unit-tests
+fileGroups:
+  src:
+    - '**/*.ts'
+    - '**/*.tsx'
+    - '!target/**/*'
+  jest-config:
+    - jest.config.js
+tasks: {}
diff --git a/x-pack/platform/plugins/private/feedback/moon.yml b/x-pack/platform/plugins/private/feedback/moon.yml
index 8f6fbca1ca480..ff122366fb8a2 100644
--- a/x-pack/platform/plugins/private/feedback/moon.yml
+++ b/x-pack/platform/plugins/private/feedback/moon.yml
@@ -25,6 +25,9 @@ dependsOn:
   - '@kbn/feedback-registry'
   - '@kbn/feedback-components'
   - '@kbn/core-http-router-server-mocks'
+  - '@kbn/core-chrome-feature-flags'
+  - '@kbn/react-kibana-mount'
+  - '@kbn/i18n'
 tags:
   - plugin
   - prod

From be788ec5b86c5206b21ea9e9b15d19f130f8e809 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Wed, 22 Apr 2026 15:05:00 +0200
Subject: [PATCH 39/77] [DoNotReview/FeatureBranch] [Chrome Next] Add cloud
 toggle (#265008)

## Summary

This PR adds a toggle for developer toolbar to toggle whether we're in
cloud environment, while in dev mode.


https://github.com/user-attachments/assets/3c80b081-f9cf-4199-adc0-0cb0c1a2e10f

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../src/components/developer_toolbar.tsx      |  7 +++
 .../src/components/settings_modal.tsx         |  7 +++
 .../src/state/developer_toolbar_state.tsx     |  7 ++-
 .../cloud/cloud_environment_toggle.tsx        | 59 +++++++++++++++++++
 .../maybe_add_cloud_links.ts                  | 10 +++-
 .../cloud_links/public/plugin.tsx             |  3 +
 .../plugins/shared/cloud/public/plugin.tsx    | 31 +++++++++-
 7 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 src/platform/packages/shared/kbn-developer-toolbar/src/toolbar_items/cloud/cloud_environment_toggle.tsx

diff --git a/src/platform/packages/shared/kbn-developer-toolbar/src/components/developer_toolbar.tsx b/src/platform/packages/shared/kbn-developer-toolbar/src/components/developer_toolbar.tsx
index 5f20eef57b716..4269873edcf6b 100644
--- a/src/platform/packages/shared/kbn-developer-toolbar/src/components/developer_toolbar.tsx
+++ b/src/platform/packages/shared/kbn-developer-toolbar/src/components/developer_toolbar.tsx
@@ -37,6 +37,7 @@ import {
   EnvironmentIndicator,
   type EnvironmentInfo,
 } from '../toolbar_items/environment/environment_indicator';
+import { CloudEnvironmentToggle } from '../toolbar_items/cloud/cloud_environment_toggle';
 import { useMinimized } from '../hooks/use_minimized';
 import { SettingsModal } from './settings_modal';
 import { useToolbarState } from '../hooks/use_toolbar_state';
@@ -346,6 +347,12 @@ const DeveloperToolbarInternal: React.FC<DeveloperToolbarProps> = ({ envInfo, on
                   <MemoryUsageIndicator />
                 </EuiFlexItem>
               )}
+
+              {state.isEnabled('cloudEnvironment') && (
+                <EuiFlexItem grow={false}>
+                  <CloudEnvironmentToggle />
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
           </EuiFlexItem>
 
diff --git a/src/platform/packages/shared/kbn-developer-toolbar/src/components/settings_modal.tsx b/src/platform/packages/shared/kbn-developer-toolbar/src/components/settings_modal.tsx
index ef1e76c25bb4c..9bbc10d29a8d1 100644
--- a/src/platform/packages/shared/kbn-developer-toolbar/src/components/settings_modal.tsx
+++ b/src/platform/packages/shared/kbn-developer-toolbar/src/components/settings_modal.tsx
@@ -79,6 +79,13 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose })
         />
         <EuiSpacer size="s" />
 
+        <EuiSwitch
+          label="Cloud Environment Toggle"
+          checked={isEnabled('cloudEnvironment')}
+          onChange={() => toggleItemEnabled('cloudEnvironment')}
+        />
+        <EuiSpacer size="s" />
+
         {items.length > 0 && (
           <>
             {items.map((item) => {
diff --git a/src/platform/packages/shared/kbn-developer-toolbar/src/state/developer_toolbar_state.tsx b/src/platform/packages/shared/kbn-developer-toolbar/src/state/developer_toolbar_state.tsx
index 9280cebfd9691..496bfc754d674 100644
--- a/src/platform/packages/shared/kbn-developer-toolbar/src/state/developer_toolbar_state.tsx
+++ b/src/platform/packages/shared/kbn-developer-toolbar/src/state/developer_toolbar_state.tsx
@@ -17,7 +17,12 @@ export interface DeveloperToolbarItem {
   priority?: number;
 }
 
-export type KnownItemIds = 'environmentInfo' | 'frameJank' | 'memoryMonitor' | 'errorsMonitor';
+export type KnownItemIds =
+  | 'environmentInfo'
+  | 'frameJank'
+  | 'memoryMonitor'
+  | 'errorsMonitor'
+  | 'cloudEnvironment';
 
 export type ItemId = KnownItemIds | string;
 
diff --git a/src/platform/packages/shared/kbn-developer-toolbar/src/toolbar_items/cloud/cloud_environment_toggle.tsx b/src/platform/packages/shared/kbn-developer-toolbar/src/toolbar_items/cloud/cloud_environment_toggle.tsx
new file mode 100644
index 0000000000000..f67ff1fc5ba3b
--- /dev/null
+++ b/src/platform/packages/shared/kbn-developer-toolbar/src/toolbar_items/cloud/cloud_environment_toggle.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback } from 'react';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const CLOUD_DEV_OVERRIDE_KEY = '__kibana_dev_cloud_enabled';
+
+const badgeStyles = css`
+  cursor: pointer;
+`;
+
+const isDevCloudOverrideActive = (): boolean => {
+  try {
+    return window.localStorage.getItem(CLOUD_DEV_OVERRIDE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
+export const CloudEnvironmentToggle: React.FC = () => {
+  const isActive = isDevCloudOverrideActive();
+
+  const toggle = useCallback(() => {
+    if (isActive) {
+      window.localStorage.removeItem(CLOUD_DEV_OVERRIDE_KEY);
+    } else {
+      window.localStorage.setItem(CLOUD_DEV_OVERRIDE_KEY, 'true');
+    }
+    window.location.reload();
+  }, [isActive]);
+
+  return (
+    <EuiToolTip
+      content={
+        isActive
+          ? 'Cloud environment active. Click to disable and reload.'
+          : 'Click to enable cloud environment and reload.'
+      }
+    >
+      <EuiBadge
+        css={badgeStyles}
+        color={isActive ? 'success' : 'default'}
+        iconType="cloud"
+        onClick={toggle}
+        onClickAriaLabel={isActive ? 'Disable cloud environment' : 'Enable cloud environment'}
+      >
+        {isActive ? 'Cloud: ON' : 'Cloud: OFF'}
+      </EuiBadge>
+    </EuiToolTip>
+  );
+};
diff --git a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
index 6925a4fca7959..49020477a7caa 100644
--- a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -15,12 +15,15 @@ import type { SharePluginStart } from '@kbn/share-plugin/public';
 import { createUserMenuLinks } from './user_menu_links';
 import { createHelpMenuLinks } from './help_menu_links';
 
+const CLOUD_DEV_OVERRIDE_KEY = '__kibana_dev_cloud_enabled';
+
 export interface MaybeAddCloudLinksDeps {
   core: CoreStart;
   security: SecurityPluginStart;
   cloud: CloudStart;
   share: SharePluginStart;
   isServerless: boolean;
+  isDev?: boolean;
 }
 
 export function maybeAddCloudLinks({
@@ -28,13 +31,18 @@ export function maybeAddCloudLinks({
   security,
   cloud,
   isServerless,
+  isDev,
 }: MaybeAddCloudLinksDeps): void {
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
-    filter((isElasticCloudUser) => isElasticCloudUser === true),
+    filter(
+      (isElasticCloudUser) =>
+        isElasticCloudUser === true ||
+        (isDev === true && window.localStorage.getItem(CLOUD_DEV_OVERRIDE_KEY) === 'true')
+    ),
     switchMap(() => {
       if (cloud.deploymentUrl) {
         core.chrome.setCustomNavLink({
diff --git a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/plugin.tsx b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/plugin.tsx
index e4c1f7904a3d1..68403c9c4f6d6 100755
--- a/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/plugin.tsx
+++ b/x-pack/platform/plugins/private/cloud_integrations/cloud_links/public/plugin.tsx
@@ -29,9 +29,11 @@ export class CloudLinksPlugin
   implements Plugin<void, void, CloudLinksDepsSetup, CloudLinksDepsStart>
 {
   public offering: BuildFlavor;
+  private isDev: boolean;
 
   constructor(initializerContext: PluginInitializerContext) {
     this.offering = initializerContext.env.packageInfo.buildFlavor;
+    this.isDev = initializerContext.env.mode.dev;
   }
 
   public setup({ analytics }: CoreSetup) {
@@ -108,6 +110,7 @@ export class CloudLinksPlugin
           cloud,
           share,
           isServerless: this.offering === 'serverless',
+          isDev: this.isDev,
         });
       }
     }
diff --git a/x-pack/platform/plugins/shared/cloud/public/plugin.tsx b/x-pack/platform/plugins/shared/cloud/public/plugin.tsx
index 749378ff5c5a1..66e8028e72648 100644
--- a/x-pack/platform/plugins/shared/cloud/public/plugin.tsx
+++ b/x-pack/platform/plugins/shared/cloud/public/plugin.tsx
@@ -53,8 +53,17 @@ export interface CloudConfigType {
   };
 }
 
+export const CLOUD_DEV_OVERRIDE_KEY = '__kibana_dev_cloud_enabled';
+
+const DEV_CLOUD_DEFAULTS: Partial<CloudConfigType> = {
+  id: 'ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=',
+  deployment_url: 'https://cloud.elastic.co/deployments/your-deployment-id',
+  deployments_url: 'https://cloud.elastic.co/deployments',
+  base_url: 'https://cloud.elastic.co',
+};
+
 export class CloudPlugin implements Plugin<CloudSetup, CloudStart> {
-  private readonly config: CloudConfigType;
+  private config: CloudConfigType;
   private readonly isCloudEnabled: boolean;
   private readonly isServerlessEnabled: boolean;
   private readonly contextProviders: Array<FC<PropsWithChildren<unknown>>> = [];
@@ -64,6 +73,26 @@ export class CloudPlugin implements Plugin<CloudSetup, CloudStart> {
 
   constructor(private readonly initializerContext: PluginInitializerContext) {
     this.config = this.initializerContext.config.get<CloudConfigType>();
+
+    // In dev mode, allow overriding cloud via localStorage for local testing.
+    const isDev = initializerContext.env.mode.dev;
+    if (isDev && typeof window !== 'undefined') {
+      try {
+        const devOverride = window.localStorage.getItem(CLOUD_DEV_OVERRIDE_KEY);
+        if (devOverride === 'true' && !this.config.id) {
+          const trialEndDate = new Date();
+          trialEndDate.setFullYear(trialEndDate.getFullYear() + 1);
+          this.config = {
+            ...this.config,
+            ...DEV_CLOUD_DEFAULTS,
+            trial_end_date: trialEndDate.toISOString(),
+          };
+        }
+      } catch {
+        // localStorage may be unavailable
+      }
+    }
+
     this.isCloudEnabled = getIsCloudEnabled(this.config.id);
     this.isServerlessEnabled = !!this.config.serverless?.project_id;
     this.logger = initializerContext.logger.get();

From efce191f544652900c2f37ca9d206e535bcd70e8 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Thu, 23 Apr 2026 11:58:56 +0200
Subject: [PATCH 40/77] [DoNotReview/FeatureBranch] [Chrome Next] Update help
 menu (#264838)

## Summary

This PR updates the help menu design and functionality to match
Vibranium requirements.

Closes: https://github.com/elastic/kibana/issues/262475
---
 .../src/shared/header_help_menu.test.tsx      |   4 +-
 .../src/shared/header_help_menu.tsx           | 113 +-----------
 .../src/shared/help_links_hooks.ts            |  52 ------
 .../src/shared/help_links_hooks.tsx           | 167 +++++++++++++++++
 .../src/shared/help_menu_links.ts             | 115 ++++++++++--
 .../browser-internal/src/chrome_api.tsx       |  10 +-
 .../src/state/chrome_state.ts                 |   9 +
 .../browser-mocks/src/chrome_service.mock.ts  |   2 +
 .../packages/chrome/browser/src/contracts.ts  |  13 ++
 .../chrome/browser/src/help_extension.ts      |  11 +-
 .../public/components/flyout_list.tsx         | 173 +++++++++++-------
 .../components/newsfeed_header_nav_button.tsx |   1 +
 .../plugins/shared/newsfeed/public/plugin.tsx |   4 +
 .../public/register_newsfeed_handler.tsx      |  53 ++++++
 14 files changed, 481 insertions(+), 246 deletions(-)
 delete mode 100644 src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx
 create mode 100644 src/platform/plugins/shared/newsfeed/public/register_newsfeed_handler.tsx

diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.test.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.test.tsx
index e8611ebf54706..f1dfac853b1cf 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.test.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.test.tsx
@@ -38,9 +38,9 @@ describe('HeaderHelpMenu', () => {
   it('should only render the default content', async () => {
     await renderAndOpenMenu();
 
+    expect(screen.getByText('Ask support')).toBeInTheDocument();
+    expect(screen.getByText('Open GitHub issue')).toBeInTheDocument();
     expect(screen.getByText('Kibana documentation')).toBeInTheDocument();
-    expect(screen.getByText('Ask Elastic')).toBeInTheDocument();
-    expect(screen.getByText('Open an issue in GitHub')).toBeInTheDocument();
   });
 
   it('should not render the version details when serverless', () => {
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
index 7ec84e2715a2e..ff1a8597b4013 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_help_menu.tsx
@@ -7,76 +7,19 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { MouseEvent } from 'react';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
 import {
   EuiContextMenu,
-  EuiContextMenuItem,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHeaderSectionItemButton,
   EuiIcon,
   EuiPopover,
-  useEuiTheme,
 } from '@elastic/eui';
 import { useIsServerless, useKibanaVersion } from '@kbn/react-env';
-import { css } from '@emotion/react';
-import { isModifiedOrPrevented } from './nav_link';
-import { useNavigateToUrl } from './chrome_hooks';
-import { useHelpLinks } from './help_links_hooks';
-import type { HelpMenuLinkItem } from './help_menu_links';
-
-type ItemClickHandler = (opts: {
-  onClick?: () => void;
-  href?: string;
-  isExternal?: boolean;
-}) => (e: MouseEvent) => void;
-
-const createItemClickHandler =
-  ({
-    closeMenu,
-    navigateToUrl,
-  }: {
-    closeMenu: () => void;
-    navigateToUrl: (url: string) => void;
-  }): ItemClickHandler =>
-  ({ onClick, href, isExternal }) =>
-  (e: MouseEvent) => {
-    if (onClick) {
-      e.preventDefault();
-      onClick();
-    } else if (
-      href &&
-      !isExternal &&
-      !isModifiedOrPrevented(e as MouseEvent<HTMLElement>) &&
-      e.button === 0
-    ) {
-      e.preventDefault();
-      navigateToUrl(href);
-    }
-    closeMenu();
-  };
-
-const createMenuItem = (
-  options: HelpMenuLinkItem,
-  onItemClick: ItemClickHandler
-): EuiContextMenuPanelItemDescriptor => ({
-  name: options.name,
-  key: options.key,
-  icon: options.icon,
-  'data-test-subj': options.dataTestSubj,
-  ...(options.href ? { href: options.href } : {}),
-  target: options.target,
-  rel: options.rel,
-  onClick: onItemClick({
-    onClick: options.onClick,
-    href: options.href,
-    isExternal: options.isExternal,
-  }),
-});
+import { useHelpMenuItems } from './help_links_hooks';
 
 interface HeaderHelpMenuProps {
   renderButton?: (props: {
@@ -86,64 +29,14 @@ interface HeaderHelpMenuProps {
 }
 
 export const HeaderHelpMenu = ({ renderButton }: HeaderHelpMenuProps = {}) => {
-  const navigateToUrl = useNavigateToUrl();
-  const { euiTheme } = useEuiTheme();
   const [isOpen, setIsOpen] = useState(false);
   const isServerless = useIsServerless();
   const kibanaVersion = useKibanaVersion();
 
-  const appNameStyle = useMemo(
-    () => css`
-      font-weight: ${euiTheme.font.weight.bold};
-    `,
-    [euiTheme.font.weight.bold]
-  );
-
-  const {
-    global: globalHelpLinks = [],
-    default: defaultContentLinks = [],
-    extension: helpExtensionLinks,
-  } = useHelpLinks();
-
   const closeMenu = useCallback(() => setIsOpen(false), []);
   const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
 
-  const handleItemClick = useMemo(
-    () => createItemClickHandler({ closeMenu, navigateToUrl }),
-    [closeMenu, navigateToUrl]
-  );
-
-  const items = useMemo(() => {
-    const menuItems: EuiContextMenuPanelItemDescriptor[] = [];
-
-    // Global extension links (e.g. cloud data migration)
-    globalHelpLinks.forEach((link) => {
-      menuItems.push(createMenuItem(link, handleItemClick));
-    });
-
-    // Default links (Kibana docs, Ask Elastic, GitHub)
-    defaultContentLinks.forEach((link) => {
-      menuItems.push(createMenuItem(link, handleItemClick));
-    });
-
-    // App-specific extension links
-    if (helpExtensionLinks) {
-      menuItems.push({ isSeparator: true, key: 'extension-separator' });
-
-      menuItems.push({
-        renderItem: () => (
-          <EuiContextMenuItem css={appNameStyle}>{helpExtensionLinks?.label}</EuiContextMenuItem>
-        ),
-        key: 'extension-title',
-      });
-
-      helpExtensionLinks.items?.forEach((link) => {
-        menuItems.push(createMenuItem(link, handleItemClick));
-      });
-    }
-
-    return menuItems;
-  }, [helpExtensionLinks, defaultContentLinks, globalHelpLinks, handleItemClick, appNameStyle]);
+  const items = useHelpMenuItems({ closeMenu });
 
   const button = renderButton ? (
     renderButton({ isOpen, toggleMenu })
diff --git a/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts
deleted file mode 100644
index 1661f8a94d2f9..0000000000000
--- a/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useMemo } from 'react';
-import type { Observable } from 'rxjs';
-import { combineLatest, distinctUntilChanged, map } from 'rxjs';
-import equal from 'fast-deep-equal';
-import { useObservable } from '@kbn/use-observable';
-import { useChromeService } from '@kbn/core-chrome-browser-context';
-import { useChromeStyle } from '@kbn/core-chrome-browser-hooks';
-import type { HelpLinks } from './help_menu_links';
-import { buildHelpLinks } from './help_menu_links';
-import { useChromeComponentsDeps } from '../context';
-
-/**
- * Returns an observable of pre-built help menu link groups for the given chrome style.
- * Used by both `HeaderHelpMenu` (via `useObservable`) and the project sidenav (via `combineLatest`).
- */
-export function useHelpLinks$(): Observable<HelpLinks> {
-  const chrome = useChromeService();
-  const chromeStyle = useChromeStyle();
-  const docLinks = useChromeComponentsDeps().docLinks;
-  return useMemo(
-    () =>
-      combineLatest([
-        chrome.getHelpMenuLinks$(),
-        chrome.getHelpExtension$(),
-        chrome.getHelpSupportUrl$(),
-        chrome.getGlobalHelpExtensionMenuLinks$(),
-      ]).pipe(
-        map(([menuLinks, extension, supportUrl, globalExtensionMenuLinks]) =>
-          buildHelpLinks({
-            chromeStyle,
-            helpData: { menuLinks, extension, supportUrl, globalExtensionMenuLinks, docLinks },
-          })
-        ),
-        distinctUntilChanged(equal)
-      ),
-    [chrome, chromeStyle, docLinks]
-  );
-}
-
-export function useHelpLinks(): HelpLinks {
-  const helpLinks$ = useHelpLinks$();
-  return useObservable(helpLinks$, { global: [], default: [] });
-}
diff --git a/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx
new file mode 100644
index 0000000000000..900ea46eaa62c
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx
@@ -0,0 +1,167 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import type { Observable } from 'rxjs';
+import { combineLatest, distinctUntilChanged, map, of, switchMap } from 'rxjs';
+import equal from 'fast-deep-equal';
+import { EuiContextMenuItem, EuiIcon, useEuiTheme } from '@elastic/eui';
+import type { EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
+import { useObservable } from '@kbn/use-observable';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import { useChromeStyle } from '@kbn/core-chrome-browser-hooks';
+import { useIsServerless } from '@kbn/react-env';
+import { css } from '@emotion/react';
+import type { HelpLinks, HelpMenuLinkItem } from './help_menu_links';
+import { buildHelpLinks, toContextMenuItem } from './help_menu_links';
+import { useNavigateToUrl, useIsNextChrome } from './chrome_hooks';
+import { useChromeComponentsDeps } from '../context';
+
+/**
+ * Returns an observable of pre-built help menu link groups for the given chrome style.
+ * Used by both `HeaderHelpMenu` (via `useObservable`) and the project sidenav (via `combineLatest`).
+ */
+export function useHelpLinks$(): Observable<HelpLinks> {
+  const chrome = useChromeService();
+  const chromeStyle = useChromeStyle();
+  const docLinks = useChromeComponentsDeps().docLinks;
+  const isNextChrome = useIsNextChrome();
+  const isServerless = useIsServerless();
+  const isProjectAndNextChrome = chromeStyle === 'project' && isNextChrome;
+  const showNewsfeed = isProjectAndNextChrome && !isServerless;
+
+  return useMemo(
+    () =>
+      combineLatest([
+        chrome.getHelpMenuLinks$(),
+        chrome.getHelpExtension$(),
+        chrome.getHelpSupportUrl$(),
+        chrome.getGlobalHelpExtensionMenuLinks$(),
+        chrome.getFeedbackHandler$(),
+        chrome
+          .getNewsfeedHandler$()
+          .pipe(
+            switchMap((handler) =>
+              handler
+                ? handler.hasNew$.pipe(map((hasNew) => ({ open: handler.open, hasNew })))
+                : of(undefined)
+            )
+          ),
+      ]).pipe(
+        map(
+          ([
+            menuLinks,
+            extension,
+            supportUrl,
+            globalExtensionMenuLinks,
+            feedbackHandler,
+            newsfeedInfo,
+          ]) =>
+            buildHelpLinks({
+              chromeStyle,
+              helpData: {
+                menuLinks,
+                extension,
+                supportUrl,
+                globalExtensionMenuLinks,
+                docLinks,
+                feedbackHandler: isProjectAndNextChrome ? feedbackHandler : undefined,
+                newsfeedHandler: showNewsfeed ? newsfeedInfo?.open : undefined,
+                newsfeedHasNew: showNewsfeed ? newsfeedInfo?.hasNew : undefined,
+              },
+            })
+        ),
+        distinctUntilChanged(equal)
+      ),
+    [chrome, chromeStyle, docLinks, isProjectAndNextChrome, showNewsfeed]
+  );
+}
+
+export const useHelpMenuItems = ({
+  closeMenu,
+}: {
+  closeMenu: () => void;
+}): EuiContextMenuPanelItemDescriptor[] => {
+  const helpLinks$ = useHelpLinks$();
+  const helpLinks = useObservable(helpLinks$, { global: [], default: [] });
+  const navigateToUrl = useNavigateToUrl();
+  const { euiTheme } = useEuiTheme();
+
+  const stableNavigate = useCallback((url: string) => navigateToUrl(url), [navigateToUrl]);
+
+  const appNameStyle = useMemo(
+    () =>
+      css`
+        font-weight: ${euiTheme.font.weight.bold};
+      `,
+    [euiTheme.font.weight.bold]
+  );
+
+  const indicatorStyle = useMemo(
+    () =>
+      css`
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        pointer-events: none;
+        stroke: ${euiTheme.components.buttons.backgroundText};
+        stroke-width: 2px;
+        paint-order: stroke;
+      `,
+    [euiTheme.components.buttons.backgroundText]
+  );
+
+  return useMemo(() => {
+    const toIcon = (item: HelpMenuLinkItem): React.ReactElement | string | undefined => {
+      if (!item.icon) return undefined;
+      if (!item.hasNewIndicator) return item.icon as string;
+      return (
+        <span
+          css={css`
+            position: relative;
+            display: inline-flex;
+          `}
+        >
+          <EuiIcon type={item.icon} size="m" aria-hidden={true} />
+          <EuiIcon css={indicatorStyle} color="primary" type="dot" size="m" aria-hidden={true} />
+        </span>
+      );
+    };
+
+    const mapItems = (items: HelpLinks['global']) =>
+      items.map((item) => {
+        const menuItem = toContextMenuItem(item, stableNavigate, closeMenu);
+        const iconOverride = toIcon(item);
+        if (iconOverride !== undefined) {
+          menuItem.icon = iconOverride;
+        }
+        return menuItem;
+      });
+
+    const menuItems: EuiContextMenuPanelItemDescriptor[] = [
+      ...mapItems(helpLinks.global),
+      ...mapItems(helpLinks.default),
+    ];
+
+    if (helpLinks.extension) {
+      menuItems.push({ isSeparator: true, key: 'extension-separator' });
+
+      menuItems.push({
+        renderItem: () => (
+          <EuiContextMenuItem css={appNameStyle}>{helpLinks.extension?.label}</EuiContextMenuItem>
+        ),
+        key: 'extension-title',
+      } as EuiContextMenuPanelItemDescriptor);
+
+      menuItems.push(...mapItems(helpLinks.extension.items));
+    }
+
+    return menuItems;
+  }, [helpLinks, stableNavigate, closeMenu, appNameStyle, indicatorStyle]);
+};
diff --git a/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts b/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts
index 75bf46968f445..5798a5c06b357 100644
--- a/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/help_menu_links.ts
@@ -14,8 +14,10 @@ import type {
   ChromeStyle,
 } from '@kbn/core-chrome-browser';
 import type { DocLinksStart } from '@kbn/core-doc-links-browser';
-import type { IconType } from '@elastic/eui';
+import type { EuiContextMenuPanelItemDescriptor, IconType } from '@elastic/eui';
+import type React from 'react';
 import { i18n } from '@kbn/i18n';
+import { isModifiedOrPrevented } from './nav_link';
 
 interface HelpData {
   menuLinks: ChromeHelpMenuLink[];
@@ -23,6 +25,9 @@ interface HelpData {
   supportUrl: string;
   globalExtensionMenuLinks: ChromeGlobalHelpExtensionMenuLink[];
   docLinks: DocLinksStart;
+  feedbackHandler?: () => void;
+  newsfeedHandler?: () => void;
+  newsfeedHasNew?: boolean;
 }
 
 export interface HelpMenuLinkItem {
@@ -34,6 +39,7 @@ export interface HelpMenuLinkItem {
   rel?: string;
   onClick?: () => void;
   isExternal?: boolean;
+  hasNewIndicator?: boolean;
   dataTestSubj?: string;
 }
 
@@ -46,35 +52,110 @@ export interface HelpLinks {
   };
 }
 
+export const toContextMenuItem = (
+  options: HelpMenuLinkItem,
+  navigateToUrl: (url: string) => Promise<void> | void,
+  closeMenu: () => void
+): EuiContextMenuPanelItemDescriptor =>
+  ({
+    name: options.name,
+    key: options.key,
+    icon: options.icon,
+    'data-test-subj': options.dataTestSubj,
+    ...(options.href
+      ? {
+          href: options.href,
+          target: options.target,
+          rel: options.rel,
+        }
+      : {}),
+    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      const isUnmodifiedPrimaryClick = !isModifiedOrPrevented(event) && event.button === 0;
+
+      if (!isModifiedOrPrevented(event)) {
+        options.onClick?.();
+      }
+
+      if (options.href && !options.isExternal && isUnmodifiedPrimaryClick) {
+        event.preventDefault();
+        closeMenu();
+        navigateToUrl(options.href);
+        return;
+      }
+
+      if (isUnmodifiedPrimaryClick) {
+        closeMenu();
+      }
+    },
+  } as EuiContextMenuPanelItemDescriptor);
+
+const buildNewsfeedLink = (newsfeedHandler?: () => void): ChromeHelpMenuLink[] =>
+  newsfeedHandler
+    ? [
+        {
+          title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuWhatsNewTitle', {
+            defaultMessage: "What's new?",
+          }),
+          iconType: 'cheer',
+          onClick: newsfeedHandler,
+          dataTestSubj: 'helpMenuWhatsNewButton',
+        },
+      ]
+    : [];
+
+const buildFeedbackLink = (feedbackHandler?: () => void): ChromeHelpMenuLink[] =>
+  feedbackHandler
+    ? [
+        {
+          title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuGiveFeedbackTitle', {
+            defaultMessage: 'Give feedback',
+          }),
+          iconType: 'comment',
+          onClick: feedbackHandler,
+          dataTestSubj: 'helpMenuGiveFeedbackButton',
+        },
+      ]
+    : [];
+
 export const buildDefaultContentLinks = ({
   chromeStyle,
   docLinks,
   helpSupportUrl,
+  feedbackHandler,
+  newsfeedHandler,
 }: {
   chromeStyle: ChromeStyle;
   docLinks: DocLinksStart;
   helpSupportUrl: string;
+  feedbackHandler?: () => void;
+  newsfeedHandler?: () => void;
+  newsfeedHasNew?: boolean;
 }): ChromeHelpMenuLink[] => [
+  ...buildNewsfeedLink(newsfeedHandler),
   {
-    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuKibanaDocumentationTitle', {
-      defaultMessage: 'Kibana documentation',
+    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuOpenGitHubIssueTitle', {
+      defaultMessage: 'Open GitHub issue',
     }),
-    href:
-      chromeStyle === 'project'
-        ? docLinks.links.elasticStackGetStarted
-        : docLinks.links.kibana.guide,
+    href: docLinks.links.kibana.createGithubIssue,
+    iconType: 'logoGithub',
   },
   {
     title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuAskElasticTitle', {
-      defaultMessage: 'Ask Elastic',
+      defaultMessage: 'Ask support',
     }),
     href: helpSupportUrl,
+    iconType: 'question',
   },
+  ...buildFeedbackLink(feedbackHandler),
   {
-    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuOpenGitHubIssueTitle', {
-      defaultMessage: 'Open an issue in GitHub',
+    title: i18n.translate('core.ui.chrome.headerGlobalNav.helpMenuKibanaDocumentationTitle', {
+      defaultMessage: 'Kibana documentation',
     }),
-    href: docLinks.links.kibana.createGithubIssue,
+    href:
+      chromeStyle === 'project'
+        ? docLinks.links.elasticStackGetStarted
+        : docLinks.links.kibana.guide,
+    iconType: 'documentation',
   },
 ];
 
@@ -100,11 +181,18 @@ export const buildHelpLinks = ({
 
   const rawDefaultLinks =
     helpData.menuLinks.length > 0
-      ? helpData.menuLinks
+      ? [
+          ...buildNewsfeedLink(helpData.newsfeedHandler),
+          ...helpData.menuLinks,
+          ...buildFeedbackLink(helpData.feedbackHandler),
+        ]
       : buildDefaultContentLinks({
           chromeStyle,
           docLinks: helpData.docLinks,
           helpSupportUrl: helpData.supportUrl,
+          feedbackHandler: helpData.feedbackHandler,
+          newsfeedHandler: helpData.newsfeedHandler,
+          newsfeedHasNew: helpData.newsfeedHasNew,
         });
 
   const defaultLinks = rawDefaultLinks.map(
@@ -116,6 +204,8 @@ export const buildHelpLinks = ({
       target: href ? '_blank' : undefined,
       onClick,
       isExternal: Boolean(href),
+      hasNewIndicator:
+        dataTestSubj === 'helpMenuWhatsNewButton' && helpData.newsfeedHasNew === true,
       dataTestSubj,
     })
   );
@@ -129,7 +219,6 @@ export const buildHelpLinks = ({
           })
         : link.content,
       key: `extension-${index}`,
-      icon: link.iconType,
       href: link.href,
       target: link.target ?? (isDocumentation ? '_blank' : undefined),
       rel: link.rel ?? (isDocumentation ? 'noopener' : undefined),
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 441ebca9533d8..df8fefa83c2c0 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { type ReactNode } from 'react';
-import { distinctUntilChanged, map, shareReplay } from 'rxjs';
+import { type Observable, distinctUntilChanged, map, shareReplay } from 'rxjs';
 import type { ChromeNextAiButton } from '@kbn/core-chrome-browser';
 import type { RecentlyAccessedService } from '@kbn/recently-accessed';
 import { SidebarServiceProvider } from '@kbn/core-chrome-sidebar-context';
@@ -214,6 +214,14 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
       };
     },
     getFeedbackHandler$: () => state.feedbackHandler.$,
+
+    registerNewsfeedHandler: (handler: { open: () => void; hasNew$: Observable<boolean> }) => {
+      state.newsfeedHandler.set(handler);
+      return () => {
+        state.newsfeedHandler.update((current) => (current === handler ? undefined : current));
+      };
+    },
+    getNewsfeedHandler$: () => state.newsfeedHandler.$,
   };
 
   return chromeStart;
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 925491b962f03..e9040390b0088 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -81,6 +81,9 @@ export interface ChromeState {
 
   /** Feedback handler registered by the feedback plugin */
   feedbackHandler: State<(() => void) | undefined>;
+
+  /** Newsfeed handler registered by the newsfeed plugin */
+  newsfeedHandler: State<{ open: () => void; hasNew$: Observable<boolean> } | undefined>;
 }
 
 export interface ChromeStateDeps {
@@ -131,6 +134,11 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   // Feedback
   const feedbackHandler = createState<(() => void) | undefined>(undefined);
 
+  // Newsfeed
+  const newsfeedHandler = createState<
+    { open: () => void; hasNew$: Observable<boolean> } | undefined
+  >(undefined);
+
   return {
     visibility,
     style,
@@ -159,5 +167,6 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
       globalMenuLinks: globalHelpMenuLinks,
     },
     feedbackHandler,
+    newsfeedHandler,
   };
 }
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index aa3bf32d29f9d..a7252a8cf84fa 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -171,6 +171,8 @@ const createStartContractMock = () => {
     getBreadcrumbsBadges$: jest.fn().mockReturnValue(new BehaviorSubject([])),
     getFeedbackHandler$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
     registerFeedbackHandler: jest.fn().mockReturnValue(() => {}),
+    getNewsfeedHandler$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
+    registerNewsfeedHandler: jest.fn().mockReturnValue(() => {}),
   });
 
   return startContract;
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 5028688f6ebc0..09ba63537ae09 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -338,6 +338,19 @@ export interface ChromeStart {
    */
   getFeedbackHandler$(): Observable<(() => void) | undefined>;
 
+  /**
+   * Register a handler that opens the newsfeed UI.
+   * Called by the newsfeed plugin during `start`.
+   *
+   * @returns A function to unregister the handler.
+   */
+  registerNewsfeedHandler(handler: { open: () => void; hasNew$: Observable<boolean> }): () => void;
+
+  /**
+   * Get an observable of the currently registered newsfeed handler, or `undefined` if none.
+   */
+  getNewsfeedHandler$(): Observable<{ open: () => void; hasNew$: Observable<boolean> } | undefined>;
+
   /**
    * Used only by the rendering service and KibanaRenderingContextProvider to wrap the rendering tree in the Chrome context providers
    */
diff --git a/src/core/packages/chrome/browser/src/help_extension.ts b/src/core/packages/chrome/browser/src/help_extension.ts
index 24e3f1feab7a1..163b81332cd97 100644
--- a/src/core/packages/chrome/browser/src/help_extension.ts
+++ b/src/core/packages/chrome/browser/src/help_extension.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { EuiButtonEmptyProps } from '@elastic/eui';
+import type { EuiButtonEmptyProps, IconType } from '@elastic/eui';
 
 /** @public */
 export interface ChromeHelpExtension {
@@ -24,8 +24,13 @@ export interface ChromeHelpExtension {
 /** @public */
 export type ChromeHelpExtensionLinkBase = Pick<
   EuiButtonEmptyProps,
-  'iconType' | 'target' | 'rel' | 'data-test-subj'
->;
+  'target' | 'rel' | 'data-test-subj'
+> & {
+  /**
+   * @deprecated Extension items don't support icons. This property will be removed in a future release.
+   */
+  iconType?: IconType;
+};
 
 /** @public */
 export interface ChromeHelpExtensionMenuDocumentationLink extends ChromeHelpExtensionLinkBase {
diff --git a/src/platform/plugins/shared/newsfeed/public/components/flyout_list.tsx b/src/platform/plugins/shared/newsfeed/public/components/flyout_list.tsx
index 90b411aeb9a61..a67a19fd0b955 100644
--- a/src/platform/plugins/shared/newsfeed/public/components/flyout_list.tsx
+++ b/src/platform/plugins/shared/newsfeed/public/components/flyout_list.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import type { EuiFlyoutProps } from '@elastic/eui';
 import {
   EuiFlyout,
@@ -26,16 +26,112 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { NewsfeedContext } from './newsfeed_header_nav_button';
-import type { NewsfeedItem } from '../types';
+import type { NewsfeedItem, FetchResult } from '../types';
+import type { NewsfeedApi } from '../lib/api';
 import { NewsEmptyPrompt } from './empty_news';
 import { NewsLoadingPrompt } from './loading_news';
 
+export interface NewsfeedContainerProps {
+  newsfeedApi: NewsfeedApi;
+  onClose: () => void;
+  showPlainSpinner: boolean;
+  isServerless: boolean;
+  newsFetchResult?: FetchResult | null | void;
+}
+
+export const NewsfeedContainer = ({
+  newsfeedApi,
+  onClose,
+  showPlainSpinner,
+  isServerless,
+  newsFetchResult: externalFetchResult,
+}: NewsfeedContainerProps) => {
+  const [internalFetchResult, setInternalFetchResult] = useState<FetchResult | null | void>(null);
+
+  useEffect(() => {
+    if (externalFetchResult !== undefined) return;
+    const subscription = newsfeedApi.fetchResults$.subscribe((results) => {
+      setInternalFetchResult(results);
+    });
+    return () => subscription.unsubscribe();
+  }, [newsfeedApi, externalFetchResult]);
+
+  const newsFetchResult =
+    externalFetchResult !== undefined ? externalFetchResult : internalFetchResult;
+
+  return (
+    <>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="s">
+          <h2 id="flyoutSmallTitle">
+            <FormattedMessage
+              id="newsfeed.flyoutList.whatsNewTitle"
+              defaultMessage="What's new at Elastic"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
+        {!newsFetchResult ? (
+          <NewsLoadingPrompt showPlainSpinner={showPlainSpinner} />
+        ) : newsFetchResult.feedItems.length > 0 ? (
+          newsFetchResult.feedItems.map((item: NewsfeedItem) => {
+            return (
+              <EuiHeaderAlert
+                key={item.hash}
+                title={item.title}
+                text={item.description}
+                data-test-subj="newsHeadAlert"
+                action={
+                  <EuiLink target="_blank" href={item.linkUrl} external>
+                    {item.linkText}
+                  </EuiLink>
+                }
+                date={item.publishOn.format('DD MMMM YYYY')}
+                badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
+              />
+            );
+          })
+        ) : (
+          <NewsEmptyPrompt />
+        )}
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+              <FormattedMessage id="newsfeed.flyoutList.closeButtonLabel" defaultMessage="Close" />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            {newsFetchResult && !isServerless ? (
+              <EuiText color="subdued" size="s">
+                <p>
+                  <FormattedMessage
+                    id="newsfeed.flyoutList.versionTextLabel"
+                    defaultMessage="{version}"
+                    values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
+                  />
+                </p>
+              </EuiText>
+            ) : null}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </>
+  );
+};
+
 export const NewsfeedFlyout = (
-  props: Partial<EuiFlyoutProps> & { showPlainSpinner: boolean; isServerless: boolean }
+  props: Partial<EuiFlyoutProps> & {
+    newsfeedApi: NewsfeedApi;
+    showPlainSpinner: boolean;
+    isServerless: boolean;
+  }
 ) => {
-  const { newsFetchResult, setFlyoutVisible } = useContext(NewsfeedContext);
+  const { setFlyoutVisible, newsFetchResult } = useContext(NewsfeedContext);
   const closeFlyout = useCallback(() => setFlyoutVisible(false), [setFlyoutVisible]);
-  const { showPlainSpinner, isServerless, ...rest } = props;
+  const { showPlainSpinner, isServerless, newsfeedApi, ...rest } = props;
   return (
     <EuiPortal>
       <EuiFlyout
@@ -47,66 +143,13 @@ export const NewsfeedFlyout = (
         data-test-subj="NewsfeedFlyout"
         session="start"
       >
-        <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="s">
-            <h2 id="flyoutSmallTitle">
-              <FormattedMessage
-                id="newsfeed.flyoutList.whatsNewTitle"
-                defaultMessage="What's new at Elastic"
-              />
-            </h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
-          {!newsFetchResult ? (
-            <NewsLoadingPrompt showPlainSpinner={props.showPlainSpinner} />
-          ) : newsFetchResult.feedItems.length > 0 ? (
-            newsFetchResult.feedItems.map((item: NewsfeedItem) => {
-              return (
-                <EuiHeaderAlert
-                  key={item.hash}
-                  title={item.title}
-                  text={item.description}
-                  data-test-subj="newsHeadAlert"
-                  action={
-                    <EuiLink target="_blank" href={item.linkUrl} external>
-                      {item.linkText}
-                    </EuiLink>
-                  }
-                  date={item.publishOn.format('DD MMMM YYYY')}
-                  badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
-                />
-              );
-            })
-          ) : (
-            <NewsEmptyPrompt />
-          )}
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-                <FormattedMessage
-                  id="newsfeed.flyoutList.closeButtonLabel"
-                  defaultMessage="Close"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              {newsFetchResult && !isServerless ? (
-                <EuiText color="subdued" size="s">
-                  <p>
-                    <FormattedMessage
-                      id="newsfeed.flyoutList.versionTextLabel"
-                      defaultMessage="{version}"
-                      values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
-                    />
-                  </p>
-                </EuiText>
-              ) : null}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
+        <NewsfeedContainer
+          newsfeedApi={newsfeedApi}
+          onClose={closeFlyout}
+          showPlainSpinner={showPlainSpinner}
+          isServerless={isServerless}
+          newsFetchResult={newsFetchResult}
+        />
       </EuiFlyout>
     </EuiPortal>
   );
diff --git a/src/platform/plugins/shared/newsfeed/public/components/newsfeed_header_nav_button.tsx b/src/platform/plugins/shared/newsfeed/public/components/newsfeed_header_nav_button.tsx
index b15727c8dbb49..013e90f4f94b6 100644
--- a/src/platform/plugins/shared/newsfeed/public/components/newsfeed_header_nav_button.tsx
+++ b/src/platform/plugins/shared/newsfeed/public/components/newsfeed_header_nav_button.tsx
@@ -79,6 +79,7 @@ export const NewsfeedNavButton = ({ newsfeedApi, hasCustomBranding$, isServerles
         </EuiHeaderSectionItemButton>
         {flyoutVisible ? (
           <NewsfeedFlyout
+            newsfeedApi={newsfeedApi}
             isServerless={isServerless}
             focusTrapProps={{ shards: [buttonRef] }}
             showPlainSpinner={hasCustomBranding}
diff --git a/src/platform/plugins/shared/newsfeed/public/plugin.tsx b/src/platform/plugins/shared/newsfeed/public/plugin.tsx
index 099be51e1fff0..39dc32bc7f3bd 100644
--- a/src/platform/plugins/shared/newsfeed/public/plugin.tsx
+++ b/src/platform/plugins/shared/newsfeed/public/plugin.tsx
@@ -16,6 +16,7 @@ import type { NewsfeedPluginBrowserConfig, NewsfeedPluginStartDependencies } fro
 import { NewsfeedNavButton } from './components/newsfeed_header_nav_button';
 import type { NewsfeedApi } from './lib/api';
 import { getApi, NewsfeedApiEndpoint } from './lib/api';
+import { registerNewsfeedHandler } from './register_newsfeed_handler';
 
 export type NewsfeedPublicPluginSetup = ReturnType<NewsfeedPublicPlugin['setup']>;
 export type NewsfeedPublicPluginStart = ReturnType<NewsfeedPublicPlugin['start']>;
@@ -48,6 +49,9 @@ export class NewsfeedPublicPlugin
     const isScreenshotMode = screenshotMode.isScreenshotMode();
 
     const api = this.createNewsfeedApi(this.config, NewsfeedApiEndpoint.KIBANA, isScreenshotMode);
+
+    registerNewsfeedHandler({ core, api, isServerless: this.isServerless });
+
     core.chrome.navControls.registerRight({
       order: 1000,
       content: (
diff --git a/src/platform/plugins/shared/newsfeed/public/register_newsfeed_handler.tsx b/src/platform/plugins/shared/newsfeed/public/register_newsfeed_handler.tsx
new file mode 100644
index 0000000000000..cba032b3ebd9c
--- /dev/null
+++ b/src/platform/plugins/shared/newsfeed/public/register_newsfeed_handler.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { shareReplay, map } from 'rxjs';
+import React from 'react';
+import type { CoreStart } from '@kbn/core/public';
+import type { FetchResult } from './types';
+import { NewsfeedContainer } from './components/flyout_list';
+import type { NewsfeedApi } from './lib/api';
+
+export const registerNewsfeedHandler = ({
+  core,
+  api,
+  isServerless,
+}: {
+  core: CoreStart;
+  api: NewsfeedApi;
+  isServerless: boolean;
+}) => {
+  const handlerResults$ = api.fetchResults$.pipe(shareReplay(1));
+  const handlerApi: NewsfeedApi = { ...api, fetchResults$: handlerResults$ };
+
+  let lastFetchResult: FetchResult | null | void = null;
+  handlerResults$.subscribe((result) => {
+    lastFetchResult = result;
+  });
+
+  core.chrome.registerNewsfeedHandler({
+    open: () => {
+      if (lastFetchResult) {
+        handlerApi.markAsRead(lastFetchResult.feedItems.map((item) => item.hash));
+      }
+      const flyoutRef = core.overlays.openSystemFlyout(
+        <NewsfeedContainer
+          newsfeedApi={handlerApi}
+          onClose={() => flyoutRef.close()}
+          showPlainSpinner={false}
+          isServerless={isServerless}
+        />,
+        {
+          size: 's',
+        }
+      );
+    },
+    hasNew$: handlerResults$.pipe(map((result) => result?.hasNew ?? false)),
+  });
+};

From 7ae2826b400eab9d42ee72663d8316284681024f Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Fri, 24 Apr 2026 14:49:21 +0200
Subject: [PATCH 41/77] post merge fix

---
 .../src/chrome_next/global_header/global_header_shell.tsx       | 2 +-
 src/core/packages/chrome/browser/moon.yml                       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
index 5f727a8d86d76..51dc2bc9ca797 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
@@ -10,7 +10,7 @@
 import type { ReactNode } from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { COLLAPSED_WIDTH, EXPANDED_WIDTH } from '@kbn/core-chrome-navigation';
+import { COLLAPSED_WIDTH, EXPANDED_WIDTH } from '@kbn/ui-side-navigation';
 import { useSideNavWidth } from '@kbn/core-chrome-browser-hooks';
 import React, { useMemo } from 'react';
 
diff --git a/src/core/packages/chrome/browser/moon.yml b/src/core/packages/chrome/browser/moon.yml
index add6f2fb45667..5b448861481a1 100644
--- a/src/core/packages/chrome/browser/moon.yml
+++ b/src/core/packages/chrome/browser/moon.yml
@@ -36,6 +36,7 @@ dependsOn:
   - '@kbn/deeplinks-agent-builder'
   - '@kbn/ui-side-navigation'
   - '@kbn/core-chrome-sidebar'
+  - '@kbn/core-chrome-sidebar'
 tags:
   - shared-browser
   - package

From cbf895a86c7012630fa90b281ae2f1ee1d16da26 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Tue, 28 Apr 2026 16:42:42 +0200
Subject: [PATCH 42/77] [Chrome Next] Add documentation link to app menu
 (#266082)

## Summary

This PR adds documentation link as an static item to app menu. If the
link isn't set via the new API then it will fallback to documentation
link set by help menu API.

<img width="432" height="256" alt="Screenshot 2026-04-28 at 15 01 56"
src="https://github.com/user-attachments/assets/beaeb7db-a339-4aab-8b76-4ac7cdc94e3a"
/>
---
 .../app_header/hooks/use_app_header_menu.ts   | 46 +++++++++++++++++--
 .../browser-internal/src/chrome_api.tsx       |  2 +
 .../src/side_effects/app_change_handler.ts    |  3 ++
 .../src/state/chrome_state.ts                 |  7 +++
 .../packages/chrome/browser/src/contracts.ts  | 11 +++++
 5 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
index 5b1a2cc840db1..0625279b51a56 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
@@ -12,21 +12,60 @@ import type { AppMenuConfig, AppMenuItemType } from '@kbn/core-chrome-app-menu-c
 import { APP_MENU_SHARE_ID, getTooltip } from '@kbn/core-chrome-app-menu-components';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { useObservable } from '@kbn/use-observable';
+import { i18n } from '@kbn/i18n';
 import { useAppMenu, useNextHeader } from '../../../shared/chrome_hooks';
 
 const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuItemType => ({
-  label: 'Feedback',
+  label: i18n.translate('chrome.appHeader.feedbackMenuItemLabel', {
+    defaultMessage: 'Feedback',
+  }),
   id: 'feedback',
   iconType: 'comment',
   order: 1,
   run: feedbackHandler,
 });
 
+const createDocumentationMenuItem = (href: string): AppMenuItemType => ({
+  label: i18n.translate('chrome.appHeader.documentationMenuItemLabel', {
+    defaultMessage: 'Documentation',
+  }),
+  id: 'documentation',
+  iconType: 'documentation',
+  order: 2,
+  href,
+  target: '_blank',
+});
+
 interface ResolvedAppMenu {
   menu: AppMenuConfig | undefined;
   shareItem: AppMenuItemType | undefined;
 }
 
+const useStaticItems = () => {
+  const chrome = useChromeService();
+  const feedbackHandler = useObservable(chrome.getFeedbackHandler$(), undefined);
+  const documentationLink = useObservable(chrome.getAppDocumentationLink$(), undefined);
+  const helpExtension = useObservable(chrome.getHelpExtension$(), undefined);
+
+  return useMemo(() => {
+    const staticItems: AppMenuItemType[] = [];
+
+    if (feedbackHandler) {
+      staticItems.push(createFeedbackMenuItem(feedbackHandler));
+    }
+
+    const docLink =
+      documentationLink ??
+      helpExtension?.links?.find((link) => link.linkType === 'documentation')?.href;
+
+    if (docLink) {
+      staticItems.push(createDocumentationMenuItem(docLink));
+    }
+
+    return staticItems;
+  }, [feedbackHandler, documentationLink, helpExtension]);
+};
+
 const useResolvedAppMenu = (): ResolvedAppMenu => {
   const config = useNextHeader();
   const globalAppMenu = useAppMenu();
@@ -58,12 +97,11 @@ export function useAppHeaderMenu(): {
   staticItems: AppMenuItemType[];
 } {
   const { menu } = useResolvedAppMenu();
-  const chrome = useChromeService();
-  const feedbackHandler = useObservable(chrome.getFeedbackHandler$(), undefined);
+  const staticItems = useStaticItems();
 
   return {
     config: menu,
-    staticItems: feedbackHandler ? [createFeedbackMenuItem(feedbackHandler)] : [],
+    staticItems,
   };
 }
 
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index df8fefa83c2c0..603054003cf71 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -138,6 +138,8 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
     registerGlobalHelpExtensionMenuLink: (link) => state.help.globalMenuLinks.add(link),
     getHelpMenuLinks$: () => services.navControls.getHelpMenuLinks$(),
     setHelpMenuLinks: services.navControls.setHelpMenuLinks,
+    registerAppDocumentationLink: state.appDocumentationLink.set,
+    getAppDocumentationLink$: () => state.appDocumentationLink.$,
 
     // Custom Nav Link
     getCustomNavLink$: () => state.customNavLink.$,
diff --git a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
index f9b72f7ed230d..9a6985891e33a 100644
--- a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
+++ b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
@@ -46,6 +46,9 @@ export function setupAppChangeHandler({
     // Reset help
     state.help.extension.set(undefined);
 
+    // Reset app documentation link
+    state.appDocumentationLink.set(undefined);
+
     // Reset document title
     docTitle.reset();
 
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index e9040390b0088..9bbfbc0dd4ed6 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -79,6 +79,9 @@ export interface ChromeState {
     globalMenuLinks: ArrayState<ChromeGlobalHelpExtensionMenuLink>;
   };
 
+  /** App documentation link registered by the current app */
+  appDocumentationLink: State<string | undefined>;
+
   /** Feedback handler registered by the feedback plugin */
   feedbackHandler: State<(() => void) | undefined>;
 
@@ -131,6 +134,9 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   const helpSupportUrl = createState<string>(docLinks.links.kibana.askElastic);
   const globalHelpMenuLinks = createArrayState<ChromeGlobalHelpExtensionMenuLink>();
 
+  // App Documentation Link
+  const appDocumentationLink = createState<string | undefined>(undefined);
+
   // Feedback
   const feedbackHandler = createState<(() => void) | undefined>(undefined);
 
@@ -166,6 +172,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
       supportUrl: helpSupportUrl,
       globalMenuLinks: globalHelpMenuLinks,
     },
+    appDocumentationLink,
     feedbackHandler,
     newsfeedHandler,
   };
diff --git a/src/core/packages/chrome/browser/src/contracts.ts b/src/core/packages/chrome/browser/src/contracts.ts
index 09ba63537ae09..e1de33ee2beb0 100644
--- a/src/core/packages/chrome/browser/src/contracts.ts
+++ b/src/core/packages/chrome/browser/src/contracts.ts
@@ -235,6 +235,17 @@ export interface ChromeStart {
    */
   setHelpExtension(helpExtension?: ChromeHelpExtension): void;
 
+  /**
+   * Register an app-specific documentation link to be shown in the app menu.
+   */
+  registerAppDocumentationLink(link: string): void;
+
+  /**
+   * Get an observable of the app documentation link registered via
+   * {@link ChromeStart.registerAppDocumentationLink}, or `undefined` if none is set.
+   */
+  getAppDocumentationLink$(): Observable<string | undefined>;
+
   /**
    * Override the default support URL shown in the help menu
    * @param url The updated support URL

From e81534eb9f6602c2415c5d4d6e9ac86eca01a8fd Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Fri, 1 May 2026 19:41:45 +0200
Subject: [PATCH 43/77] [Chrome Next] Add badges popovers (#266677)

## Summary

This PR adds popover functionality to app badges.

<img width="553" height="214" alt="Screenshot 2026-04-30 at 22 25 55"
src="https://github.com/user-attachments/assets/5c8d5030-f02d-493b-b735-9ea1523dc094"
/>
---
 .../app_header/app_badge.stories.tsx          | 159 ++++++++++++++++++
 .../src/chrome_next/app_header/app_badge.tsx  |  87 +++++++++-
 .../src/chrome_next/app_header/app_badges.tsx |   4 +-
 src/core/packages/chrome/browser/index.ts     |   1 +
 .../chrome/browser/src/chrome_next/header.ts  |  40 ++++-
 .../chrome/browser/src/chrome_next/index.ts   |   1 +
 src/core/packages/chrome/browser/src/index.ts |   1 +
 7 files changed, 282 insertions(+), 11 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx
new file mode 100644
index 0000000000000..3c9748c4e7eb0
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx
@@ -0,0 +1,159 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHeader,
+  EuiHeaderSection,
+  EuiPageTemplate,
+  EuiPopover,
+  EuiTitle,
+} from '@elastic/eui';
+import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
+import { AppBadge } from './app_badge';
+
+const MAX_VISIBLE_BADGES = 2;
+
+interface AppBadgeStoryProps {
+  title: string;
+  badges: ChromeNextHeaderBadge[];
+}
+
+const HeaderWithBadges = ({ title, badges }: AppBadgeStoryProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const visibleBadges = badges.slice(0, MAX_VISIBLE_BADGES);
+  const overflowBadges = badges.slice(MAX_VISIBLE_BADGES);
+
+  return (
+    <EuiHeader>
+      <EuiHeaderSection>
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={false}>
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <h1>{title}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {visibleBadges.map((badge) => (
+            <EuiFlexItem grow={false} key={badge.label}>
+              <AppBadge badge={badge} />
+            </EuiFlexItem>
+          ))}
+          {overflowBadges.length > 0 && (
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                aria-label="More badges"
+                button={
+                  <EuiBadge
+                    color="hollow"
+                    onClick={() => setIsPopoverOpen((open) => !open)}
+                    onClickAriaLabel={`Show ${overflowBadges.length} more badges`}
+                  >
+                    +{overflowBadges.length}
+                  </EuiBadge>
+                }
+                isOpen={isPopoverOpen}
+                closePopover={() => setIsPopoverOpen(false)}
+                panelPaddingSize="s"
+              >
+                <EuiFlexGroup direction="column" gutterSize="xs" alignItems="center">
+                  {overflowBadges.map((badge) => (
+                    <EuiFlexItem grow={false} key={badge.label}>
+                      <AppBadge badge={badge} />
+                    </EuiFlexItem>
+                  ))}
+                </EuiFlexGroup>
+              </EuiPopover>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiHeaderSection>
+    </EuiHeader>
+  );
+};
+
+const meta: Meta<AppBadgeStoryProps> = {
+  title: 'Chrome/App Badge',
+  component: HeaderWithBadges,
+  decorators: [
+    (Story) => (
+      <EuiPageTemplate>
+        <Story />
+      </EuiPageTemplate>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Badges displayed inline next to the page title in the Chrome header. ' +
+          'Each badge can be a simple label, have a click handler, or open a context menu.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<AppBadgeStoryProps>;
+
+export const Badges: Story = {
+  args: {
+    title: '[Logs] Web Traffic',
+    badges: [
+      { label: 'Beta' },
+      {
+        label: 'Tech Preview',
+        color: 'warning',
+        tooltip: 'This feature is in tech preview and may change.',
+        onClick: action('tech-preview-clicked'),
+        onClickAriaLabel: 'Click to learn more about tech preview',
+      },
+      {
+        label: 'Managed',
+        color: 'primary',
+        popoverWidth: 180,
+        items: [
+          {
+            name: 'View details',
+            icon: 'inspect',
+            onClick: action('view-details-clicked'),
+          },
+          {
+            name: 'Export',
+            icon: 'exportAction',
+            popoverWidth: 180,
+            items: [
+              {
+                name: 'Export as CSV',
+                icon: 'document',
+                onClick: action('export-csv-clicked'),
+              },
+              {
+                name: 'Export as JSON',
+                icon: 'document',
+                onClick: action('export-json-clicked'),
+              },
+            ],
+          },
+          {
+            name: 'Unlink',
+            icon: 'unlink',
+            onClick: action('unlink-clicked'),
+          },
+        ],
+      },
+      { label: 'New', color: 'primary' },
+    ],
+  },
+};
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
index 17c2eaba83107..3e72eddad0ce3 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
@@ -7,12 +7,54 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo } from 'react';
-import { EuiBadge, EuiToolTip } from '@elastic/eui';
-import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
+import React, { useCallback, useMemo, useState } from 'react';
+import { EuiBadge, EuiContextMenu, EuiPopover, EuiToolTip } from '@elastic/eui';
+import type {
+  EuiContextMenuPanelDescriptor,
+  EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui';
+import type {
+  ChromeNextHeaderBadge,
+  ChromeNextHeaderBadgeMenuItem,
+} from '@kbn/core-chrome-browser/src';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 
+/**
+ * Recursively builds flat EuiContextMenu panels from nested badge menu items.
+ */
+const buildPanels = (
+  items: ChromeNextHeaderBadgeMenuItem[],
+  panelId: number,
+  width?: number,
+  title?: string
+): EuiContextMenuPanelDescriptor[] => {
+  const panels: EuiContextMenuPanelDescriptor[] = [];
+  let nextPanelId = panelId + 1;
+
+  const panelItems: EuiContextMenuPanelItemDescriptor[] = items.map((item) => {
+    const { items: childItems, popoverWidth: childWidth, ...rest } = item;
+    if (childItems && childItems.length > 0) {
+      const childPanelId = nextPanelId;
+      const childPanels = buildPanels(childItems, childPanelId, childWidth, item.name);
+      nextPanelId = childPanelId + childPanels.length;
+      panels.push(...childPanels);
+      return { ...rest, panel: childPanelId };
+    }
+
+    return rest;
+  });
+
+  panels.unshift({
+    id: panelId,
+    items: panelItems,
+    ...(title && { title }),
+    ...(width && { width }),
+  });
+
+  return panels;
+};
+
 const useBadgeStyle = () => {
   return useMemo(() => {
     const badge = css`
@@ -25,6 +67,10 @@ const useBadgeStyle = () => {
 
 export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
   const { badge: badgeStyle } = useBadgeStyle();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+  const togglePopover = useCallback(() => setIsPopoverOpen((open) => !open), []);
 
   // @ts-expect-error supported for backward compatibility. TODO: Remove it
   if (badge?.renderCustomBadge) {
@@ -32,6 +78,8 @@ export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
     return badge.renderCustomBadge({ badgeText: badge.label });
   }
 
+  const hasItems = 'items' in badge && badge.items !== undefined;
+
   const badgeOnClickAriaLabel =
     badge?.onClickAriaLabel ??
     i18n.translate('core.ui.chrome.appHeader.badge.ariaLabel', {
@@ -40,9 +88,11 @@ export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
     });
 
   const handleBadgeClick = () => {
-    if (badge?.onClick) {
-      badge.onClick();
+    if (hasItems) {
+      togglePopover();
+      return;
     }
+    badge?.onClick?.();
   };
 
   const badgeComponent = (
@@ -52,16 +102,37 @@ export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
       color={badge?.color ?? 'hollow'}
       data-test-subj={badge?.['data-test-subj']}
       css={badgeStyle}
+      iconType={hasItems ? 'arrowDown' : undefined}
+      iconSide={hasItems ? 'right' : undefined}
     >
       {badge.label}
     </EuiBadge>
   );
 
-  if (badge?.tooltip) {
-    return <EuiToolTip content={badge.tooltip}>{badgeComponent}</EuiToolTip>;
+  const wrappedBadge = badge?.tooltip ? (
+    <EuiToolTip content={badge.tooltip}>{badgeComponent}</EuiToolTip>
+  ) : (
+    badgeComponent
+  );
+
+  if (hasItems) {
+    return (
+      <EuiPopover
+        button={wrappedBadge}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+        aria-label={badge.label}
+      >
+        <EuiContextMenu
+          initialPanelId={0}
+          panels={buildPanels(badge.items, 0, badge.popoverWidth)}
+        />
+      </EuiPopover>
+    );
   }
 
-  return badgeComponent;
+  return wrappedBadge;
 };
 
 AppBadge.displayName = 'AppBadge';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
index 5822ed28d22f5..a195239ef0f0a 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
@@ -94,9 +94,9 @@ export const AppBadges = memo(() => {
             closePopover={handleClosePopover}
             panelPaddingSize="s"
           >
-            <EuiFlexGroup direction="column" gutterSize="xs">
+            <EuiFlexGroup direction="column" gutterSize="xs" alignItems="center">
               {overflowBadges.map((badge) => (
-                <EuiFlexItem key={badge.label}>
+                <EuiFlexItem grow={false} key={badge.label}>
                   <AppBadge badge={badge} />
                 </EuiFlexItem>
               ))}
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index b390d14e32420..dfb50172a67ee 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -59,6 +59,7 @@ export type {
   ChromeNextGlobalSearchConfig,
   ChromeNextHeaderBack,
   ChromeNextHeaderBadge,
+  ChromeNextHeaderBadgeMenuItem,
   ChromeNextHeaderCallout,
   ChromeNextHeaderConfig,
   ChromeNextHeaderGlobalActions,
diff --git a/src/core/packages/chrome/browser/src/chrome_next/header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
index befb6fd40b972..134c5cbe5fb3c 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/header.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/header.ts
@@ -8,6 +8,7 @@
  */
 import type { ReactNode } from 'react';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import type { IconType } from '@elastic/eui';
 
 /**
  * Unified configuration for the Chrome-controlled Chrome-Next header.
@@ -74,16 +75,53 @@ export interface ChromeNextHeaderBack {
   label?: string;
 }
 
-export interface ChromeNextHeaderBadge {
+interface ChromeNextHeaderBadgeBase {
   label: string;
   /** EUI badge color. `filled` is intentionally excluded. */
   color?: 'hollow' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'accent';
   tooltip?: string;
+  'data-test-subj'?: string;
+}
+
+interface ChromeNextHeaderBadgeWithClick extends ChromeNextHeaderBadgeBase {
+  popoverWidth?: never;
+  items?: never;
   onClick?: () => void;
   onClickAriaLabel?: string;
+}
+
+interface ChromeNextHeaderPopoverBadge extends ChromeNextHeaderBadgeBase {
+  items: ChromeNextHeaderBadgeMenuItem[];
+  popoverWidth?: number;
+  onClick?: never;
+  onClickAriaLabel?: never;
+}
+
+/**
+ * A menu item for badge context menus.
+ * Leaf items have `onClick`; parent items have nested `items`.
+ */
+export interface ChromeNextHeaderBadgeMenuItem {
+  /** Display label for the menu item. */
+  name: string;
+  /** Optional icon. */
+  icon?: IconType;
+  /** Handler for leaf items. Mutually exclusive with `items`. */
+  onClick?: () => void;
+  /** Nested sub-menu items. Mutually exclusive with `onClick`. */
+  items?: ChromeNextHeaderBadgeMenuItem[];
+  /** Width of the nested sub-menu panel (in px). Only used when `items` is provided. */
+  popoverWidth?: number;
+  /** Test subject identifier. */
   'data-test-subj'?: string;
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+  /** Optional tooltip content. */
+  toolTipContent?: string;
 }
 
+export type ChromeNextHeaderBadge = ChromeNextHeaderBadgeWithClick | ChromeNextHeaderPopoverBadge;
+
 /**
  * A single metadata slot item — either plain text or an interactive button.
  * Text renders as `EuiText`; button renders as `EuiButtonEmpty`.
diff --git a/src/core/packages/chrome/browser/src/chrome_next/index.ts b/src/core/packages/chrome/browser/src/chrome_next/index.ts
index 3e6646906ba0b..5f64721a633c3 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/index.ts
@@ -13,6 +13,7 @@ export type { ChromeNextGlobalSearchConfig } from './global_search';
 export type {
   ChromeNextHeaderBack,
   ChromeNextHeaderBadge,
+  ChromeNextHeaderBadgeMenuItem,
   ChromeNextHeaderCallout,
   ChromeNextHeaderConfig,
   ChromeNextHeaderGlobalActions,
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 03ec558a4fbe0..94da97f67eb3f 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -65,6 +65,7 @@ export type {
   ChromeNextGlobalSearchConfig,
   ChromeNextHeaderBack,
   ChromeNextHeaderBadge,
+  ChromeNextHeaderBadgeMenuItem,
   ChromeNextHeaderCallout,
   ChromeNextHeaderConfig,
   ChromeNextHeaderGlobalActions,

From 91768ee4463a67bba7821dabc9b684167cd6cdca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngeles=20Mart=C3=ADnez=20Barrio?=
 <angeles.martinezbarrio@elastic.co>
Date: Mon, 4 May 2026 11:06:49 +0200
Subject: [PATCH 44/77] [DoNotReview/FeatureBranch][Chrome Next] Add Spaces
 context switcher to global header (#266578)

Relates to https://github.com/elastic/kibana/issues/259992

## Summary

- Wired up the new context switcher component in chrome next global
header
- Still to do:
- Footer links: Connection Details, Invite Users, Get Started... in Root
view
- Footer links: Create Project / Create Deployment link in Submenu view

### Testing

| Multiple spaces | Single space | Root view | Submenu view |
| --- | --- | --- | --- |
| <img width="488" height="405" alt="Screenshot 2026-04-30 at 10 08 57"
src="https://github.com/user-attachments/assets/3582d5bb-249e-446a-aee6-0eb62a85e293"
/> | | |
| <img width="484" height="326" alt="Screenshot 2026-04-30 at 10 13 32"
src="https://github.com/user-attachments/assets/14c51cb1-28b4-46eb-89fb-6e877b49c6e1"
/> | <img width="489" height="318" alt="Screenshot 2026-04-30 at 10 14
48"
src="https://github.com/user-attachments/assets/4519a6a0-fbc2-4f7d-86d1-c44ba5a6b51c"
/> | <img width="486" height="324" alt="Screenshot 2026-04-30 at 10 13
23"
src="https://github.com/user-attachments/assets/7173ba9e-5c09-48c2-b71d-b21dbf581f31"
/> | <img width="490" height="322" alt="Screenshot 2026-04-30 at 10 13
43"
src="https://github.com/user-attachments/assets/95e43897-6088-418a-91d8-4bb9dac1256e"
/> |
| <img width="510" height="313" alt="Screenshot 2026-04-30 at 10 23 39"
src="https://github.com/user-attachments/assets/0c8a7cbb-2bc9-4d28-90f0-e3cf096dd6c6"
/> | <img width="473" height="324" alt="Screenshot 2026-04-30 at 10 22
37"
src="https://github.com/user-attachments/assets/5fd5d03c-b39e-4fd8-8083-ac8defacc9e1"
/> | <img width="479" height="325" alt="Screenshot 2026-04-30 at 10 23
17"
src="https://github.com/user-attachments/assets/a157e02e-b3bf-4227-a744-ce749487fa1e"
/> | <img width="487" height="318" alt="Screenshot 2026-04-30 at 10 23
30"
src="https://github.com/user-attachments/assets/3cde9ad1-2be8-418a-8031-8809bad0038f"
/> |
---
 .../global_header/global_header.tsx           |   3 +-
 .../global_header/global_header_shell.tsx     |   2 +-
 .../src/shared/chrome_hooks.ts                |  10 ++
 .../chrome/browser-internal-types/index.ts    |   5 +-
 .../browser-internal/src/chrome_api.tsx       |   6 +-
 .../src/state/chrome_state.ts                 |   7 +-
 .../browser-mocks/src/chrome_service.mock.ts  |  18 +--
 src/core/packages/chrome/browser/index.ts     |   1 -
 .../browser/src/chrome_next/chrome_next.ts    |  12 +-
 .../chrome/browser/src/chrome_next/index.ts   |   1 -
 .../browser/src/chrome_next/space_selector.ts |  16 ---
 src/core/packages/chrome/browser/src/index.ts |   1 -
 .../context-switcher-components/index.ts      |   2 +-
 .../components/context_switcher.stories.tsx   |  30 ++--
 .../src/components/context_switcher.tsx       |  82 ++++++++---
 .../context_switcher_trigger_button.tsx       |   9 +-
 .../src/components/footer.tsx                 |  14 +-
 .../src/components/selectable_list.tsx        |   6 +-
 .../src/components/types.ts                   |  16 ++-
 .../src/components/views/context_submenu.tsx  |   4 +-
 .../src/components/views/spaces_list.tsx      |  21 ++-
 .../context_switcher/context_switcher.tsx     |  45 ++++++
 .../context_switcher_component.tsx            |  97 +++++++++++++
 .../public/context_switcher/hooks/index.ts    |  11 ++
 .../hooks/use_active_space.ts                 |  24 ++++
 .../hooks/use_environment_context.ts          |  97 +++++++++++++
 .../hooks/use_management_actions.ts           |  46 ++++++
 .../hooks/use_space_items.tsx                 | 134 ++++++++++++++++++
 .../spaces/public/context_switcher/index.ts   |   8 ++
 .../spaces/public/nav_control/nav_control.tsx |  98 +------------
 .../public/plugin.execution_context.test.ts   |   7 +-
 .../shared/spaces/public/plugin.test.ts       |  32 ++++-
 .../plugins/shared/spaces/public/plugin.tsx   |  14 +-
 .../plugins/shared/spaces/tsconfig.json       |   1 +
 34 files changed, 670 insertions(+), 210 deletions(-)
 delete mode 100644 src/core/packages/chrome/browser/src/chrome_next/space_selector.ts
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_active_space.ts
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_management_actions.ts
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/index.ts

diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
index da9c8f1d21cff..cb435e2372e68 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx
@@ -13,7 +13,7 @@ import { GlobalHeaderLogo } from './global_header_logo';
 import { AiButtonSlot } from './ai_button_slot';
 import { SearchButton } from './search_button';
 import { HelpButton } from './help_button';
-import { useUserMenu } from '../../shared/chrome_hooks';
+import { useContextSwitcher, useUserMenu } from '../../shared/chrome_hooks';
 
 export const GlobalHeader = React.memo(() => (
   <GlobalHeaderShell
@@ -22,6 +22,7 @@ export const GlobalHeader = React.memo(() => (
     help={<HelpButton />}
     actions={<AiButtonSlot />}
     userMenu={useUserMenu()}
+    switcher={useContextSwitcher()}
   />
 ));
 
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
index 51dc2bc9ca797..8cd96f372f976 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header_shell.tsx
@@ -50,7 +50,6 @@ const useGlobalHeaderStyles = () => {
     const leftGroup = css`
       display: flex;
       align-items: center;
-      gap: ${euiTheme.size.s};
       flex-shrink: 0;
     `;
 
@@ -58,6 +57,7 @@ const useGlobalHeaderStyles = () => {
       display: flex;
       align-items: center;
       gap: ${euiTheme.size.xs};
+      margin-inline-end: ${euiTheme.size.xs};
     `;
 
     const spacer = css`
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index e547ce2cf715b..e2185e25b6e7c 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -264,6 +264,16 @@ export function useUserMenu(): ReactNode {
   return useObservable(content$, null);
 }
 
+/**
+ * Returns the current context switcher content set via
+ * `chrome.next.contextSwitcher.set()`, or null if not set.
+ */
+export function useContextSwitcher(): ReactNode {
+  const chrome = useChromeService();
+  const content$ = useMemo(() => chrome.next.contextSwitcher.get$(), [chrome]);
+  return useObservable(content$, null);
+}
+
 /** Returns whether the next-chrome experience is enabled via feature flag. */
 export function useIsNextChrome(): boolean {
   const { featureFlags } = useChromeComponentsDeps();
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index abd0f31b410f0..a7d8d6ad1104d 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -20,7 +20,6 @@ import type {
   ChromeNextAiButton,
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
-  ChromeNextSpaceSelectorConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -134,7 +133,7 @@ export interface InternalChromeNext extends ChromeNext {
   userMenu: ChromeNext['userMenu'] & {
     get$(): Observable<ReactNode>;
   };
-  spaceSelector: ChromeNext['spaceSelector'] & {
-    get$(): Observable<ChromeNextSpaceSelectorConfig | undefined>;
+  contextSwitcher: ChromeNext['contextSwitcher'] & {
+    get$(): Observable<ReactNode>;
   };
 }
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index 603054003cf71..ffaff87bdc067 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -201,9 +201,9 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
         get$: () => state.userMenu.$,
         set: state.userMenu.set,
       },
-      spaceSelector: {
-        get$: () => state.spaceSelector.$,
-        set: state.spaceSelector.set,
+      contextSwitcher: {
+        get$: () => state.contextSwitcher.$,
+        set: state.contextSwitcher.set,
       },
     },
 
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 9bbfbc0dd4ed6..45b964e121d5e 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -21,7 +21,6 @@ import type {
   ChromeNavLink,
   ChromeNextAiButton,
   ChromeNextGlobalSearchConfig,
-  ChromeNextSpaceSelectorConfig,
   ChromeUserBanner,
 } from '@kbn/core-chrome-browser';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
@@ -70,7 +69,7 @@ export interface ChromeState {
   aiButton: State<ReadonlySet<ChromeNextAiButton>>;
   globalSearch: State<ChromeNextGlobalSearchConfig | undefined>;
   userMenu: State<ReactNode>;
-  spaceSelector: State<ChromeNextSpaceSelectorConfig | undefined>;
+  contextSwitcher: State<ReactNode>;
 
   /** Help system */
   help: {
@@ -126,7 +125,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
   const aiButton = createState<ReadonlySet<ChromeNextAiButton>>(new Set());
   const globalSearch = createState<ChromeNextGlobalSearchConfig | undefined>(undefined);
   const userMenu = createState<ReactNode>(null);
-  const spaceSelector = createState<ChromeNextSpaceSelectorConfig | undefined>(undefined);
+  const contextSwitcher = createState<ReactNode>(null);
   const customNavLink = createState<ChromeNavLink | undefined>(undefined);
 
   // Help System
@@ -164,7 +163,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
     aiButton,
     globalSearch,
     userMenu,
-    spaceSelector,
+    contextSwitcher,
     customNavLink,
     appMenu,
     help: {
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index a7252a8cf84fa..57a5670887b3a 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -15,7 +15,6 @@ import type {
   ChromeBreadcrumb,
   ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
-  ChromeNextSpaceSelectorConfig,
 } from '@kbn/core-chrome-browser';
 import type {
   InternalChromeSetup,
@@ -36,9 +35,8 @@ const createStartContractMock = () => {
     undefined
   );
   const nextUserMenuState$ = new BehaviorSubject<ReactNode>(null);
-  const nextSpaceSelectorState$ = new BehaviorSubject<ChromeNextSpaceSelectorConfig | undefined>(
-    undefined
-  );
+  const nextContextSwitcherState$ = new BehaviorSubject<ReactNode>(null);
+  const appDocumentationLinkState$ = new BehaviorSubject<string | undefined>(undefined);
 
   const startContract: DeeplyMockedKeys<InternalChromeStart> = lazyObject({
     withProvider: jest.fn((children) => children),
@@ -156,10 +154,10 @@ const createStartContractMock = () => {
           nextUserMenuState$.next(content ?? null);
         }),
       }),
-      spaceSelector: lazyObject({
-        get$: jest.fn().mockReturnValue(nextSpaceSelectorState$),
-        set: jest.fn((config?: ChromeNextSpaceSelectorConfig) => {
-          nextSpaceSelectorState$.next(config);
+      contextSwitcher: lazyObject({
+        get$: jest.fn().mockReturnValue(nextContextSwitcherState$),
+        set: jest.fn((content?: ReactNode) => {
+          nextContextSwitcherState$.next(content ?? null);
         }),
       }),
     }),
@@ -173,6 +171,10 @@ const createStartContractMock = () => {
     registerFeedbackHandler: jest.fn().mockReturnValue(() => {}),
     getNewsfeedHandler$: jest.fn().mockReturnValue(new BehaviorSubject(undefined)),
     registerNewsfeedHandler: jest.fn().mockReturnValue(() => {}),
+    registerAppDocumentationLink: jest.fn((link: string) => {
+      appDocumentationLinkState$.next(link);
+    }),
+    getAppDocumentationLink$: jest.fn().mockReturnValue(appDocumentationLinkState$),
   });
 
   return startContract;
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index dfb50172a67ee..c8a487728453e 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -65,5 +65,4 @@ export type {
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
-  ChromeNextSpaceSelectorConfig,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
index d402451bc5cdc..c045d4c8db3dc 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
@@ -11,10 +11,9 @@ import type { ReactNode } from 'react';
 import type { ChromeNextAiButton } from './ai_button';
 import type { ChromeNextGlobalSearchConfig } from './global_search';
 import type { ChromeNextHeaderConfig } from './header';
-import type { ChromeNextSpaceSelectorConfig } from './space_selector';
 
 /**
- * Chrome-Next APIs: header configuration, AI button slot, global search, user menu, and space selector.
+ * Chrome-Next APIs: header configuration, AI button slot, global search, user menu, and context switcher.
  * @public
  */
 export interface ChromeNext {
@@ -61,12 +60,13 @@ export interface ChromeNext {
      */
     set(content?: ReactNode): void;
   };
-  spaceSelector: {
+  contextSwitcher: {
     /**
-     * Set the space selector configuration for the Chrome-Next sidenav.
-     * Chrome renders a space avatar in the sidenav header with a custom popover.
+     * Set the context switcher content for the Chrome-Next global header.
+     * The provided ReactNode is rendered as-is in the header's context switcher slot.
+     * The consumer owns the full UI (context switcher trigger button, popover, menu items).
      * Pass `undefined` to remove. Global — persists across app changes.
      */
-    set(config?: ChromeNextSpaceSelectorConfig): void;
+    set(content?: ReactNode): void;
   };
 }
diff --git a/src/core/packages/chrome/browser/src/chrome_next/index.ts b/src/core/packages/chrome/browser/src/chrome_next/index.ts
index 5f64721a633c3..f54d39d6058c5 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/index.ts
@@ -20,4 +20,3 @@ export type {
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
 } from './header';
-export type { ChromeNextSpaceSelectorConfig } from './space_selector';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/space_selector.ts b/src/core/packages/chrome/browser/src/chrome_next/space_selector.ts
deleted file mode 100644
index cdfee763c91c7..0000000000000
--- a/src/core/packages/chrome/browser/src/chrome_next/space_selector.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import type { ReactNode } from 'react';
-
-export interface ChromeNextSpaceSelectorConfig {
-  label: string;
-  renderAvatar: () => ReactNode;
-  renderPopover: (closePopover: () => void) => ReactNode;
-}
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 94da97f67eb3f..1e64cf7909cf9 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -71,5 +71,4 @@ export type {
   ChromeNextHeaderGlobalActions,
   ChromeNextHeaderMetadataSlotItem,
   ChromeNextHeaderTab,
-  ChromeNextSpaceSelectorConfig,
 } from './chrome_next';
diff --git a/src/platform/packages/shared/context-switcher-components/index.ts b/src/platform/packages/shared/context-switcher-components/index.ts
index d10ce06ed150e..af3a867499465 100644
--- a/src/platform/packages/shared/context-switcher-components/index.ts
+++ b/src/platform/packages/shared/context-switcher-components/index.ts
@@ -14,5 +14,5 @@ export type {
   ContextSwitcherEnvironmentConfig,
   SpaceItem,
   LinksListItem,
-  FooterAction,
+  ActionConfig,
 } from './src/components/types';
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx
index 771a808a8d511..62be2675d7113 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.stories.tsx
@@ -10,7 +10,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { EuiAvatar, EuiBadge, EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+import { EuiAvatar, EuiBadge, EuiPanel } from '@elastic/eui';
 
 import { ContextSwitcher } from './context_switcher';
 import type { SpaceItem, LinksListItem } from './types';
@@ -87,10 +87,22 @@ const MOCK_FOOTER_LINKS: LinksListItem[] = [
   },
 ];
 
+const SPACES_HEADER_ACTION = {
+  id: 'manage-spaces',
+  label: 'Manage',
+  onClick: () => action('manage-spaces')(),
+};
+
+const SPACES_FOOTER_ACTION = {
+  id: 'create-space',
+  label: 'Create space',
+  onClick: () => action('create-space')(),
+};
+
 const buildSpaceItems = (showBadges: boolean): SpaceItem[] =>
   MOCK_SPACES.map((s) => ({
     ...s,
-    avatar: <EuiAvatar type="space" name={s.name} size="s" />,
+    avatar: (size) => <EuiAvatar type="space" name={s.name} size={size} />,
     badge: showBadges ? (
       <EuiBadge color="hollow" iconType={s.solutionIcon}>
         {s.solution}
@@ -98,12 +110,6 @@ const buildSpaceItems = (showBadges: boolean): SpaceItem[] =>
     ) : undefined,
   }));
 
-const buildManageAction = () => (
-  <EuiButtonEmpty size="s" onClick={action('manage-spaces')}>
-    Manage
-  </EuiButtonEmpty>
-);
-
 const useSpacesConfig = (showBadges: boolean, searchThreshold?: number) => {
   const [activeSpaceId, setActiveSpaceId] = useState('obs');
   const activeSpace = MOCK_SPACES.find((s) => s.id === activeSpaceId)!;
@@ -114,18 +120,12 @@ const useSpacesConfig = (showBadges: boolean, searchThreshold?: number) => {
       action('select-space')(spaceId);
       setActiveSpaceId(spaceId);
     },
-    headerAction: buildManageAction(),
+    headerAction: SPACES_HEADER_ACTION,
     footerAction: SPACES_FOOTER_ACTION,
     search: searchThreshold != null ? { threshold: searchThreshold } : undefined,
   };
 };
 
-const SPACES_FOOTER_ACTION = {
-  id: 'create-space',
-  label: 'Create space',
-  onClick: () => action('create-space')(),
-};
-
 const CloudScenario = ({ searchThreshold }: { searchThreshold: number }) => {
   const spaces = useSpacesConfig(true, searchThreshold);
 
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
index c80386222ce0c..9fbf170364c24 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
@@ -25,6 +25,7 @@ import type { ContextMenuViewProps } from './views/context_menu';
 import { ContextSubmenuView } from './views/context_submenu';
 import type { ContextSubmenuViewProps } from './views/context_submenu';
 import { ContextSwitcherTriggerButton } from './context_switcher_trigger_button';
+import type { ActionConfig } from './types';
 import { POPOVER_WIDTH, type ContextSwitcherProps, type SpaceItem } from './types';
 import type { SelectableListItem } from './selectable_list';
 
@@ -40,7 +41,7 @@ const SUBMENU_TITLES: Record<'project' | 'deployment', string> = {
 };
 
 const SPACES_TITLE = i18n.translate('contextSwitcherComponents.spacesTitle', {
-  defaultMessage: 'Spaces',
+  defaultMessage: 'My spaces',
 });
 
 const CONTEXT_SWITCHER_ARIA_LABEL = i18n.translate('contextSwitcherComponents.popover.ariaLabel', {
@@ -51,7 +52,7 @@ const mapSpaceToSelectableItem = (space: SpaceItem, activeId: string): Selectabl
   id: space.id,
   label: space.name,
   checked: space.id === activeId,
-  prepend: space.avatar ?? <EuiAvatar type="space" name={space.name} size="s" />,
+  prepend: space.avatar?.('s') ?? <EuiAvatar type="space" name={space.name} size="s" />,
   append: space.badge,
   'data-test-subj': `space-${space.id}`,
 });
@@ -97,13 +98,24 @@ export const ContextSwitcher = ({
   spaces,
   environmentContext,
   footerLinks,
+  onOpen,
 }: ContextSwitcherProps) => {
   const { euiTheme } = useEuiTheme();
 
   const [isOpen, setIsOpen] = useState(false);
-  const togglePopover = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  const togglePopover = useCallback(() => {
+    setIsOpen((prev) => {
+      if (!prev) onOpen?.();
+      return !prev;
+    });
+  }, [onOpen]);
+
   const closePopover = useCallback(() => setIsOpen(false), []);
 
+  const isProject = environmentContext?.environmentType === 'project';
+  const isDeployment = environmentContext?.environmentType === 'deployment';
+
   const triggerButtonIcon = spaces.active.solutionIcon ?? 'logoElastic';
 
   const selectableItems = useMemo(
@@ -111,6 +123,16 @@ export const ContextSwitcher = ({
     [spaces.items, spaces.active.id]
   );
 
+  const triggerLabel = useMemo(() => {
+    if (!environmentContext) {
+      return spaces.active.name;
+    }
+    if (spaces.items.length <= 1) {
+      return environmentContext.name;
+    }
+    return `${environmentContext.name}: ${spaces.active.name}`;
+  }, [environmentContext, spaces.active.name, spaces.items.length]);
+
   const handleSpaceSelect = useCallback<SpacesListViewProps['onSelect']>(
     ({ item }) => {
       spaces.onSelect(item.id);
@@ -119,6 +141,20 @@ export const ContextSwitcher = ({
     [spaces, closePopover]
   );
 
+  const withClosePopover = useCallback(
+    (action?: ActionConfig): ActionConfig | undefined => {
+      if (!action) return undefined;
+      return {
+        ...action,
+        onClick: () => {
+          closePopover();
+          action?.onClick?.();
+        },
+      };
+    },
+    [closePopover]
+  );
+
   const searchConfig =
     selectableItems.length >= (spaces.search?.threshold ?? SEARCH_THRESHOLD)
       ? {
@@ -138,27 +174,25 @@ export const ContextSwitcher = ({
   const spacesViewProps = {
     id: 'contextSwitcherSpacesList',
     title: SPACES_TITLE,
-    headerAction: spaces.headerAction,
+    headerAction: withClosePopover(spaces.headerAction),
     items: selectableItems,
     onSelect: handleSpaceSelect,
     search: searchConfig,
     isLoading: spaces.isLoading,
-    footerAction: spaces.footerAction,
+    footerAction: withClosePopover(spaces.footerAction),
   };
 
-  const environmentDescription =
-    environmentContext && spaces.active.solution
-      ? i18n.translate('contextSwitcherComponents.environmentContext.description', {
-          defaultMessage: '{solution} {kind}',
-          values: {
-            solution: spaces.active.solution,
-            kind: environmentContext.environmentType,
-          },
-        })
-      : undefined;
+  const environmentDescription = isProject
+    ? i18n.translate('contextSwitcherComponents.environmentContext.projectDescription', {
+        defaultMessage: '{solution} project',
+        values: { solution: spaces.active.solution },
+      })
+    : i18n.translate('contextSwitcherComponents.environmentContext.deploymentDescription', {
+        defaultMessage: 'Deployment',
+      });
 
   const environmentIcon: ReactElement | undefined =
-    environmentContext?.environmentType === 'project' && spaces.active.solutionIcon ? (
+    isProject && spaces.active.solutionIcon ? (
       <EuiAvatar
         type="space"
         name={spaces.active.solution ?? ''}
@@ -170,7 +204,7 @@ export const ContextSwitcher = ({
     ) : undefined;
 
   const spacesDescription =
-    spaces.active.solution && environmentContext?.environmentType === 'deployment' ? (
+    isDeployment && spaces.active.solution ? (
       <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false} component="span">
         {spaces.active.solutionIcon && (
           <EuiFlexItem grow={false} component="span">
@@ -178,13 +212,17 @@ export const ContextSwitcher = ({
           </EuiFlexItem>
         )}
         <EuiFlexItem grow={false} component="span">
-          {i18n.translate('contextSwitcherComponents.spacesRow.description', {
+          {i18n.translate('contextSwitcherComponents.spacesRow.solutionDescription', {
             defaultMessage: '{solution} space',
             values: { solution: spaces.active.solution },
           })}
         </EuiFlexItem>
       </EuiFlexGroup>
-    ) : undefined;
+    ) : (
+      i18n.translate('contextSwitcherComponents.spacesRow.simpleDescription', {
+        defaultMessage: 'Space',
+      })
+    );
 
   return (
     <EuiPopover
@@ -192,7 +230,7 @@ export const ContextSwitcher = ({
       button={
         <ContextSwitcherTriggerButton
           solutionIcon={triggerButtonIcon}
-          spaceName={spaces.active.name}
+          label={triggerLabel}
           onClick={togglePopover}
           isSelected={isOpen}
         />
@@ -220,7 +258,7 @@ export const ContextSwitcher = ({
             spacesRow: {
               id: 'spaces',
               label: spaces.active.name,
-              prepend: spaces.active.avatar ?? (
+              prepend: spaces.active.avatar?.('l') ?? (
                 <EuiAvatar type="space" name={spaces.active.name} size="l" />
               ),
               value: spacesDescription,
@@ -230,7 +268,7 @@ export const ContextSwitcher = ({
           environmentSubmenuView={{
             title: SUBMENU_TITLES[environmentContext.environmentType],
             items: environmentContext.submenuItems,
-            footerAction: environmentContext.submenuFooterAction,
+            footerAction: withClosePopover(environmentContext.submenuFooterAction),
           }}
           spacesSubmenuView={spacesViewProps}
         />
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
index 2c8830ca62c89..1844ccefb2473 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
@@ -23,7 +23,7 @@ const CONTEXT_SWITCHER_BUTTON_ARIA_LABEL = i18n.translate(
 
 interface ContextSwitcherTriggerButtonProps {
   readonly solutionIcon: IconType;
-  readonly spaceName: string;
+  readonly label: string;
   readonly onClick: () => void;
   readonly isSelected?: boolean;
 }
@@ -34,7 +34,7 @@ interface ContextSwitcherTriggerButtonProps {
  */
 export const ContextSwitcherTriggerButton = ({
   solutionIcon,
-  spaceName,
+  label,
   onClick,
   isSelected,
 }: ContextSwitcherTriggerButtonProps): ReactElement => {
@@ -50,6 +50,9 @@ export const ContextSwitcherTriggerButton = ({
       isSelected={isSelected}
       aria-label={CONTEXT_SWITCHER_BUTTON_ARIA_LABEL}
       data-test-subj="contextSwitcherTriggerButton"
+      css={css`
+        color: ${euiTheme.colors.textSubdued};
+      `}
     >
       <EuiIcon type={solutionIcon} size="m" aria-hidden={true} />
       <span
@@ -57,7 +60,7 @@ export const ContextSwitcherTriggerButton = ({
           padding-left: ${euiTheme.size.s};
         `}
       >
-        {spaceName}
+        {label}
       </span>
     </EuiButtonEmpty>
   );
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx b/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx
index ee7fd2ff280f9..4aebed4ec9caa 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/footer.tsx
@@ -9,10 +9,11 @@
 
 import React from 'react';
 import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
-import type { FooterAction } from './types';
+import { css } from '@emotion/react';
+import type { ActionConfig } from './types';
 
 export interface FooterProps {
-  readonly action?: FooterAction;
+  readonly action?: ActionConfig;
 }
 
 /**
@@ -21,8 +22,15 @@ export interface FooterProps {
 export const Footer = ({ action }: FooterProps) => {
   if (!action) return null;
 
+  const footerStyles = css`
+    && .euiListGroupItem__button:hover,
+    && .euiListGroupItem__button:focus {
+      text-decoration: none;
+    }
+  `;
+
   return (
-    <EuiListGroup gutterSize="none" flush>
+    <EuiListGroup gutterSize="none" flush css={footerStyles}>
       <EuiListGroupItem
         label={action.label}
         iconType={'plus'}
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx
index 578a263fc1a15..e02ce5b4397f6 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/selectable_list.tsx
@@ -119,8 +119,10 @@ export const SelectableList = ({
 
   const selectableStyles = css`
     /* no underline */
-    .euiSelectableListItem:hover .euiSelectableListItem__text,
-    .euiSelectableListItem.euiSelectableListItem-isFocused .euiSelectableListItem__text {
+    && .euiSelectableListItem:hover:not([aria-disabled='true']) .euiSelectableListItem__text,
+    &&
+      .euiSelectableListItem.euiSelectableListItem-isFocused:not([aria-disabled='true'])
+      .euiSelectableListItem__text {
       text-decoration: none;
     }
     /* blue background color and rounded corners */
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/types.ts b/src/platform/packages/shared/context-switcher-components/src/components/types.ts
index 9f15a3492cee9..48decf6f3dfd2 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/types.ts
+++ b/src/platform/packages/shared/context-switcher-components/src/components/types.ts
@@ -10,15 +10,15 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { IconType } from '@elastic/eui';
 
-export const POPOVER_WIDTH = 400;
+export const POPOVER_WIDTH = 360;
 export const SELECTABLE_ROW_HEIGHT = 40;
 export const CONTEXT_ROW_HEIGHT = 48;
 
 export interface SpaceItem {
   id: string;
   name: string;
-  /** Avatar or icon to display. */
-  avatar?: ReactElement;
+  /** Render function for the space avatar. Accepts EUI avatar size. */
+  avatar?: (size: 's' | 'l') => ReactElement;
   /** Optional solution badge or metadata shown alongside. */
   badge?: ReactNode;
   /** Solution name (e.g. "Security", "Observability"). Used to derive labels and icons. */
@@ -37,9 +37,9 @@ export interface ContextSwitcherSpacesConfig {
   /** Optional search config. */
   search?: { placeholder?: string; threshold?: number };
   /** Header action (e.g. "Manage" button). */
-  headerAction?: ReactNode;
+  headerAction?: ActionConfig;
   /** Footer action (e.g. "Create space"). */
-  footerAction?: FooterAction;
+  footerAction?: ActionConfig;
   isLoading?: boolean;
 }
 
@@ -50,7 +50,7 @@ export interface ContextSwitcherEnvironmentConfig {
   /** Submenu link items (e.g. "Manage project", "View all deployments"). */
   submenuItems: LinksListItem[];
   /** Submenu footer action (e.g. "Create project"). */
-  submenuFooterAction?: FooterAction;
+  submenuFooterAction?: ActionConfig;
 }
 
 export interface ContextSwitcherProps {
@@ -64,6 +64,8 @@ export interface ContextSwitcherProps {
   environmentContext?: ContextSwitcherEnvironmentConfig;
   /** Optional footer links (e.g. "Connection details", "Manage deployments"). */
   footerLinks?: LinksListItem[];
+  /** Called when the popover opens. */
+  onOpen?: () => void;
 }
 
 export interface LinksListItem {
@@ -77,7 +79,7 @@ export interface LinksListItem {
   ['data-test-subj']?: string;
 }
 
-export interface FooterAction {
+export interface ActionConfig {
   id: string;
   label: string;
   href?: string;
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx
index 0a1bef26385fb..9f026c527cf94 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/context_submenu.tsx
@@ -21,7 +21,7 @@ import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { LinksList } from '../links_list';
 import { Footer } from '../footer';
-import { type FooterAction, type LinksListItem } from '../types';
+import type { ActionConfig, LinksListItem } from '../types';
 
 const BACK_BUTTON_ARIA_LABEL = i18n.translate(
   'contextSwitcherComponents.contextSubmenuView.backButtonAriaLabel',
@@ -33,7 +33,7 @@ export interface ContextSubmenuViewProps {
   readonly title: ReactNode;
   readonly onBack: () => void;
   readonly items: ReadonlyArray<LinksListItem>;
-  readonly footerAction?: FooterAction;
+  readonly footerAction?: ActionConfig;
 }
 
 /**
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
index e3751955dbd8a..cfd5759b5c9e4 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
@@ -8,8 +8,9 @@
  */
 
 import React from 'react';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import {
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -29,7 +30,7 @@ import type {
 } from '../selectable_list';
 
 import { Footer } from '../footer';
-import { type FooterAction } from '../types';
+import type { ActionConfig } from '../types';
 
 const BACK_BUTTON_ARIA_LABEL = i18n.translate(
   'contextSwitcherComponents.spacesListView.backButtonAriaLabel',
@@ -40,13 +41,13 @@ const BACK_BUTTON_ARIA_LABEL = i18n.translate(
 export interface SpacesListViewProps {
   readonly id: string;
   readonly title: string;
-  readonly headerAction?: ReactNode;
+  readonly headerAction?: ActionConfig;
   readonly items: ReadonlyArray<SelectableListItem>;
   readonly search?: SelectableListSearchConfig;
   readonly isLoading?: boolean;
   readonly loadingMessage?: string;
   readonly noMatchesMessage?: ReactElement;
-  readonly footerAction?: FooterAction;
+  readonly footerAction?: ActionConfig;
   readonly onBack?: () => void;
   readonly onSelect: SelectableListProps['onSelect'];
 }
@@ -123,7 +124,17 @@ export const SpacesListView = ({
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>
-                {headerAction && <EuiFlexItem grow={false}>{headerAction}</EuiFlexItem>}
+                {headerAction && (
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      size="s"
+                      onClick={headerAction.onClick}
+                      data-test-subj={headerAction['data-test-subj']}
+                    >
+                      {headerAction.label}
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
+                )}
               </EuiFlexGroup>
 
               {searchNode && (
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx
new file mode 100644
index 0000000000000..aa30a9290983c
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import type { CloudStart } from '@kbn/cloud-plugin/public';
+import type { CoreStart } from '@kbn/core/public';
+import { QueryClient, QueryClientProvider } from '@kbn/react-query';
+
+import { ContextSwitcherComponent } from './context_switcher_component';
+import type { SpacesManager } from '../spaces_manager';
+
+export function initContextSwitcher(
+  spacesManager: SpacesManager,
+  core: CoreStart,
+  allowSolutionVisibility: boolean,
+  cloud?: CloudStart,
+  isServerless?: boolean
+) {
+  if (core.http.anonymousPaths.isAnonymous(window.location.pathname)) {
+    return;
+  }
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { staleTime: 0, networkMode: 'always' },
+    },
+  });
+
+  core.chrome.next.contextSwitcher.set(
+    <QueryClientProvider client={queryClient}>
+      <ContextSwitcherComponent
+        spacesManager={spacesManager}
+        core={core}
+        cloud={cloud}
+        isServerless={isServerless}
+        allowSolutionVisibility={allowSolutionVisibility}
+      />
+    </QueryClientProvider>
+  );
+}
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
new file mode 100644
index 0000000000000..c1a6e58bf7d0a
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+
+import type { CloudStart } from '@kbn/cloud-plugin/public';
+import {
+  ContextSwitcher,
+  type ContextSwitcherSpacesConfig,
+} from '@kbn/context-switcher-components';
+import type { CoreStart } from '@kbn/core/public';
+import { useQueryClient } from '@kbn/react-query';
+
+import { useActiveSpace } from './hooks/use_active_space';
+import { useEnvironmentContext } from './hooks/use_environment_context';
+import { useManagementActions } from './hooks/use_management_actions';
+import { useSpaceItems } from './hooks/use_space_items';
+import { addSpaceIdToPath, ENTER_SPACE_PATH } from '../../common';
+import { SPACES_QUERY_KEY, useSpaces } from '../nav_control/hooks/use_spaces';
+import type { SpacesManager } from '../spaces_manager';
+
+interface ContextSwitcherComponentProps {
+  spacesManager: SpacesManager;
+  core: CoreStart;
+  cloud?: CloudStart;
+  isServerless?: boolean;
+  allowSolutionVisibility: boolean;
+}
+
+export const ContextSwitcherComponent = ({
+  spacesManager,
+  core,
+  cloud,
+  isServerless,
+  allowSolutionVisibility,
+}: ContextSwitcherComponentProps) => {
+  const queryClient = useQueryClient();
+
+  const { data: spaces, isLoading } = useSpaces(spacesManager);
+  const activeSpace = useActiveSpace(spacesManager);
+
+  const { spaceItems, activeSpaceItem } = useSpaceItems({
+    spaces,
+    activeSpace,
+    isServerless,
+    allowSolutionVisibility,
+    serverlessProjectType: isServerless ? cloud?.serverless.projectType : undefined,
+  });
+
+  const environmentContext = useEnvironmentContext({
+    cloud,
+    http: core.http,
+    isServerless,
+  });
+
+  const managementActions = useManagementActions({
+    application: core.application,
+    canManageSpaces: core.application.capabilities.spaces?.manage === true,
+  });
+
+  const handleSpaceSelect = useCallback(
+    (spaceId: string) => {
+      const url = addSpaceIdToPath(core.http.basePath.serverBasePath, spaceId, ENTER_SPACE_PATH);
+      core.application.navigateToUrl(url);
+    },
+    [core]
+  );
+
+  const handleOpen = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: SPACES_QUERY_KEY });
+  }, [queryClient]);
+
+  const spacesConfig = useMemo((): ContextSwitcherSpacesConfig | undefined => {
+    if (!activeSpaceItem) return undefined;
+    return {
+      active: activeSpaceItem,
+      items: spaceItems,
+      onSelect: handleSpaceSelect,
+      ...managementActions,
+      isLoading,
+    };
+  }, [activeSpaceItem, handleSpaceSelect, isLoading, managementActions, spaceItems]);
+
+  if (!spacesConfig) return null;
+
+  return (
+    <ContextSwitcher
+      spaces={spacesConfig}
+      environmentContext={environmentContext}
+      onOpen={handleOpen}
+    />
+  );
+};
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts
new file mode 100644
index 0000000000000..da5b72dbb76c5
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { useActiveSpace } from './use_active_space';
+export { useEnvironmentContext } from './use_environment_context';
+export { useManagementActions } from './use_management_actions';
+export { useSpaceItems } from './use_space_items';
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_active_space.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_active_space.ts
new file mode 100644
index 0000000000000..e64b9d259452c
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_active_space.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEffect, useState } from 'react';
+
+import type { Space } from '../../../common';
+import type { SpacesManager } from '../../spaces_manager';
+
+export const useActiveSpace = (spacesManager: SpacesManager): Space | null => {
+  const [activeSpace, setActiveSpace] = useState<Space | null>(null);
+
+  useEffect(() => {
+    const sub = spacesManager.onActiveSpaceChange$.subscribe((space) => {
+      setActiveSpace(space);
+    });
+    return () => sub.unsubscribe();
+  }, [spacesManager]);
+
+  return activeSpace;
+};
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts
new file mode 100644
index 0000000000000..b07f19c879b65
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+import type { CloudStart } from '@kbn/cloud-plugin/public';
+import type {
+  ContextSwitcherEnvironmentConfig,
+  LinksListItem,
+} from '@kbn/context-switcher-components';
+import type { CoreStart } from '@kbn/core/public';
+import { i18n } from '@kbn/i18n';
+
+const FALLBACK_ENVIRONMENT_NAME: Record<'project' | 'deployment', string> = {
+  project: i18n.translate('xpack.spaces.contextSwitcher.environment.projectFallback', {
+    defaultMessage: 'Project',
+  }),
+  deployment: i18n.translate('xpack.spaces.contextSwitcher.environment.deploymentFallback', {
+    defaultMessage: 'Deployment',
+  }),
+};
+
+export const useEnvironmentContext = ({
+  cloud,
+  http,
+  isServerless,
+}: {
+  cloud?: CloudStart;
+  http: CoreStart['http'];
+  isServerless?: boolean;
+}): ContextSwitcherEnvironmentConfig | undefined => {
+  const isCloud = cloud?.isCloudEnabled ?? false;
+
+  const [environmentName, setEnvironmentName] = useState<string>(() =>
+    isServerless ? cloud?.serverless.projectName ?? '' : ''
+  );
+
+  useEffect(() => {
+    if (!isCloud || isServerless) return;
+
+    http
+      .get<{ resourceData?: { deployment?: { name?: string } } }>('/internal/cloud/solution', {
+        version: '1',
+      })
+      .then((response) => {
+        const name = response?.resourceData?.deployment?.name;
+        if (name) setEnvironmentName(name);
+      })
+      .catch(() => {});
+  }, [http, isCloud, isServerless]);
+
+  return useMemo((): ContextSwitcherEnvironmentConfig | undefined => {
+    if (!cloud || (!isCloud && !isServerless)) return undefined;
+
+    const environmentType = isServerless ? 'project' : 'deployment';
+    const name = environmentName || FALLBACK_ENVIRONMENT_NAME[environmentType];
+    const submenuItems: LinksListItem[] = [];
+
+    if (cloud.deploymentUrl) {
+      submenuItems.push({
+        id: 'manage',
+        label: isServerless
+          ? i18n.translate('xpack.spaces.contextSwitcher.manageProject', {
+              defaultMessage: 'Manage this project',
+            })
+          : i18n.translate('xpack.spaces.contextSwitcher.manageDeployment', {
+              defaultMessage: 'Manage this deployment',
+            }),
+        href: cloud.deploymentUrl,
+        iconType: 'gear',
+      });
+    }
+
+    const allUrl = isServerless ? cloud.projectsUrl : cloud.deploymentsUrl;
+
+    if (allUrl) {
+      submenuItems.push({
+        id: 'viewAll',
+        label: isServerless
+          ? i18n.translate('xpack.spaces.contextSwitcher.viewAllProjects', {
+              defaultMessage: 'View all projects',
+            })
+          : i18n.translate('xpack.spaces.contextSwitcher.viewAllDeployments', {
+              defaultMessage: 'View all deployments',
+            }),
+        href: allUrl,
+        iconType: 'grid',
+      });
+    }
+
+    return { environmentType, name, submenuItems };
+  }, [cloud, environmentName, isCloud, isServerless]);
+};
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_management_actions.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_management_actions.ts
new file mode 100644
index 0000000000000..6ff5d226d3bec
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_management_actions.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+
+import type { ContextSwitcherSpacesConfig } from '@kbn/context-switcher-components';
+import type { CoreStart } from '@kbn/core/public';
+import { i18n } from '@kbn/i18n';
+
+type Actions = Pick<ContextSwitcherSpacesConfig, 'headerAction' | 'footerAction'>;
+
+export const useManagementActions = ({
+  application,
+  canManageSpaces,
+}: {
+  application: CoreStart['application'];
+  canManageSpaces?: boolean;
+}): Partial<Actions> => {
+  return useMemo(
+    () =>
+      canManageSpaces
+        ? {
+            headerAction: {
+              id: 'manageSpaces',
+              label: i18n.translate('xpack.spaces.contextSwitcher.manage', {
+                defaultMessage: 'Manage',
+              }),
+              onClick: () => application.navigateToApp('management', { path: 'kibana/spaces' }),
+            },
+            footerAction: {
+              id: 'createSpace',
+              label: i18n.translate('xpack.spaces.contextSwitcher.createSpace', {
+                defaultMessage: 'Create space',
+              }),
+              onClick: () =>
+                application.navigateToApp('management', { path: 'kibana/spaces/create' }),
+            },
+          }
+        : {},
+    [application, canManageSpaces]
+  );
+};
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx
new file mode 100644
index 0000000000000..adba9ce1f254f
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiSkeletonCircle } from '@elastic/eui';
+import type { IconType } from '@elastic/eui';
+import React, { lazy, Suspense, useMemo } from 'react';
+
+import type { SpaceItem } from '@kbn/context-switcher-components';
+import { i18n } from '@kbn/i18n';
+
+import type { Space } from '../../../common';
+import { getSpaceAvatarComponent } from '../../space_avatar';
+import { SpaceSolutionBadge } from '../../space_solution_badge';
+
+const LazySpaceAvatar = lazy(() =>
+  getSpaceAvatarComponent().then((component) => ({ default: component }))
+);
+
+type SolutionKey = NonNullable<Space['solution']> | 'observability' | 'search';
+
+const ES_SOLUTION = {
+  iconType: 'logoElasticsearch' as const,
+  label: i18n.translate('xpack.spaces.solutionViewInfo.elasticsearch', {
+    defaultMessage: 'Elasticsearch',
+  }),
+};
+const OBS_SOLUTION = {
+  iconType: 'logoObservability' as const,
+  label: i18n.translate('xpack.spaces.solutionViewInfo.observability', {
+    defaultMessage: 'Observability',
+  }),
+};
+
+const SOLUTION_VIEW_INFO: Record<SolutionKey, { iconType: IconType; label: string }> = {
+  es: ES_SOLUTION,
+  oblt: OBS_SOLUTION,
+  search: ES_SOLUTION,
+  observability: OBS_SOLUTION,
+  workplaceai: {
+    iconType: 'logoElasticsearch',
+    label: i18n.translate('xpack.spaces.solutionViewInfo.workplaceai', {
+      defaultMessage: 'Workplace AI',
+    }),
+  },
+  security: {
+    iconType: 'logoSecurity',
+    label: i18n.translate('xpack.spaces.solutionViewInfo.security', {
+      defaultMessage: 'Security',
+    }),
+  },
+  classic: {
+    iconType: 'logoElasticStack',
+    label: i18n.translate('xpack.spaces.solutionViewInfo.classic', {
+      defaultMessage: 'Classic',
+    }),
+  },
+};
+
+const getSolutionViewInfo = (solution?: SolutionKey) => {
+  if (!solution || !SOLUTION_VIEW_INFO[solution]) return SOLUTION_VIEW_INFO.classic;
+  return SOLUTION_VIEW_INFO[solution];
+};
+
+export const useSpaceItems = ({
+  spaces,
+  activeSpace,
+  isServerless,
+  allowSolutionVisibility,
+  serverlessProjectType,
+}: {
+  spaces?: Space[];
+  activeSpace: Space | null;
+  isServerless?: boolean;
+  allowSolutionVisibility: boolean;
+  serverlessProjectType?: SolutionKey;
+}): { spaceItems: SpaceItem[]; activeSpaceItem?: SpaceItem } => {
+  const showSolution = allowSolutionVisibility && !isServerless;
+  const serverlessProjectSolutionInfo =
+    isServerless && serverlessProjectType ? getSolutionViewInfo(serverlessProjectType) : undefined;
+
+  const spaceItems = useMemo<SpaceItem[]>(
+    () =>
+      (spaces || []).map((space) => {
+        const solutionInfo = showSolution ? getSolutionViewInfo(space.solution) : undefined;
+
+        return {
+          id: space.id,
+          name: space.name,
+          avatar: (size) => (
+            <span>
+              <Suspense fallback={<EuiSkeletonCircle size={size} />}>
+                <LazySpaceAvatar space={space} size={size} />
+              </Suspense>
+            </span>
+          ),
+          badge: showSolution ? <SpaceSolutionBadge solution={space.solution} /> : undefined,
+          solution: solutionInfo?.label,
+          solutionIcon: solutionInfo?.iconType,
+        };
+      }),
+    [spaces, showSolution]
+  );
+
+  const activeSpaceItem = useMemo<SpaceItem | undefined>(() => {
+    if (!activeSpace) return undefined;
+
+    const activeItemFromSpacesList = spaceItems.find((s) => s.id === activeSpace.id);
+    const activeItemBase = activeItemFromSpacesList ?? {
+      id: activeSpace.id,
+      name: activeSpace.name,
+    };
+
+    // If serverless, force solution icon/label for the environment row avatar
+    if (serverlessProjectSolutionInfo) {
+      return {
+        ...activeItemBase,
+        solution: serverlessProjectSolutionInfo.label,
+        solutionIcon: serverlessProjectSolutionInfo.iconType,
+      };
+    }
+    const solutionInfo = showSolution ? getSolutionViewInfo(activeSpace.solution) : undefined;
+    return {
+      ...activeItemBase,
+      solution: solutionInfo?.label,
+      solutionIcon: solutionInfo?.iconType,
+    };
+  }, [activeSpace, spaceItems, showSolution, serverlessProjectSolutionInfo]);
+
+  return { spaceItems, activeSpaceItem };
+};
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/index.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/index.ts
new file mode 100644
index 0000000000000..1d3d05e415ea1
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { initContextSwitcher } from './context_switcher';
diff --git a/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx b/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx
index cf0e75c36125a..989d62e911e70 100644
--- a/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/nav_control.tsx
@@ -5,21 +5,16 @@
  * 2.0.
  */
 
-import { EuiSkeletonCircle, EuiSkeletonRectangle } from '@elastic/eui';
+import { EuiSkeletonRectangle } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
+import React, { lazy, Suspense } from 'react';
 
 import type { CoreStart } from '@kbn/core/public';
-import type { ChromeNextSpaceSelectorConfig } from '@kbn/core-chrome-browser';
 import { QueryClient, QueryClientProvider } from '@kbn/react-query';
 import { euiThemeVars } from '@kbn/ui-theme';
 
-import { SpacesMenu } from './components/spaces_menu';
-import { useSpaces } from './hooks/use_spaces';
-import type { Space } from '../../common';
 import type { EventTracker } from '../analytics';
 import type { ConfigType } from '../config';
-import { getSpaceAvatarComponent } from '../space_avatar';
 import type { SpacesManager } from '../spaces_manager';
 
 const LazyNavControlPopover = lazy(() =>
@@ -28,10 +23,6 @@ const LazyNavControlPopover = lazy(() =>
   }))
 );
 
-const LazySpaceAvatar = lazy(() =>
-  getSpaceAvatarComponent().then((component) => ({ default: component }))
-);
-
 export function initSpacesNavControl(
   spacesManager: SpacesManager,
   core: CoreStart,
@@ -47,17 +38,6 @@ export function initSpacesNavControl(
     },
   });
 
-  registerHeaderSpacesControl(spacesManager, core, config, eventTracker, queryClient);
-  registerSidenavSpacesControl(spacesManager, core, config, eventTracker, queryClient);
-}
-
-function registerHeaderSpacesControl(
-  spacesManager: SpacesManager,
-  core: CoreStart,
-  config: ConfigType,
-  eventTracker: EventTracker,
-  queryClient: QueryClient
-) {
   const SpacesNavControl = () => {
     if (core.http.anonymousPaths.isAnonymous(window.location.pathname)) {
       return null;
@@ -97,77 +77,3 @@ function registerHeaderSpacesControl(
     content: <SpacesNavControl />,
   });
 }
-
-function registerSidenavSpacesControl(
-  spacesManager: SpacesManager,
-  core: CoreStart,
-  config: ConfigType,
-  eventTracker: EventTracker,
-  queryClient: QueryClient
-) {
-  if (core.http.anonymousPaths.isAnonymous(window.location.pathname)) {
-    return;
-  }
-
-  const SidenavSpacesPopoverContent = ({ closePopover }: { closePopover: () => void }) => {
-    const [activeSpace, setActiveSpace] = useState<Space | null>(null);
-    const { data, isLoading } = useSpaces(spacesManager);
-
-    useEffect(() => {
-      const sub = spacesManager.onActiveSpaceChange$.subscribe((space) => {
-        setActiveSpace(space);
-      });
-      return () => sub.unsubscribe();
-    }, []);
-
-    const handleToggle = useCallback(() => {
-      closePopover();
-    }, [closePopover]);
-
-    return (
-      <SpacesMenu
-        id="sidenavSpacesMenuContent"
-        spaces={data || []}
-        serverBasePath={core.http.basePath.serverBasePath}
-        toggleSpaceSelector={handleToggle}
-        capabilities={core.application.capabilities}
-        navigateToApp={core.application.navigateToApp}
-        navigateToUrl={core.application.navigateToUrl}
-        activeSpace={activeSpace}
-        allowSolutionVisibility={config.allowSolutionVisibility}
-        eventTracker={eventTracker}
-        onClickManageSpaceBtn={handleToggle}
-        isLoading={isLoading}
-        width="100%"
-      />
-    );
-  };
-
-  const setConfig = (space: Space | null) => {
-    if (!space) {
-      core.chrome.next.spaceSelector.set(undefined);
-      return;
-    }
-
-    const selectorConfig: ChromeNextSpaceSelectorConfig = {
-      label: space.name,
-      renderAvatar: () => (
-        <Suspense fallback={<EuiSkeletonCircle size="s" />}>
-          <LazySpaceAvatar space={space} size="s" />
-        </Suspense>
-      ),
-      renderPopover: (closePopover) => (
-        <QueryClientProvider client={queryClient}>
-          <SidenavSpacesPopoverContent closePopover={closePopover} />
-        </QueryClientProvider>
-      ),
-    };
-
-    core.chrome.next.spaceSelector.set(selectorConfig);
-  };
-
-  // Subscription intentionally lives for the page lifetime — no teardown needed.
-  spacesManager.onActiveSpaceChange$.subscribe((space) => {
-    setConfig(space);
-  });
-}
diff --git a/x-pack/platform/plugins/shared/spaces/public/plugin.execution_context.test.ts b/x-pack/platform/plugins/shared/spaces/public/plugin.execution_context.test.ts
index 8631b7b9ba4a0..9e411ab7a228b 100644
--- a/x-pack/platform/plugins/shared/spaces/public/plugin.execution_context.test.ts
+++ b/x-pack/platform/plugins/shared/spaces/public/plugin.execution_context.test.ts
@@ -7,7 +7,9 @@
 
 import { BehaviorSubject } from 'rxjs';
 
+import { cloudMock } from '@kbn/cloud-plugin/public/mocks';
 import { coreMock } from '@kbn/core/public/mocks';
+import { featuresPluginMock } from '@kbn/features-plugin/public/mocks';
 
 import { SpacesPlugin } from './plugin';
 import { spacesManagerMock } from './spaces_manager/mocks';
@@ -34,7 +36,10 @@ describe('Spaces plugin - execution context synchronization', () => {
   );
 
   plugin.setup(coreSetup, {});
-  plugin.start(coreStart);
+  plugin.start(coreStart, {
+    features: featuresPluginMock.createStart(),
+    cloud: cloudMock.createStart(),
+  });
 
   beforeEach(() => {
     // Reset observable values
diff --git a/x-pack/platform/plugins/shared/spaces/public/plugin.test.ts b/x-pack/platform/plugins/shared/spaces/public/plugin.test.ts
index 40d6d7b39aa7c..33efa14776107 100644
--- a/x-pack/platform/plugins/shared/spaces/public/plugin.test.ts
+++ b/x-pack/platform/plugins/shared/spaces/public/plugin.test.ts
@@ -5,7 +5,9 @@
  * 2.0.
  */
 
+import { cloudMock } from '@kbn/cloud-plugin/public/mocks';
 import { coreMock } from '@kbn/core/public/mocks';
+import { featuresPluginMock } from '@kbn/features-plugin/public/mocks';
 import { homePluginMock } from '@kbn/home-plugin/public/mocks';
 import {
   createManagementSectionMock,
@@ -189,7 +191,10 @@ describe('Spaces plugin', () => {
       const plugin = new SpacesPlugin(mockInitializerContext);
       plugin.setup(coreSetup, {});
 
-      plugin.start(coreStart);
+      plugin.start(coreStart, {
+        features: featuresPluginMock.createStart(),
+        cloud: cloudMock.createStart(),
+      });
 
       expect(coreStart.chrome.navControls.registerLeft).toHaveBeenCalled();
     });
@@ -206,7 +211,10 @@ describe('Spaces plugin', () => {
       const plugin = new SpacesPlugin(mockInitializerContext);
       plugin.setup(coreSetup, {});
 
-      plugin.start(coreStart);
+      plugin.start(coreStart, {
+        features: featuresPluginMock.createStart(),
+        cloud: cloudMock.createStart(),
+      });
 
       expect(coreStart.chrome.navControls.registerLeft).not.toHaveBeenCalled();
     });
@@ -221,7 +229,10 @@ describe('Spaces plugin', () => {
         coreMock.createPluginInitializerContext({ maxSpaces: 1, allowSolutionVisibility: true })
       );
       const spacesSetup = plugin.setup(coreSetup, {});
-      const spacesStart = plugin.start(coreStart);
+      const spacesStart = plugin.start(coreStart, {
+        features: featuresPluginMock.createStart(),
+        cloud: cloudMock.createStart(),
+      });
 
       expect(spacesSetup.hasOnlyDefaultSpace).toBe(true);
       expect(spacesStart.hasOnlyDefaultSpace).toBe(true);
@@ -235,7 +246,10 @@ describe('Spaces plugin', () => {
         coreMock.createPluginInitializerContext({ maxSpaces: 1000, allowSolutionVisibility: true })
       );
       const spacesSetup = plugin.setup(coreSetup, {});
-      const spacesStart = plugin.start(coreStart);
+      const spacesStart = plugin.start(coreStart, {
+        features: featuresPluginMock.createStart(),
+        cloud: cloudMock.createStart(),
+      });
 
       expect(spacesSetup.hasOnlyDefaultSpace).toBe(false);
       expect(spacesStart.hasOnlyDefaultSpace).toBe(false);
@@ -251,7 +265,10 @@ describe('Spaces plugin', () => {
         coreMock.createPluginInitializerContext({ allowSolutionVisibility: true })
       );
       const spacesSetup = plugin.setup(coreSetup, {});
-      const spacesStart = plugin.start(coreStart);
+      const spacesStart = plugin.start(coreStart, {
+        features: featuresPluginMock.createStart(),
+        cloud: cloudMock.createStart(),
+      });
 
       expect(spacesSetup.isSolutionViewEnabled).toBe(true);
       expect(spacesStart.isSolutionViewEnabled).toBe(true);
@@ -266,7 +283,10 @@ describe('Spaces plugin', () => {
           coreMock.createPluginInitializerContext({ allowSolutionVisibility: false })
         );
         const spacesSetup = plugin.setup(coreSetup, {});
-        const spacesStart = plugin.start(coreStart);
+        const spacesStart = plugin.start(coreStart, {
+          features: featuresPluginMock.createStart(),
+          cloud: cloudMock.createStart(),
+        });
 
         expect(spacesSetup.isSolutionViewEnabled).toBe(false);
         expect(spacesStart.isSolutionViewEnabled).toBe(false);
diff --git a/x-pack/platform/plugins/shared/spaces/public/plugin.tsx b/x-pack/platform/plugins/shared/spaces/public/plugin.tsx
index 57c647e27fe0b..25c342bc65384 100644
--- a/x-pack/platform/plugins/shared/spaces/public/plugin.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/plugin.tsx
@@ -17,6 +17,7 @@ import type { SecurityPluginSetup, SecurityPluginStart } from '@kbn/security-plu
 
 import { EventTracker, registerAnalyticsContext, registerSpacesEventTypes } from './analytics';
 import type { ConfigType } from './config';
+import { initContextSwitcher } from './context_switcher';
 import { createSpacesFeatureCatalogueEntry } from './create_feature_catalogue_entry';
 import { ManagementService } from './management';
 import { initSpacesNavControl } from './nav_control';
@@ -48,7 +49,9 @@ export type SpacesPluginSetup = ReturnType<SpacesPlugin['setup']>;
  */
 export type SpacesPluginStart = ReturnType<SpacesPlugin['start']>;
 
-export class SpacesPlugin implements Plugin<SpacesPluginSetup, SpacesPluginStart> {
+export class SpacesPlugin
+  implements Plugin<SpacesPluginSetup, SpacesPluginStart, PluginsSetup, PluginsStart>
+{
   private spacesManager!: SpacesManager;
   private spacesApi!: SpacesApi;
   private eventTracker!: EventTracker;
@@ -178,11 +181,18 @@ export class SpacesPlugin implements Plugin<SpacesPluginSetup, SpacesPluginStart
     return { hasOnlyDefaultSpace, isSolutionViewEnabled: this.config.allowSolutionVisibility };
   }
 
-  public start(core: CoreStart) {
+  public start(core: CoreStart, plugins: PluginsStart) {
     // Only skip spaces navigation if serverless and only one space is allowed
     if (!(this.isServerless && this.config.maxSpaces === 1)) {
       initSpacesNavControl(this.spacesManager, core, this.config, this.eventTracker);
     }
+    initContextSwitcher(
+      this.spacesManager,
+      core,
+      this.config.allowSolutionVisibility,
+      plugins.cloud,
+      this.isServerless
+    );
 
     return this.spacesApi;
   }
diff --git a/x-pack/platform/plugins/shared/spaces/tsconfig.json b/x-pack/platform/plugins/shared/spaces/tsconfig.json
index 3596d26ea0d2d..f97566d661a00 100644
--- a/x-pack/platform/plugins/shared/spaces/tsconfig.json
+++ b/x-pack/platform/plugins/shared/spaces/tsconfig.json
@@ -64,6 +64,7 @@
     "@kbn/cps-common",
     "@kbn/cps-utils",
     "@kbn/tour-queue",
+    "@kbn/context-switcher-components",
   ],
   "exclude": ["target/**/*"]
 }

From f961a76e582aa83df0bcc0be8ef975e59e11d661 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 6 May 2026 11:47:35 +0200
Subject: [PATCH 45/77] [DoNotReview/FeatureBranch] Add Chrome Next app header
 migration APIs (#267691)

## Summary

Introduces the Chrome Next app header migration path through
`@kbn/app-header`, including inline rendering with `AppHeader` and
Chrome-owned transitional registration with
`ChromeAppHeaderRegistration`.

- Adds the shared app header rendering stack, config types, registration
hook, and package-level migration guidance.
- Wires Chrome-owned app header registration into Dashboard and Discover
while preserving legacy badge/menu behavior during migration.
- Preserves badge parity for custom/read-only/managed badges and classic
fallback behavior for migrated pages such as Index Management.

## Review Focus

- `ChromeAppHeaderRegistration` should be the preferred React API for
Chrome-owned transitional pages like Dashboard and Discover.
- `useChromeAppHeaderRegistration` is public but lower-level, intended
for custom wrappers.
- `chrome.next.appHeader.set` remains the imperative Core primitive
behind the React APIs, not the preferred app-facing integration.
- Fallback-only routes are only a compatibility safety net because
Chrome Next project layout does not render classic breadcrumbs; fallback
back buttons depend on existing breadcrumb correctness.

## Risk

The main risk is migration parity: missing or stale legacy
breadcrumbs/badges could produce incomplete fallback headers for routes
that have not explicitly migrated. This PR mitigates that by preserving
legacy badge/menu fallbacks and documenting fallback-only routes as
audit targets.
---
 package.json                                  |   1 +
 src/core/packages/chrome/app-header/README.md |  95 +++++
 .../app_header => app-header}/index.ts        |  13 +-
 .../packages/chrome/app-header/kibana.jsonc   |   7 +
 src/core/packages/chrome/app-header/moon.yml  |  38 ++
 .../packages/chrome/app-header/package.json   |   7 +
 .../src}/app_header/app_badge.stories.tsx     |   4 +-
 .../src}/app_header/app_badge.tsx             |  14 +-
 .../src}/app_header/app_badges.tsx            |  15 +-
 .../app-header/src/app_header/app_header.tsx  |  85 +++++
 .../src}/app_header/app_header_shell.tsx      |  92 +++--
 .../src}/app_header/app_menu.tsx              |  17 +-
 .../app-header/src/app_header/app_tabs.tsx    |  32 ++
 .../src}/app_header/back_button.tsx           |  23 +-
 .../chrome_app_header_registration.tsx        |  54 +++
 .../app-header/src/app_header/hooks/chrome.ts |  27 ++
 .../src/app_header/hooks/index.ts}            |  12 +-
 .../src}/app_header/hooks/use_app_badges.ts   |  25 +-
 .../app_header/hooks/use_app_header_menu.ts   |  52 ++-
 .../app_header/hooks/use_back_navigation.ts   |  43 +++
 .../src/app_header}/index.ts                  |  10 +-
 .../src/app_header/legacy_action_menu.tsx     |  38 ++
 .../src/app_header/title_actions.tsx}         |  34 +-
 .../src}/app_header/title_area.tsx            |  15 +-
 .../src/app_header_with_fallback.tsx          |  77 ++++
 .../packages/chrome/app-header/src/index.ts   |  22 ++
 .../packages/chrome/app-header/src/types.ts   |  31 ++
 .../packages/chrome/app-header/tsconfig.json  |  18 +
 .../chrome/browser-components/index.ts        |  18 +-
 .../chrome/browser-components/moon.yml        |   3 +-
 .../src/chrome_next/app_header/app_title.tsx  |  46 ---
 .../app_header/hooks/use_back_button.ts       |  74 ----
 .../hooks/use_report_top_bar_height.ts        |  61 ---
 .../src/chrome_next/index.ts                  |   2 -
 .../src/project/chrome_app_header.tsx         | 147 +++++++
 .../browser-components/src/project/index.ts   |   1 +
 .../src/shared/chrome_hooks.ts                |  49 ++-
 .../src/shared/header_action_menu.tsx         |   4 +-
 .../chrome/browser-components/tsconfig.json   |   3 +-
 .../chrome/browser-internal-types/index.ts    |  19 +-
 .../chrome/browser-internal-types/moon.yml    |   2 +
 .../browser-internal-types/tsconfig.json      |   2 +
 .../packages/chrome/browser-internal/moon.yml |   1 +
 .../browser-internal/src/chrome_api.tsx       |  43 ++-
 .../browser-internal/src/chrome_service.tsx   |  14 +-
 .../next_header/next_header_service.ts        |  53 ---
 .../src/side_effects/app_change_handler.ts    |  10 +-
 .../src/state/chrome_state.ts                 |  13 +
 .../chrome/browser-internal/tsconfig.json     |   1 +
 .../packages/chrome/browser-mocks/moon.yml    |   1 +
 .../browser-mocks/src/chrome_service.mock.ts  |  57 +--
 .../chrome/browser-mocks/tsconfig.json        |   3 +-
 src/core/packages/chrome/browser/index.ts     |  19 +-
 .../browser/src/chrome_next/chrome_next.ts    |  94 ++++-
 .../chrome/browser/src/chrome_next/header.ts  | 167 --------
 .../chrome/browser/src/chrome_next/index.ts   |  19 +-
 src/core/packages/chrome/browser/src/index.ts |  24 +-
 .../layouts/grid/grid_layout.tsx              |  11 +-
 .../plugins/shared/dashboard/moon.yml         |   1 +
 .../internal_dashboard_top_nav.tsx            |  45 +--
 .../plugins/shared/dashboard/tsconfig.json    |   4 +-
 src/platform/plugins/shared/discover/moon.yml |   1 +
 .../application/context/context_app.tsx       |   7 +
 .../public/application/doc/components/doc.tsx |  13 +-
 .../components/layout/discover_layout.tsx     |   1 +
 .../single_tab_view_with_app_menu.tsx         |  11 +-
 .../components/tabs_view/hide_tabs_bar.tsx    |   9 -
 .../main/components/tabs_view/tabs_view.tsx   |  11 +-
 .../application/main/discover_main_route.tsx  |  17 +-
 .../discover_app_header.tsx}                  |  25 +-
 .../components/discover_app_header}/index.ts  |   3 +-
 .../plugins/shared/discover/tsconfig.json     |   1 +
 .../shared/management/public/plugin.tsx       |   5 +-
 tsconfig.base.json                            |   2 +
 .../plugins/shared/index_management/moon.yml  |   2 +
 .../component_template_create.tsx             |  35 +-
 .../component_template_edit.tsx               |  25 +-
 .../application/components/page_header.tsx    |   8 +
 .../template_form/template_form.tsx           |  16 +-
 .../enrich_policy_create.tsx                  |  83 ++--
 .../public/application/sections/home/home.tsx | 142 ++++---
 .../details_page/details_page_content.tsx     | 224 +++++++----
 .../details_page/use_manage_index_menu.tsx    | 361 ++++++++++++++++++
 .../template_clone/template_clone.tsx         |  12 +-
 .../template_create/template_create.tsx       |  20 +-
 .../sections/template_edit/template_edit.tsx  |  12 +-
 .../shared/index_management/tsconfig.json     |   2 +
 .../platform/plugins/shared/spaces/moon.yml   |   1 +
 yarn.lock                                     |   4 +
 89 files changed, 1962 insertions(+), 1003 deletions(-)
 create mode 100644 src/core/packages/chrome/app-header/README.md
 rename src/core/packages/chrome/{browser-components/src/chrome_next/app_header => app-header}/index.ts (55%)
 create mode 100644 src/core/packages/chrome/app-header/kibana.jsonc
 create mode 100644 src/core/packages/chrome/app-header/moon.yml
 create mode 100644 src/core/packages/chrome/app-header/package.json
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/app_badge.stories.tsx (97%)
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/app_badge.tsx (88%)
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/app_badges.tsx (88%)
 create mode 100644 src/core/packages/chrome/app-header/src/app_header/app_header.tsx
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/app_header_shell.tsx (64%)
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/app_menu.tsx (68%)
 create mode 100644 src/core/packages/chrome/app-header/src/app_header/app_tabs.tsx
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/back_button.tsx (82%)
 create mode 100644 src/core/packages/chrome/app-header/src/app_header/chrome_app_header_registration.tsx
 create mode 100644 src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts
 rename src/core/packages/chrome/{browser-components/src/chrome_next/app_header/hooks/use_title.ts => app-header/src/app_header/hooks/index.ts} (54%)
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/hooks/use_app_badges.ts (69%)
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/hooks/use_app_header_menu.ts (72%)
 create mode 100644 src/core/packages/chrome/app-header/src/app_header/hooks/use_back_navigation.ts
 rename src/core/packages/chrome/{browser-components/src/chrome_next/app_header/hooks => app-header/src/app_header}/index.ts (65%)
 create mode 100644 src/core/packages/chrome/app-header/src/app_header/legacy_action_menu.tsx
 rename src/core/packages/chrome/{browser-components/src/chrome_next/app_header/global_actions.tsx => app-header/src/app_header/title_actions.tsx} (67%)
 rename src/core/packages/chrome/{browser-components/src/chrome_next => app-header/src}/app_header/title_area.tsx (79%)
 create mode 100644 src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
 create mode 100644 src/core/packages/chrome/app-header/src/index.ts
 create mode 100644 src/core/packages/chrome/app-header/src/types.ts
 create mode 100644 src/core/packages/chrome/app-header/tsconfig.json
 delete mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx
 delete mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
 delete mode 100644 src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts
 create mode 100644 src/core/packages/chrome/browser-components/src/project/chrome_app_header.tsx
 delete mode 100644 src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
 delete mode 100644 src/core/packages/chrome/browser/src/chrome_next/header.ts
 rename src/{core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx => platform/plugins/shared/discover/public/components/discover_app_header/discover_app_header.tsx} (50%)
 rename src/{core/packages/chrome/browser-internal/src/services/next_header => platform/plugins/shared/discover/public/components/discover_app_header}/index.ts (78%)
 create mode 100644 x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
 create mode 100644 x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx

diff --git a/package.json b/package.json
index 25a60be92ac90..05e033748f285 100644
--- a/package.json
+++ b/package.json
@@ -246,6 +246,7 @@
     "@kbn/apm-types-shared": "link:src/platform/packages/shared/kbn-apm-types-shared",
     "@kbn/apm-ui-shared": "link:src/platform/packages/shared/kbn-apm-ui-shared",
     "@kbn/apm-utils": "link:src/platform/packages/shared/kbn-apm-utils",
+    "@kbn/app-header": "link:src/core/packages/chrome/app-header",
     "@kbn/app-link-test-plugin": "link:src/platform/test/plugin_functional/plugins/app_link_test",
     "@kbn/application-usage-test-plugin": "link:x-pack/platform/test/usage_collection/plugins/application_usage_test",
     "@kbn/as-code-data-views-schema": "link:src/platform/packages/shared/as-code/data-views-schema",
diff --git a/src/core/packages/chrome/app-header/README.md b/src/core/packages/chrome/app-header/README.md
new file mode 100644
index 0000000000000..3afe7b331aaa5
--- /dev/null
+++ b/src/core/packages/chrome/app-header/README.md
@@ -0,0 +1,95 @@
+# @kbn/app-header
+
+React APIs for rendering and registering Kibana app headers during the Chrome Next migration.
+
+Chrome Next moves app header rendering toward one shared visual system while allowing two placement
+models:
+
+- App-owned inline rendering, where the page renders `AppHeader` in its own React tree.
+- Chrome-owned top-bar rendering, where the app registers an `AppHeaderConfig` and Chrome renders it
+  in the layout's `applicationTopBar` slot.
+
+The inline model is the preferred destination. Chrome-owned registration is a transitional path for
+apps whose existing layout makes inline placement risky or expensive.
+
+## Which API should I use?
+
+Use `AppHeader` when the page can render its header inline in the app's React tree. This is the preferred long-term model for pages that own their title, back target, tabs, badges, and app menu locally. `AppHeader` also handles the classic `EuiPageHeader` fallback when Chrome Next is disabled.
+
+Use `ChromeAppHeaderRegistration` for app/plugin React integration when Chrome should own the top-bar slot. This is the right transitional API for pages like Dashboard and Discover, where Chrome-owned placement keeps the migration small while still using the shared `AppHeaderView` rendering stack.
+
+Use `useChromeAppHeaderRegistration` for lower-level custom wrappers that need to compose registration with other hooks. Most apps should prefer `ChromeAppHeaderRegistration` over calling this hook directly.
+
+Use `chrome.next.appHeader.set` as the core imperative primitive behind React adapters. It is not the preferred app-facing React API.
+
+## Chrome Next flag and runtime checks
+
+Chrome Next is gated by the feature flag key `core.chrome.next`, exported as
+`NEXT_CHROME_FEATURE_FLAG_KEY` from `@kbn/core-chrome-feature-flags`.
+
+Chrome layout code should use `isNextChrome(featureFlags)` from `@kbn/core-chrome-feature-flags` to
+decide which layout slots are active.
+
+App-facing React code usually does not need to read the flag directly. Use the `@kbn/app-header`
+components and hooks so the package can handle runtime behavior consistently. Internally,
+`ChromeAppHeaderRegistration` only registers when Chrome Next is enabled and the active chrome style
+is project:
+
+```ts
+chrome.next.isEnabled && chrome.getChromeStyle() === 'project';
+```
+
+When this condition is false, registration is a no-op and the existing classic/project Chrome paths
+continue to own the header area.
+
+## Migration guidance
+
+Migrate route-by-route, not necessarily app-by-app. Different routes in the same plugin can use
+different buckets while the migration is in progress:
+
+| Bucket | Preferred API | When to use |
+|---|---|---|
+| Inline-ready | `AppHeader` | The page can colocate header state with its React tree and can use the built-in classic fallback. |
+| Chrome-driven transitional | `ChromeAppHeaderRegistration` | Chrome should own the top-bar slot, usually because the route still has sticky or shared top-nav layout constraints. |
+| Fallback-only audit | Legacy Chrome state | Temporary safety net for routes that have not explicitly migrated yet. Plan an inline or transitional migration before relying on this long term. |
+
+### Fallback-only audit
+
+Chrome Next in project layout does not render the classic breadcrumbs UI. For unmigrated routes,
+Chrome can still render a minimal app header as a fallback by deriving:
+
+- A back button from the closest usable breadcrumb.
+- A menu from `chrome.setAppMenu()` or a legacy `chrome.setHeaderActionMenu()` mount point.
+- Badges from legacy badge state when fallback header content is already present.
+
+This is only a compatibility fallback, not a migration target. If the route's breadcrumbs are
+missing, stale, or point to the wrong parent, the fallback back button will inherit the same problem.
+Routes in this bucket should be audited and moved to explicit `AppHeader` or
+`ChromeAppHeaderRegistration` configuration.
+
+## Examples
+
+```tsx
+import { ChromeAppHeaderRegistration } from '@kbn/app-header';
+
+export const ExampleHeaderRegistration = ({ title, menu }) => (
+  <ChromeAppHeaderRegistration title={title} menu={menu} />
+);
+```
+
+```tsx
+import { useMemo } from 'react';
+import { useChromeAppHeaderRegistration } from '@kbn/app-header';
+
+export const useExampleHeaderRegistration = ({ title, menu }) => {
+  const config = useMemo(() => ({ title, menu }), [title, menu]);
+
+  useChromeAppHeaderRegistration(config);
+};
+```
+
+```tsx
+import { isNextChrome } from '@kbn/core-chrome-feature-flags';
+
+const nextChromeEnabled = isNextChrome(featureFlags);
+```
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/index.ts b/src/core/packages/chrome/app-header/index.ts
similarity index 55%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/index.ts
rename to src/core/packages/chrome/app-header/index.ts
index d5fd4180431f8..27be0c4fe0a47 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/index.ts
+++ b/src/core/packages/chrome/app-header/index.ts
@@ -7,6 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { AppHeader } from './app_header';
-export { AppHeaderShell } from './app_header_shell';
-export type { AppHeaderShellProps } from './app_header_shell';
+export { AppHeaderWithFallback as AppHeader } from './src';
+export { AppHeaderView, ChromeAppHeaderRegistration, useChromeAppHeaderRegistration } from './src';
+export type { AppHeaderViewProps, AppHeaderConfig } from './src';
+export type {
+  AppHeaderWithFallbackProps as AppHeaderProps,
+  AppHeaderBack,
+  AppHeaderBadge,
+  AppHeaderTab,
+  AppHeaderMenu,
+} from './src';
diff --git a/src/core/packages/chrome/app-header/kibana.jsonc b/src/core/packages/chrome/app-header/kibana.jsonc
new file mode 100644
index 0000000000000..951a925ceadc5
--- /dev/null
+++ b/src/core/packages/chrome/app-header/kibana.jsonc
@@ -0,0 +1,7 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/app-header",
+  "owner": "@elastic/appex-sharedux",
+  "group": "platform",
+  "visibility": "shared"
+}
diff --git a/src/core/packages/chrome/app-header/moon.yml b/src/core/packages/chrome/app-header/moon.yml
new file mode 100644
index 0000000000000..6460f2059cf85
--- /dev/null
+++ b/src/core/packages/chrome/app-header/moon.yml
@@ -0,0 +1,38 @@
+# This file is generated by the @kbn/moon package. Any manual edits will be erased!
+#  To extend this, write your extensions/overrides to 'moon.extend.yml'
+#  then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/app-header'
+
+$schema: https://moonrepo.dev/schemas/project.json
+id: '@kbn/app-header'
+layer: unknown
+owners:
+  defaultOwner: '@elastic/appex-sharedux'
+toolchains:
+  default: node
+language: typescript
+project:
+  title: '@kbn/app-header'
+  description: Moon project for @kbn/app-header
+  channel: ''
+  owner: '@elastic/appex-sharedux'
+  sourceRoot: src/core/packages/chrome/app-header
+dependsOn:
+  - '@kbn/core-chrome-app-menu-components'
+  - '@kbn/core-chrome-browser'
+  - '@kbn/core-chrome-browser-context'
+  - '@kbn/core-http-browser'
+  - '@kbn/core-mount-utils-browser'
+  - '@kbn/i18n'
+  - '@kbn/use-observable'
+tags:
+  - shared-browser
+  - package
+  - prod
+  - group-platform
+  - shared
+fileGroups:
+  src:
+    - '**/*.ts'
+    - '**/*.tsx'
+    - '!target/**/*'
+tasks: {}
diff --git a/src/core/packages/chrome/app-header/package.json b/src/core/packages/chrome/app-header/package.json
new file mode 100644
index 0000000000000..260a75d4d5291
--- /dev/null
+++ b/src/core/packages/chrome/app-header/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/app-header",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx b/src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx
similarity index 97%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx
rename to src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx
index 3c9748c4e7eb0..a91f137718e41 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.stories.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx
@@ -20,14 +20,14 @@ import {
   EuiPopover,
   EuiTitle,
 } from '@elastic/eui';
-import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
+import type { AppHeaderBadge } from '../types';
 import { AppBadge } from './app_badge';
 
 const MAX_VISIBLE_BADGES = 2;
 
 interface AppBadgeStoryProps {
   title: string;
-  badges: ChromeNextHeaderBadge[];
+  badges: AppHeaderBadge[];
 }
 
 const HeaderWithBadges = ({ title, badges }: AppBadgeStoryProps) => {
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx b/src/core/packages/chrome/app-header/src/app_header/app_badge.tsx
similarity index 88%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
rename to src/core/packages/chrome/app-header/src/app_header/app_badge.tsx
index 3e72eddad0ce3..cb863d9ac4484 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_badge.tsx
@@ -13,18 +13,15 @@ import type {
   EuiContextMenuPanelDescriptor,
   EuiContextMenuPanelItemDescriptor,
 } from '@elastic/eui';
-import type {
-  ChromeNextHeaderBadge,
-  ChromeNextHeaderBadgeMenuItem,
-} from '@kbn/core-chrome-browser/src';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import type { AppHeaderBadge, AppHeaderBadgeItem } from '../types';
 
 /**
  * Recursively builds flat EuiContextMenu panels from nested badge menu items.
  */
 const buildPanels = (
-  items: ChromeNextHeaderBadgeMenuItem[],
+  items: AppHeaderBadgeItem[],
   panelId: number,
   width?: number,
   title?: string
@@ -65,16 +62,15 @@ const useBadgeStyle = () => {
   }, []);
 };
 
-export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
+export const AppBadge = ({ badge }: { badge: AppHeaderBadge }) => {
   const { badge: badgeStyle } = useBadgeStyle();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const closePopover = useCallback(() => setIsPopoverOpen(false), []);
   const togglePopover = useCallback(() => setIsPopoverOpen((open) => !open), []);
 
-  // @ts-expect-error supported for backward compatibility. TODO: Remove it
   if (badge?.renderCustomBadge) {
-    // @ts-expect-error supported for backward compatibility. TODO: Remove it
+    // TODO: Remove custom JSX badge rendering once apps migrate custom badges to structured config.
     return badge.renderCustomBadge({ badgeText: badge.label });
   }
 
@@ -126,7 +122,7 @@ export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
       >
         <EuiContextMenu
           initialPanelId={0}
-          panels={buildPanels(badge.items, 0, badge.popoverWidth)}
+          panels={buildPanels(badge.items!, 0, badge.popoverWidth)}
         />
       </EuiPopover>
     );
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx b/src/core/packages/chrome/app-header/src/app_header/app_badges.tsx
similarity index 88%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
rename to src/core/packages/chrome/app-header/src/app_header/app_badges.tsx
index a195239ef0f0a..84019a9d49de1 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_badges.tsx
@@ -11,8 +11,9 @@ import React, { memo, useMemo, useState } from 'react';
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiPopover, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import type { AppHeaderBadge } from '../types';
 import { AppBadge } from './app_badge';
-import { useAppBadges } from './hooks/use_app_badges';
+import { useResolvedBadges } from './hooks';
 
 const MAX_VISIBLE_BADGES = 2;
 
@@ -23,10 +24,6 @@ const useBadgesStyle = () => {
     const badgesContainer = css`
       margin-left: ${euiTheme.size.s};
 
-      /* Deprecated renderCustomBadge items may return null at runtime,
-         leaving empty EuiFlexItem wrappers in the DOM. Hide the container
-         when none of its children have visible content to avoid a stale
-         margin-left gap next to the title. */
       &:not(:has(.euiFlexItem:not(:empty))) {
         display: none;
       }
@@ -36,8 +33,12 @@ const useBadgesStyle = () => {
   }, [euiTheme]);
 };
 
-export const AppBadges = memo(() => {
-  const badges = useAppBadges();
+export interface AppBadgesProps {
+  badges?: AppHeaderBadge[];
+}
+
+export const AppBadges = memo<AppBadgesProps>(({ badges: propBadges }) => {
+  const badges = useResolvedBadges(propBadges);
   const { badgesContainer } = useBadgesStyle();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
new file mode 100644
index 0000000000000..c6624810cc975
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ReactNode } from 'react';
+import React, { useLayoutEffect } from 'react';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import type { AppHeaderBack, AppHeaderBadge, AppHeaderPadding, AppHeaderTab } from '../types';
+import { useHasLegacyActionMenu } from './hooks/chrome';
+import { AppHeaderShell } from './app_header_shell';
+import { AppBadges } from './app_badges';
+import { AppTabs } from './app_tabs';
+import { TitleArea } from './title_area';
+import { TitleActions } from './title_actions';
+import { AppMenu } from './app_menu';
+import { useShareAction } from './hooks';
+
+export interface AppHeaderViewProps {
+  title?: string;
+  back?: AppHeaderBack | AppHeaderBack[];
+  tabs?: AppHeaderTab[];
+  badges?: AppHeaderBadge[];
+  menu?: AppMenuConfig;
+  onShare?: () => void;
+  favorite?: ReactNode;
+  sticky?: boolean;
+  padding?: AppHeaderPadding;
+}
+
+export const AppHeaderView = React.memo<AppHeaderViewProps>(
+  ({ title, back, tabs, badges, menu, onShare, favorite, sticky, padding }) => {
+    const hasLegacyActionMenu = useHasLegacyActionMenu();
+    const shareAction = useShareAction(menu, onShare);
+    const show =
+      title !== undefined ||
+      back !== undefined ||
+      !!tabs?.length ||
+      !!badges?.length ||
+      !!menu?.items?.length ||
+      hasLegacyActionMenu;
+
+    if (!show) {
+      return null;
+    }
+
+    return (
+      <AppHeaderShell
+        title={<TitleArea title={title} back={back} />}
+        badges={<AppBadges badges={badges} />}
+        titleActions={<TitleActions shareAction={shareAction} favorite={favorite} />}
+        trailing={<AppMenu menu={menu} hasExplicitShare={!!onShare} />}
+        tabs={<AppTabs tabs={tabs} />}
+        sticky={sticky}
+        padding={padding}
+      />
+    );
+  }
+);
+
+AppHeaderView.displayName = 'AppHeaderView';
+
+export interface AppHeaderProps extends Omit<AppHeaderViewProps, 'back'> {
+  title: string;
+  back?: string | AppHeaderBack;
+}
+
+export const AppHeader = React.memo<AppHeaderProps>(({ back, ...rest }) => {
+  const chrome = useChromeService();
+  useLayoutEffect(() => {
+    chrome.next.inlineAppHeader.set(true);
+    return () => chrome.next.inlineAppHeader.set(false);
+  }, [chrome]);
+
+  const resolvedBack = typeof back === 'string' ? { href: back } : back;
+
+  return <AppHeaderView {...rest} back={resolvedBack} />;
+});
+
+AppHeader.displayName = 'AppHeader';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx
similarity index 64%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
rename to src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx
index df76c27b63b87..e866a1b67aa17 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header_shell.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx
@@ -11,31 +11,77 @@ import type { ReactNode } from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
-import { useReportTopBarHeight } from './hooks';
+import type { AppHeaderPadding } from '../types';
 
-const APPLICATION_TOP_BAR_MIN_HEIGHT_PX = 48;
+export const APPLICATION_TOP_BAR_MIN_HEIGHT_PX = 48;
 
 export interface AppHeaderShellProps {
   title?: ReactNode;
   badges?: ReactNode;
   titleActions?: ReactNode;
   trailing?: ReactNode;
-  metadata?: ReactNode;
-  callout?: ReactNode;
   tabs?: ReactNode;
+  sticky?: boolean;
+  padding?: AppHeaderPadding;
 }
 
-const useHeaderStyles = () => {
+const resolveLayoutProps = (
+  sticky: boolean,
+  padding: AppHeaderPadding | undefined,
+  euiTheme: ReturnType<typeof useEuiTheme>['euiTheme']
+) => {
+  const resolved = padding ?? (sticky ? 'm' : 'none');
+
+  if (resolved === 'none') {
+    return { paddingInline: undefined, bleedMargin: undefined };
+  }
+
+  if (resolved === 'm') {
+    return { paddingInline: euiTheme.size.m, bleedMargin: undefined };
+  }
+
+  const bleedMargin = resolved.bleed === 'l' ? euiTheme.size.l : euiTheme.size.m;
+  const size = resolved.size ?? resolved.bleed;
+
+  let paddingInline: string | undefined;
+  if (size === 'l') {
+    paddingInline = euiTheme.size.l;
+  } else if (size === 'm') {
+    paddingInline = euiTheme.size.m;
+  }
+
+  return { paddingInline, bleedMargin };
+};
+
+const useHeaderStyles = (sticky: boolean, padding: AppHeaderPadding | undefined) => {
   const { euiTheme } = useEuiTheme();
 
   return useMemo(() => {
+    const { paddingInline, bleedMargin } = resolveLayoutProps(sticky, padding, euiTheme);
+
     const root = css`
+      ${sticky &&
+      css`
+        position: sticky;
+        top: 0;
+        z-index: ${euiTheme.levels.mask};
+      `}
+      flex-shrink: 0;
       display: flex;
       flex-direction: column;
       min-width: 0;
       min-height: ${APPLICATION_TOP_BAR_MIN_HEIGHT_PX}px;
       box-sizing: border-box;
-      padding: 0 ${euiTheme.size.m};
+      padding: 0;
+      ${paddingInline &&
+      css`
+        padding-inline: ${paddingInline};
+      `}
+      ${bleedMargin &&
+      css`
+        margin-inline: -${bleedMargin};
+        margin-top: -${bleedMargin};
+      `}
       background: ${euiTheme.colors.backgroundBasePlain};
       border-bottom: ${euiTheme.border.thin};
       margin-bottom: -${euiTheme.border.width.thin};
@@ -76,17 +122,6 @@ const useHeaderStyles = () => {
       min-width: 0;
     `;
 
-    const metadataRow = css`
-      display: flex;
-      align-items: center;
-      gap: ${euiTheme.size.s};
-      padding-bottom: ${euiTheme.size.s};
-    `;
-
-    const calloutRow = css`
-      padding-bottom: ${euiTheme.size.s};
-    `;
-
     const tabsRow = css`
       display: flex;
       align-items: stretch;
@@ -109,20 +144,17 @@ const useHeaderStyles = () => {
       titleGroup,
       titleClusterSpacer,
       titleActionsReveal,
-      metadataRow,
-      calloutRow,
       tabsRow,
     };
-  }, [euiTheme]);
+  }, [euiTheme, sticky, padding]);
 };
 
 export const AppHeaderShell = React.memo<AppHeaderShellProps>(
-  ({ title, badges, titleActions, trailing, metadata, callout, tabs }) => {
-    const styles = useHeaderStyles();
-    const heightRef = useReportTopBarHeight();
+  ({ title, badges, titleActions, trailing, tabs, sticky = true, padding }) => {
+    const styles = useHeaderStyles(sticky, padding);
 
     return (
-      <div ref={heightRef} css={styles.root} data-test-subj="chromeNextAppHeader">
+      <div css={styles.root} data-test-subj="appHeader">
         <div css={styles.primaryRow}>
           <div css={styles.titleCluster}>
             <div css={styles.titleGroup}>
@@ -138,18 +170,8 @@ export const AppHeaderShell = React.memo<AppHeaderShellProps>(
           </div>
           {trailing}
         </div>
-        {metadata && (
-          <div css={styles.metadataRow} data-test-subj="chromeNextAppHeaderMetadata">
-            {metadata}
-          </div>
-        )}
-        {callout && (
-          <div css={styles.calloutRow} data-test-subj="chromeNextAppHeaderCallout">
-            {callout}
-          </div>
-        )}
         {tabs && (
-          <div css={styles.tabsRow} data-test-subj="chromeNextAppHeaderTabs">
+          <div css={styles.tabsRow} data-test-subj="appHeaderTabs">
             {tabs}
           </div>
         )}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
similarity index 68%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
rename to src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
index 76682a953c1f1..93fbcdbd09620 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_menu.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
@@ -8,8 +8,9 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import { useHasLegacyActionMenu } from '../../shared/chrome_hooks';
-import { HeaderActionMenu } from '../../shared/header_action_menu';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { useHasLegacyActionMenu } from './hooks/chrome';
+import { LegacyHeaderActionMenu } from './legacy_action_menu';
 import { useAppHeaderMenu } from './hooks';
 
 const AppMenuComponent = lazy(async () => {
@@ -17,9 +18,13 @@ const AppMenuComponent = lazy(async () => {
   return { default: Component };
 });
 
-/** Fallback chain: AppMenuConfig + staticItems -> Legacy HeaderActionMenu -> nothing. */
-export const AppMenu = React.memo(() => {
-  const { config, staticItems } = useAppHeaderMenu();
+export interface AppMenuProps {
+  menu?: AppMenuConfig;
+  hasExplicitShare?: boolean;
+}
+
+export const AppMenu = React.memo<AppMenuProps>(({ menu, hasExplicitShare }) => {
+  const { config, staticItems } = useAppHeaderMenu(menu, !!hasExplicitShare);
   const hasLegacyActionMenu = useHasLegacyActionMenu();
 
   if (config) {
@@ -31,7 +36,7 @@ export const AppMenu = React.memo(() => {
   }
 
   if (hasLegacyActionMenu) {
-    return <HeaderActionMenu />;
+    return <LegacyHeaderActionMenu />;
   }
 
   return null;
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_tabs.tsx b/src/core/packages/chrome/app-header/src/app_header/app_tabs.tsx
new file mode 100644
index 0000000000000..23b339a2fe368
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header/app_tabs.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiTab, EuiTabs } from '@elastic/eui';
+import type { AppHeaderTab } from '../types';
+
+export interface AppTabsProps {
+  tabs?: AppHeaderTab[];
+}
+
+export const AppTabs = React.memo<AppTabsProps>(({ tabs }) => {
+  if (!tabs?.length) return null;
+
+  return (
+    <EuiTabs size="m" bottomBorder={false}>
+      {tabs.map((tab) => (
+        <EuiTab key={tab.id} isSelected={tab.isSelected} onClick={tab.onClick} href={tab.href}>
+          {tab.label}
+        </EuiTab>
+      ))}
+    </EuiTabs>
+  );
+});
+
+AppTabs.displayName = 'AppTabs';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx b/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
similarity index 82%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
rename to src/core/packages/chrome/app-header/src/app_header/back_button.tsx
index 34c97c7b5ff2a..85f1498e15c88 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/back_button.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
@@ -18,7 +18,7 @@ import {
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useMemo, useState } from 'react';
-import { useBackButton } from './hooks';
+import type { BackNavigation } from './hooks';
 
 const backLabel = i18n.translate('core.ui.chrome.appHeader.backButtonAriaLabel', {
   defaultMessage: 'Back',
@@ -42,9 +42,12 @@ const useBackButtonStyles = () => {
   }, [euiTheme]);
 };
 
-export const BackButton = React.memo(() => {
+export interface BackButtonProps {
+  targets: BackNavigation[];
+}
+
+export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
   const styles = useBackButtonStyles();
-  const targets = useBackButton();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = useCallback(() => setIsPopoverOpen((open) => !open), []);
@@ -67,14 +70,17 @@ export const BackButton = React.memo(() => {
       size="xs"
       css={styles.button}
       aria-label={tooltip}
-      data-test-subj="chromeNextAppHeaderBack"
-      {...(targets.length > 1 ? { onClick: togglePopover } : { href: primary.backHref })}
+      data-test-subj="appHeaderBack"
+      {...(targets.length > 1
+        ? { onClick: togglePopover }
+        : { href: primary.backHref, onClick: primary.backOnClick })}
     />
   );
 
   if (targets.length > 1) {
     return (
       <EuiPopover
+        aria-label={tooltip}
         button={
           <EuiToolTip content={tooltip} delay="long">
             {buttonIcon}
@@ -87,7 +93,12 @@ export const BackButton = React.memo(() => {
       >
         <EuiContextMenuPanel
           items={targets.map((target, idx) => (
-            <EuiContextMenuItem key={idx} href={target.backHref} size="s">
+            <EuiContextMenuItem
+              key={idx}
+              href={target.backHref}
+              onClick={target.backOnClick}
+              size="s"
+            >
               {target.backDestinationLabel ?? target.backHref}
             </EuiContextMenuItem>
           ))}
diff --git a/src/core/packages/chrome/app-header/src/app_header/chrome_app_header_registration.tsx b/src/core/packages/chrome/app-header/src/app_header/chrome_app_header_registration.tsx
new file mode 100644
index 0000000000000..d82719f089e1c
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header/chrome_app_header_registration.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useLayoutEffect, useMemo, useRef } from 'react';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import type { AppHeaderConfig } from '@kbn/core-chrome-browser';
+
+export const useChromeAppHeaderRegistration = (config: AppHeaderConfig) => {
+  const chrome = useChromeService();
+  const unregisterRef = useRef<(() => void) | undefined>(undefined);
+  const isActive = chrome.next.isEnabled && chrome.getChromeStyle() === 'project';
+
+  useLayoutEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
+    return () => {
+      unregisterRef.current?.();
+      unregisterRef.current = undefined;
+    };
+  }, [isActive]);
+
+  useLayoutEffect(() => {
+    if (!isActive) {
+      unregisterRef.current?.();
+      unregisterRef.current = undefined;
+      return;
+    }
+
+    unregisterRef.current = chrome.next.appHeader.set(config);
+  }, [chrome, config, isActive]);
+};
+
+export const ChromeAppHeaderRegistration = React.memo<AppHeaderConfig>((props) => {
+  const { title, back, tabs, badges, menu, onShare, favorite } = props;
+
+  const config = useMemo(
+    () => ({ title, back, tabs, badges, menu, onShare, favorite }),
+    [title, back, tabs, badges, menu, onShare, favorite]
+  );
+
+  useChromeAppHeaderRegistration(config);
+
+  return null;
+});
+
+ChromeAppHeaderRegistration.displayName = 'ChromeAppHeaderRegistration';
diff --git a/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts
new file mode 100644
index 0000000000000..0513922e58569
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { IBasePath } from '@kbn/core-http-browser';
+import type { MountPoint } from '@kbn/core-mount-utils-browser';
+import { useObservable } from '@kbn/use-observable';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+
+export function useBasePath(): IBasePath {
+  return useChromeService().componentDeps.basePath;
+}
+
+export function useLegacyActionMenu(): MountPoint | undefined {
+  const { legacyActionMenu$ } = useChromeService().componentDeps;
+  return useObservable(legacyActionMenu$, undefined);
+}
+
+export function useHasLegacyActionMenu(): boolean {
+  return !!useLegacyActionMenu();
+}
+
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/index.ts
similarity index 54%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
rename to src/core/packages/chrome/app-header/src/app_header/hooks/index.ts
index dfade4e013a2e..012141e21c4cc 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_title.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/index.ts
@@ -7,9 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { useNextHeader } from '../../../shared/chrome_hooks';
-
-export function useTitle(): string | undefined {
-  const config = useNextHeader();
-  return config?.title;
-}
+export { useBasePath, useLegacyActionMenu, useHasLegacyActionMenu } from './chrome';
+export { useBackNavTargets } from './use_back_navigation';
+export type { BackNavigation } from './use_back_navigation';
+export { useResolvedBadges } from './use_app_badges';
+export { useAppHeaderMenu, useShareAction } from './use_app_header_menu';
+export type { ShareAction } from './use_app_header_menu';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_badges.ts
similarity index 69%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts
rename to src/core/packages/chrome/app-header/src/app_header/hooks/use_app_badges.ts
index 9eb4aadcf6792..20d277ed75f7c 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_badges.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_badges.ts
@@ -8,41 +8,38 @@
  */
 
 import { useMemo } from 'react';
-import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
 import type { ChromeBadge, ChromeBreadcrumbsBadge } from '@kbn/core-chrome-browser';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
-import { useNextHeader } from '../../../shared/chrome_hooks';
+import type { AppHeaderBadge } from '../../types';
 
-const breadcrumbsBadgeToHeaderBadge = (badge: ChromeBreadcrumbsBadge): ChromeNextHeaderBadge => ({
+const breadcrumbsBadgeToHeaderBadge = (badge: ChromeBreadcrumbsBadge): AppHeaderBadge => ({
   label: badge.badgeText,
+  color: badge.color as AppHeaderBadge['color'],
   tooltip: badge.toolTipProps?.content as string | undefined,
-  // @ts-expect-error supported for backward compatibility. TODO: Remove it
+  'data-test-subj': badge['data-test-subj'] as string | undefined,
   renderCustomBadge: badge.renderCustomBadge,
 });
 
-const legacyBadgeToHeaderBadge = (badge: ChromeBadge): ChromeNextHeaderBadge => ({
+const legacyBadgeToHeaderBadge = (badge: ChromeBadge): AppHeaderBadge => ({
   label: badge.text,
   tooltip: badge.tooltip,
 });
 
-/**
- * Fallback: `config.badges` from `chrome.next.header.set()` ->
- * legacy `chrome.setBadge()` + `chrome.setBreadcrumbsBadges()` combined.
- */
-export function useAppBadges(): ChromeNextHeaderBadge[] | undefined {
-  const config = useNextHeader();
+export function useResolvedBadges(
+  propBadges: AppHeaderBadge[] | undefined
+): AppHeaderBadge[] | undefined {
   const chrome = useChromeService();
   const breadcrumbsBadges$ = useMemo(() => chrome.getBreadcrumbsBadges$(), [chrome]);
   const breadcrumbsBadges = useObservable(breadcrumbsBadges$, []);
   const legacyBadge$ = useMemo(() => chrome.getBadge$(), [chrome]);
   const legacyBadge = useObservable(legacyBadge$, undefined);
 
-  if (config?.badges) {
-    return config.badges;
+  if (propBadges !== undefined) {
+    return propBadges.length > 0 ? propBadges : undefined;
   }
 
-  const fallback: ChromeNextHeaderBadge[] = [];
+  const fallback: AppHeaderBadge[] = [];
 
   if (legacyBadge) {
     fallback.push(legacyBadgeToHeaderBadge(legacyBadge));
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
similarity index 72%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
rename to src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
index 0625279b51a56..60d8a76755e0a 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
@@ -13,7 +13,6 @@ import { APP_MENU_SHARE_ID, getTooltip } from '@kbn/core-chrome-app-menu-compone
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { useObservable } from '@kbn/use-observable';
 import { i18n } from '@kbn/i18n';
-import { useAppMenu, useNextHeader } from '../../../shared/chrome_hooks';
 
 const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuItemType => ({
   label: i18n.translate('chrome.appHeader.feedbackMenuItemLabel', {
@@ -66,12 +65,10 @@ const useStaticItems = () => {
   }, [feedbackHandler, documentationLink, helpExtension]);
 };
 
-const useResolvedAppMenu = (): ResolvedAppMenu => {
-  const config = useNextHeader();
-  const globalAppMenu = useAppMenu();
-  const menu = config?.appMenu ?? globalAppMenu;
-  const hasExplicitShare = !!config?.globalActions?.share;
-
+const useResolvedAppMenu = (
+  menu: AppMenuConfig | undefined,
+  hasExplicitShare: boolean
+): ResolvedAppMenu => {
   return useMemo((): ResolvedAppMenu => {
     if (!menu) return { menu: undefined, shareItem: undefined };
 
@@ -88,15 +85,14 @@ const useResolvedAppMenu = (): ResolvedAppMenu => {
   }, [menu, hasExplicitShare]);
 };
 
-/**
- * Returns the resolved app menu with the `share` item stripped out.
- * The share action is auto-promoted to the global actions area by Chrome.
- */
-export function useAppHeaderMenu(): {
+export function useAppHeaderMenu(
+  pageAppMenu: AppMenuConfig | undefined,
+  hasExplicitShare: boolean
+): {
   config: AppMenuConfig | undefined;
   staticItems: AppMenuItemType[];
 } {
-  const { menu } = useResolvedAppMenu();
+  const { menu } = useResolvedAppMenu(pageAppMenu, hasExplicitShare);
   const staticItems = useStaticItems();
 
   return {
@@ -112,30 +108,28 @@ export interface ShareAction {
   testId?: string;
 }
 
-/**
- * Returns a share action auto-extracted from the app menu,
- * or built from the explicitly set `globalActions.share` if provided.
- * Includes tooltip data from the app menu item when available.
- */
-export function useShareAction(): ShareAction | undefined {
-  const config = useNextHeader();
-  const { shareItem } = useResolvedAppMenu();
-  const explicitShare = config?.globalActions?.share?.onClick;
+export function useShareAction(
+  pageAppMenu: AppMenuConfig | undefined,
+  onShare?: () => void
+): ShareAction | undefined {
+  const { shareItem } = useResolvedAppMenu(pageAppMenu, !!onShare);
 
   return useMemo(() => {
-    if (explicitShare) return { onClick: explicitShare };
-    if (!shareItem?.run) return undefined;
+    if (onShare) return { onClick: onShare };
+    if (!shareItem) return undefined;
+    const { run, tooltipContent, tooltipTitle, testId } = shareItem;
+    if (!run) return undefined;
 
     const { content, title } = getTooltip({
-      tooltipContent: shareItem.tooltipContent,
-      tooltipTitle: shareItem.tooltipTitle,
+      tooltipContent,
+      tooltipTitle,
     });
 
     return {
-      onClick: () => shareItem.run!(),
+      onClick: () => run(),
       tooltipContent: content,
       tooltipTitle: title,
-      testId: shareItem.testId,
+      testId,
     };
-  }, [explicitShare, shareItem]);
+  }, [onShare, shareItem]);
 }
diff --git a/src/core/packages/chrome/app-header/src/app_header/hooks/use_back_navigation.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/use_back_navigation.ts
new file mode 100644
index 0000000000000..1d2d5dec13adb
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/use_back_navigation.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type React from 'react';
+import { useMemo } from 'react';
+import type { AppHeaderBack } from '../../types';
+import { useBasePath } from './chrome';
+
+export interface BackNavigation {
+  backHref: string;
+  backOnClick?: React.MouseEventHandler;
+  backDestinationLabel?: string;
+}
+
+const EMPTY: BackNavigation[] = [];
+
+export function useBackNavTargets(
+  back: AppHeaderBack | AppHeaderBack[] | undefined
+): BackNavigation[] {
+  const basePath = useBasePath();
+
+  return useMemo(() => {
+    if (!back) {
+      return EMPTY;
+    }
+    const backItems = Array.isArray(back) ? back : [back];
+    const base = basePath.get();
+    const explicit: BackNavigation[] = [];
+    for (const b of backItems) {
+      if (b.href?.trim()) {
+        const href = base && b.href.startsWith(base) ? b.href : basePath.prepend(b.href);
+        explicit.push({ backHref: href, backOnClick: b.onClick, backDestinationLabel: b.label });
+      }
+    }
+    return explicit.length > 0 ? explicit : EMPTY;
+  }, [back, basePath]);
+}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts b/src/core/packages/chrome/app-header/src/app_header/index.ts
similarity index 65%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
rename to src/core/packages/chrome/app-header/src/app_header/index.ts
index 98fd20f1eb40e..b045b9452601f 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/index.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/index.ts
@@ -7,7 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { useAppHeaderMenu, useShareAction } from './use_app_header_menu';
-export { useBackButton } from './use_back_button';
-export { useReportTopBarHeight } from './use_report_top_bar_height';
-export { useTitle } from './use_title';
+export { AppHeader, AppHeaderView } from './app_header';
+export type { AppHeaderProps, AppHeaderViewProps } from './app_header';
+export {
+  ChromeAppHeaderRegistration,
+  useChromeAppHeaderRegistration,
+} from './chrome_app_header_registration';
diff --git a/src/core/packages/chrome/app-header/src/app_header/legacy_action_menu.tsx b/src/core/packages/chrome/app-header/src/app_header/legacy_action_menu.tsx
new file mode 100644
index 0000000000000..10050f85474f2
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header/legacy_action_menu.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { FC } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
+import type { UnmountCallback } from '@kbn/core-mount-utils-browser';
+import { useLegacyActionMenu } from './hooks/chrome';
+
+export const LegacyHeaderActionMenu: FC = () => {
+  const mount = useLegacyActionMenu();
+  const elementRef = useRef<HTMLDivElement>(null);
+  const unmountRef = useRef<UnmountCallback | null>(null);
+
+  useLayoutEffect(() => {
+    if (mount && elementRef.current) {
+      try {
+        unmountRef.current = mount(elementRef.current);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }
+    return () => {
+      if (unmountRef.current) {
+        unmountRef.current();
+        unmountRef.current = null;
+      }
+    };
+  }, [mount]);
+
+  return <div data-test-subj="headerAppActionMenu" ref={elementRef} />;
+};
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx b/src/core/packages/chrome/app-header/src/app_header/title_actions.tsx
similarity index 67%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
rename to src/core/packages/chrome/app-header/src/app_header/title_actions.tsx
index f1115f782a144..4215f0ef0aafc 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/global_actions.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/title_actions.tsx
@@ -10,15 +10,15 @@
 import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import type { ReactNode } from 'react';
 import React, { useMemo } from 'react';
-import { useNextHeader } from '../../shared/chrome_hooks';
-import { useShareAction } from './hooks';
+import type { ShareAction } from './hooks';
 
-const SHARE_ARIA_LABEL = i18n.translate('core.ui.chrome.appHeader.globalShareAriaLabel', {
+const SHARE_ARIA_LABEL = i18n.translate('core.ui.chrome.appHeader.shareAriaLabel', {
   defaultMessage: 'Share',
 });
 
-const useGlobalActionsStyles = () => {
+const useTitleActionsStyles = () => {
   const { euiTheme } = useEuiTheme();
 
   return useMemo(() => {
@@ -49,17 +49,13 @@ const useGlobalActionsStyles = () => {
   }, [euiTheme]);
 };
 
-/**
- * Fixed-order global object actions (editTitle, share, favorite) next to the title.
- * Share is auto-extracted from the app menu (item with id 'share') or explicitly set
- * via `chrome.next.header.set({ globalActions: { share } })`.
- * Favorite is a `ReactNode` slot so plugins own full behavior (clients, context, React Query).
- */
-export const GlobalActions = React.memo(() => {
-  const config = useNextHeader();
-  const styles = useGlobalActionsStyles();
-  const shareAction = useShareAction();
-  const favorite = config?.globalActions?.favorite;
+export interface TitleActionsProps {
+  shareAction?: ShareAction;
+  favorite?: ReactNode;
+}
+
+export const TitleActions = React.memo<TitleActionsProps>(({ shareAction, favorite }) => {
+  const styles = useTitleActionsStyles();
 
   if (!shareAction && !favorite) {
     return null;
@@ -69,7 +65,7 @@ export const GlobalActions = React.memo(() => {
   const hasCustomTooltip = !!shareAction?.tooltipContent || !!shareAction?.tooltipTitle;
 
   return (
-    <div css={styles.root} data-test-subj="chromeNextAppHeaderGlobalActions">
+    <div css={styles.root} data-test-subj="appHeaderTitleActions">
       {shareAction ? (
         <EuiToolTip
           content={shareTooltipContent}
@@ -84,13 +80,13 @@ export const GlobalActions = React.memo(() => {
             size="xs"
             css={styles.iconButton}
             aria-label={SHARE_ARIA_LABEL}
-            data-test-subj={`chromeNextAppHeaderGlobalShare ${shareAction.testId ?? ''}`.trim()}
+            data-test-subj={`appHeaderShare ${shareAction.testId ?? ''}`.trim()}
             onClick={shareAction.onClick}
           />
         </EuiToolTip>
       ) : null}
       {favorite ? (
-        <div css={styles.favoriteSlot} data-test-subj="chromeNextAppHeaderGlobalFavoriteSlot">
+        <div css={styles.favoriteSlot} data-test-subj="appHeaderFavorite">
           {favorite}
         </div>
       ) : null}
@@ -98,4 +94,4 @@ export const GlobalActions = React.memo(() => {
   );
 });
 
-GlobalActions.displayName = 'GlobalActions';
+TitleActions.displayName = 'TitleActions';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx b/src/core/packages/chrome/app-header/src/app_header/title_area.tsx
similarity index 79%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx
rename to src/core/packages/chrome/app-header/src/app_header/title_area.tsx
index f23a9c69e402c..744ff3210995f 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/title_area.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/title_area.tsx
@@ -10,14 +10,19 @@
 import { EuiTitle, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
-import { useBackButton, useTitle } from './hooks';
+import type { AppHeaderBack } from '../types';
+import { useBackNavTargets } from './hooks';
 import { BackButton } from './back_button';
 
-export const TitleArea = React.memo(() => {
+export interface TitleAreaProps {
+  title?: string;
+  back?: AppHeaderBack | AppHeaderBack[];
+}
+
+export const TitleArea = React.memo<TitleAreaProps>(({ title, back }) => {
   const { euiTheme } = useEuiTheme();
-  const backTargets = useBackButton();
+  const backTargets = useBackNavTargets(back);
   const hasBack = backTargets.length > 0;
-  const title = useTitle();
 
   const styles = useMemo(() => {
     const wrapper = css`
@@ -42,7 +47,7 @@ export const TitleArea = React.memo(() => {
 
   return (
     <div css={styles.wrapper}>
-      {hasBack && <BackButton />}
+      {hasBack && <BackButton targets={backTargets} />}
       {title && (
         <EuiTitle size="xs" css={!hasBack ? styles.titleOffset : undefined}>
           <h1 className="eui-textTruncate">{title}</h1>
diff --git a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
new file mode 100644
index 0000000000000..0c1dff58a8326
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { FC } from 'react';
+import React from 'react';
+import type { EuiPageHeaderProps } from '@elastic/eui';
+import { EuiPageHeader } from '@elastic/eui';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import type { AppHeaderTab } from './types';
+import { AppHeader } from './app_header';
+import type { AppHeaderProps } from './app_header';
+
+export interface AppHeaderWithFallbackProps extends AppHeaderProps {
+  fallback?: EuiPageHeaderProps | null;
+}
+
+const mapTabsForClassic = (nextTabs: AppHeaderTab[] | undefined): EuiPageHeaderProps['tabs'] => {
+  if (!nextTabs?.length) return undefined;
+  return nextTabs.map((t) => ({
+    id: t.id,
+    label: t.label,
+    isSelected: t.isSelected,
+    onClick: t.onClick,
+    href: t.href,
+  }));
+};
+
+export const AppHeaderWithFallback: FC<AppHeaderWithFallbackProps> = ({
+  title,
+  back,
+  tabs,
+  badges,
+  menu,
+  onShare,
+  favorite,
+  fallback,
+  sticky,
+  padding,
+}) => {
+  const chrome = useChromeService();
+
+  if (!chrome.next.isEnabled) {
+    if (fallback === null) return null;
+    const { pageTitle: classicPageTitle, tabs: classicTabs, ...classicRest } = fallback ?? {};
+    return (
+      <EuiPageHeader
+        {...classicRest}
+        pageTitle={classicPageTitle ?? title}
+        tabs={classicTabs ?? mapTabsForClassic(tabs)}
+      />
+    );
+  }
+
+  if (fallback === null && chrome.getChromeStyle() !== 'project') {
+    return null;
+  }
+
+  return (
+    <AppHeader
+      title={title}
+      back={back}
+      tabs={tabs}
+      badges={badges}
+      menu={menu}
+      onShare={onShare}
+      favorite={favorite}
+      sticky={sticky}
+      padding={padding}
+    />
+  );
+};
diff --git a/src/core/packages/chrome/app-header/src/index.ts b/src/core/packages/chrome/app-header/src/index.ts
new file mode 100644
index 0000000000000..67cf52fe4ddad
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { AppHeader, AppHeaderView } from './app_header';
+export type { AppHeaderProps, AppHeaderViewProps } from './app_header';
+export { ChromeAppHeaderRegistration, useChromeAppHeaderRegistration } from './app_header';
+export type {
+  AppHeaderBack,
+  AppHeaderBadge,
+  AppHeaderTab,
+  AppHeaderMenu,
+  AppHeaderPadding,
+  AppHeaderConfig,
+} from './types';
+export type { AppHeaderWithFallbackProps } from './app_header_with_fallback';
+export { AppHeaderWithFallback } from './app_header_with_fallback';
diff --git a/src/core/packages/chrome/app-header/src/types.ts b/src/core/packages/chrome/app-header/src/types.ts
new file mode 100644
index 0000000000000..a343a74465014
--- /dev/null
+++ b/src/core/packages/chrome/app-header/src/types.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import type {
+  AppHeaderBack as CoreAppHeaderBack,
+  AppHeaderBadge as CoreAppHeaderBadge,
+  AppHeaderBadgeItem as CoreAppHeaderBadgeItem,
+  AppHeaderConfig as CoreAppHeaderConfig,
+  AppHeaderTab as CoreAppHeaderTab,
+} from '@kbn/core-chrome-browser';
+
+export type AppHeaderMenu = AppMenuConfig;
+export type AppHeaderBack = CoreAppHeaderBack;
+export type AppHeaderBadge = CoreAppHeaderBadge;
+export type AppHeaderBadgeItem = CoreAppHeaderBadgeItem;
+export type AppHeaderConfig = CoreAppHeaderConfig;
+export type AppHeaderTab = CoreAppHeaderTab;
+
+export type AppHeaderPadding =
+  | 'none'
+  | 'm'
+  | {
+      bleed: 'm' | 'l';
+      size?: 'none' | 'm' | 'l';
+    };
diff --git a/src/core/packages/chrome/app-header/tsconfig.json b/src/core/packages/chrome/app-header/tsconfig.json
new file mode 100644
index 0000000000000..995585d53c489
--- /dev/null
+++ b/src/core/packages/chrome/app-header/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "@kbn/tsconfig-base/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": ["jest", "node", "react", "@kbn/ambient-ui-types"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["target/**/*"],
+  "kbn_references": [
+    "@kbn/core-chrome-app-menu-components",
+    "@kbn/core-chrome-browser",
+    "@kbn/core-chrome-browser-context",
+    "@kbn/core-http-browser",
+    "@kbn/core-mount-utils-browser",
+    "@kbn/i18n",
+    "@kbn/use-observable"
+  ]
+}
diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 657617840ec7e..1bdc52b8c86d8 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -11,21 +11,11 @@ export { ChromeComponentsProvider } from './src/context';
 export type { ChromeComponentsDeps } from './src/context';
 
 export { ClassicHeader } from './src/classic';
-export { ProjectHeader } from './src/project';
-export {
-  AppHeader,
-  AppHeaderShell,
-  GlobalHeader,
-  GlobalHeaderShell,
-  HeaderActionButton,
-} from './src/chrome_next';
-export type {
-  AppHeaderShellProps,
-  GlobalHeaderShellProps,
-  HeaderActionButtonProps,
-} from './src/chrome_next';
+export { ProjectHeader, ChromeAppHeaderRenderer, useHasChromeAppHeaderContent } from './src/project';
+export { GlobalHeader, GlobalHeaderShell, HeaderActionButton } from './src/chrome_next';
+export type { GlobalHeaderShellProps, HeaderActionButtonProps } from './src/chrome_next';
 export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_sidenav';
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
 export { HeaderBreadcrumbsBadges, HeaderTopBanner, ChromelessHeader } from './src/shared';
-export { useHasAppMenu, useIsNextChrome } from './src/shared/chrome_hooks';
+export { useHasAppMenu, useIsNextChrome, useHasInlineAppHeader } from './src/shared/chrome_hooks';
diff --git a/src/core/packages/chrome/browser-components/moon.yml b/src/core/packages/chrome/browser-components/moon.yml
index 0ac939ee1eb6c..5085f86595373 100644
--- a/src/core/packages/chrome/browser-components/moon.yml
+++ b/src/core/packages/chrome/browser-components/moon.yml
@@ -33,6 +33,7 @@ dependsOn:
   - '@kbn/react-env'
   - '@kbn/react-kibana-context-env'
   - '@kbn/core-chrome-layout-constants'
+  - '@kbn/core-chrome-layout-components'
   - '@kbn/core-chrome-sidebar-components'
   - '@kbn/ui-side-navigation'
   - '@kbn/core-chrome-feature-flags'
@@ -49,8 +50,8 @@ dependsOn:
   - '@kbn/shared-ux-label-formatter'
   - '@kbn/test-jest-helpers'
   - '@kbn/use-observable'
-  - '@kbn/core-chrome-layout-components'
   - '@kbn/shared-ux-utility'
+  - '@kbn/app-header'
 tags:
   - shared-browser
   - package
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx
deleted file mode 100644
index a29b06184f514..0000000000000
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_title.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
-import React, { useMemo } from 'react';
-import { useTitle } from './hooks';
-
-const useTitleStyles = () => {
-  const { euiTheme } = useEuiTheme();
-
-  return useMemo(() => {
-    const title = css`
-      flex: 1 1 auto;
-      min-width: 0;
-      font-size: ${euiTheme.size.base};
-      font-weight: ${euiTheme.font.weight.semiBold};
-      line-height: ${euiTheme.size.l};
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-
-    return { title };
-  }, [euiTheme]);
-};
-
-export const AppTitle = React.memo(() => {
-  const title = useTitle();
-  const styles = useTitleStyles();
-
-  if (!title) {
-    return null;
-  }
-
-  return <h1 css={styles.title}>{title}</h1>;
-});
-
-AppTitle.displayName = 'AppTitle';
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
deleted file mode 100644
index 3d359347aba53..0000000000000
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_back_button.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useMemo } from 'react';
-import type { AppDeepLinkId, ChromeBreadcrumb } from '@kbn/core-chrome-browser';
-import { useNextHeader, useProjectBreadcrumbs } from '../../../shared/chrome_hooks';
-import { getBreadcrumbPlainText } from '../../../shared/breadcrumb_utils';
-
-const EXCLUDED_BACK_DEEP_LINKS = new Set<AppDeepLinkId>([]);
-const EXCLUDED_BACK_HREFS = [/\/app\/management\/?$/];
-
-const isExcludedBackTarget = (crumb: ChromeBreadcrumb): boolean => {
-  if (crumb.deepLinkId && EXCLUDED_BACK_DEEP_LINKS.has(crumb.deepLinkId)) {
-    return true;
-  }
-  if (crumb.href) {
-    return EXCLUDED_BACK_HREFS.some((re) => re.test(crumb.href!));
-  }
-  return false;
-};
-
-export interface BackNavigation {
-  backHref: string;
-  backDestinationLabel?: string;
-}
-
-const EMPTY: BackNavigation[] = [];
-
-/**
- * Returns all valid back-navigation targets derived from project breadcrumbs
- * (scanning right-to-left, so the immediate parent is first).
- *
- * An explicit `chrome.next.header` `back.href` takes priority and produces a
- * single-element array.
- */
-export function useBackButton(): BackNavigation[] {
-  const config = useNextHeader();
-  const breadcrumbs = useProjectBreadcrumbs();
-
-  return useMemo(() => {
-    if (config?.back) {
-      const backItems = Array.isArray(config.back) ? config.back : [config.back];
-      const explicit = backItems
-        .filter((b) => b.href?.trim())
-        .map((b) => ({ backHref: b.href, backDestinationLabel: b.label }));
-      if (explicit.length > 0) {
-        return explicit;
-      }
-    }
-
-    if (breadcrumbs.length < 2) {
-      return EMPTY;
-    }
-
-    const targets: BackNavigation[] = [];
-    for (let i = breadcrumbs.length - 2; i >= 0; i--) {
-      const crumb = breadcrumbs[i];
-      const href = crumb.href;
-      if (href && !isExcludedBackTarget(crumb)) {
-        targets.push({
-          backHref: href,
-          backDestinationLabel: getBreadcrumbPlainText(crumb),
-        });
-      }
-    }
-    return targets.length > 0 ? targets : EMPTY;
-  }, [breadcrumbs, config]);
-}
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts b/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts
deleted file mode 100644
index 55c0486deec1a..0000000000000
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/hooks/use_report_top_bar_height.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useCallback, useRef, useEffect } from 'react';
-import { useLayoutUpdate } from '@kbn/core-chrome-layout-components';
-
-/**
- * Measures the height of the application top bar via ResizeObserver and
- * reports it to the layout system through `useLayoutUpdate`.
- * Returns a ref callback to attach to the top bar root element.
- * Reports `0` when the element is removed or on unmount.
- */
-export const useReportTopBarHeight = (): ((node: HTMLElement | null) => void) => {
-  const updateLayout = useLayoutUpdate();
-  const observerRef = useRef<ResizeObserver | null>(null);
-  const lastHeightRef = useRef<number>(0);
-
-  useEffect(() => {
-    return () => {
-      observerRef.current?.disconnect();
-      updateLayout({ applicationTopBarHeight: 0 });
-    };
-  }, [updateLayout]);
-
-  const refCallback = useCallback(
-    (node: HTMLElement | null) => {
-      observerRef.current?.disconnect();
-
-      if (!node) {
-        if (lastHeightRef.current !== 0) {
-          lastHeightRef.current = 0;
-          updateLayout({ applicationTopBarHeight: 0 });
-        }
-        return;
-      }
-
-      const observer = new ResizeObserver((entries) => {
-        const entry = entries[0];
-        if (!entry) return;
-
-        const height = Math.round(entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height);
-        if (height !== lastHeightRef.current) {
-          lastHeightRef.current = height;
-          updateLayout({ applicationTopBarHeight: height });
-        }
-      });
-
-      observer.observe(node, { box: 'border-box' });
-      observerRef.current = observer;
-    },
-    [updateLayout]
-  );
-
-  return refCallback;
-};
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
index f5eda0f6adcd7..edfa5e181d6b0 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
@@ -7,7 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { AppHeader, AppHeaderShell } from './app_header';
-export type { AppHeaderShellProps } from './app_header';
 export { GlobalHeader, GlobalHeaderShell, HeaderActionButton } from './global_header';
 export type { GlobalHeaderShellProps, HeaderActionButtonProps } from './global_header';
diff --git a/src/core/packages/chrome/browser-components/src/project/chrome_app_header.tsx b/src/core/packages/chrome/browser-components/src/project/chrome_app_header.tsx
new file mode 100644
index 0000000000000..a2aabe50a2d4b
--- /dev/null
+++ b/src/core/packages/chrome/browser-components/src/project/chrome_app_header.tsx
@@ -0,0 +1,147 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo, useState, useLayoutEffect } from 'react';
+import type { ChromeBreadcrumb, AppHeaderConfig } from '@kbn/core-chrome-browser';
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+import { useObservable } from '@kbn/use-observable';
+import type { AppHeaderBack } from '@kbn/app-header';
+
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { AppHeaderView } from '@kbn/app-header';
+import { useLayoutUpdate } from '@kbn/core-chrome-layout-components';
+import { useHasLegacyActionMenu } from '../shared/chrome_hooks';
+
+function getBreadcrumbText(crumb: ChromeBreadcrumb): string | undefined {
+  if (typeof crumb.text === 'string') return crumb.text;
+  if (typeof crumb['aria-label'] === 'string') return crumb['aria-label'];
+  return undefined;
+}
+
+interface FallbackProps {
+  hasContent: boolean;
+  back?: AppHeaderBack[];
+  menu?: AppMenuConfig;
+}
+
+function useFallbackProps(): FallbackProps {
+  const chrome = useChromeService();
+
+  const breadcrumbs$ = useMemo(() => chrome.project.getBreadcrumbs$(), [chrome]);
+  const breadcrumbs = useObservable(breadcrumbs$, []);
+
+  const appMenu$ = useMemo(() => chrome.getAppMenu$(), [chrome]);
+  const appMenu = useObservable(appMenu$, undefined);
+
+  const hasLegacyActionMenu = useHasLegacyActionMenu();
+
+  return useMemo(() => {
+    const backTargets: AppHeaderBack[] = [];
+    for (let i = breadcrumbs.length - 2; i >= 0; i--) {
+      const crumb = breadcrumbs[i];
+      if (crumb.href) {
+        backTargets.push({
+          href: crumb.href,
+          onClick: crumb.onClick,
+          label: getBreadcrumbText(crumb),
+        });
+      }
+    }
+
+    const hasBack = backTargets.length > 0;
+    const hasMenu = !!appMenu?.items?.length;
+    const hasContent = hasBack || hasMenu || hasLegacyActionMenu;
+
+    return {
+      hasContent,
+      back: hasBack ? backTargets : undefined,
+      menu: hasMenu ? appMenu : undefined,
+    };
+  }, [breadcrumbs, appMenu, hasLegacyActionMenu]);
+}
+
+function useAppHeaderConfig(): AppHeaderConfig | undefined {
+  const chrome = useChromeService();
+  const config$ = useMemo(() => chrome.next.appHeader.get$(), [chrome]);
+  return useObservable(config$, undefined);
+}
+
+function normalizeAppHeaderBack(
+  back: string | AppHeaderBack | undefined
+): AppHeaderBack | undefined {
+  if (typeof back === 'string') return { href: back };
+  return back;
+}
+
+function hasExplicitAppHeaderContent(config: AppHeaderConfig | undefined): boolean {
+  if (!config) return false;
+  return (
+    config.title !== undefined ||
+    normalizeAppHeaderBack(config.back) !== undefined ||
+    !!config.tabs?.length ||
+    !!config.badges?.length ||
+    !!config.menu?.items?.length
+  );
+}
+
+export function useHasChromeAppHeaderContent(): boolean {
+  const config = useAppHeaderConfig();
+  const fallback = useFallbackProps();
+  return hasExplicitAppHeaderContent(config) || fallback.hasContent;
+}
+
+function useMeasuredAppHeaderHeight(): React.RefCallback<HTMLDivElement> {
+  const updateLayout = useLayoutUpdate();
+  const [el, setEl] = useState<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (!el) return;
+
+    updateLayout({ applicationTopBarHeight: el.offsetHeight });
+
+    const ro = new ResizeObserver(([entry]) => {
+      const h = entry.borderBoxSize?.[0]?.blockSize ?? el.offsetHeight;
+      updateLayout({ applicationTopBarHeight: h });
+    });
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, [el, updateLayout]);
+
+  return setEl;
+}
+
+export const ChromeAppHeaderRenderer = React.memo(() => {
+  const config = useAppHeaderConfig();
+  const fallback = useFallbackProps();
+
+  const back = normalizeAppHeaderBack(config?.back);
+  const hasContent = hasExplicitAppHeaderContent(config) || fallback.hasContent;
+  const measureRef = useMeasuredAppHeaderHeight();
+
+  if (!hasContent) return null;
+
+  return (
+    <div ref={measureRef}>
+      <AppHeaderView
+        title={config?.title}
+        back={back ?? fallback.back}
+        tabs={config?.tabs}
+        badges={config?.badges}
+        menu={config?.menu ?? fallback.menu}
+        onShare={config?.onShare}
+        favorite={config?.favorite}
+        sticky={false}
+        padding="m"
+      />
+    </div>
+  );
+});
+
+ChromeAppHeaderRenderer.displayName = 'ChromeAppHeaderRenderer';
diff --git a/src/core/packages/chrome/browser-components/src/project/index.ts b/src/core/packages/chrome/browser-components/src/project/index.ts
index 1c5dfe050fe6b..25f2140ce705c 100644
--- a/src/core/packages/chrome/browser-components/src/project/index.ts
+++ b/src/core/packages/chrome/browser-components/src/project/index.ts
@@ -8,3 +8,4 @@
  */
 
 export { ProjectHeader } from './header';
+export { ChromeAppHeaderRenderer, useHasChromeAppHeaderContent } from './chrome_app_header';
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index e2185e25b6e7c..33df66b2864e5 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -16,7 +16,6 @@ import type {
   ChromeNavControl,
   ChromeNavLink,
   ChromeNextGlobalSearchConfig,
-  ChromeNextHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
@@ -241,17 +240,6 @@ export function useHasAppMenu(): boolean {
   return hasLegacyActionMenu || hasAppMenuConfig;
 }
 
-/**
- * Returns the current Chrome-Next header configuration set via
- * `chrome.next.header.set()`, or `undefined` if not set.
- * Used by Chrome-Next top bar components.
- */
-export function useNextHeader(): ChromeNextHeaderConfig | undefined {
-  const chrome = useChromeService();
-  const config$ = useMemo(() => chrome.next.header.get$(), [chrome]);
-  return useObservable(config$, undefined);
-}
-
 export function useGlobalSearch(): ChromeNextGlobalSearchConfig | undefined {
   const chrome = useChromeService();
   const config$ = useMemo(() => chrome.next.globalSearch.get$(), [chrome]);
@@ -279,3 +267,40 @@ export function useIsNextChrome(): boolean {
   const { featureFlags } = useChromeComponentsDeps();
   return isNextChrome(featureFlags);
 }
+
+/** Whether an inline `AppHeader` is currently mounted by the active app. */
+export function useHasInlineAppHeader(): boolean {
+  const chrome = useChromeService();
+  const inlineAppHeader$ = useMemo(() => chrome.next.inlineAppHeader.get$(), [chrome]);
+  return useObservable(inlineAppHeader$, false);
+}
+
+// ---------------------------------------------------------------------------
+// Internal hooks: read from useChromeService().componentDeps instead of
+// useChromeComponentsDeps(). These work in any React tree that has
+// ChromeServiceProvider (including management section apps).
+// ---------------------------------------------------------------------------
+
+export function useInternalBasePath(): IBasePath {
+  return useChromeService().componentDeps.basePath;
+}
+
+export function useInternalLegacyActionMenu(): MountPoint | undefined {
+  const { legacyActionMenu$ } = useChromeService().componentDeps;
+  return useObservable(legacyActionMenu$, undefined);
+}
+
+export function useInternalHasLegacyActionMenu(): boolean {
+  return !!useInternalLegacyActionMenu();
+}
+
+/**
+ * Like {@link useHasAppMenu} but legacy menu reads {@link useChromeService}.componentDeps
+ * instead of {@link useChromeComponentsDeps}. Safe where only ChromeServiceProvider exists
+ * (e.g. management apps rendering AppHeader inline).
+ */
+export function useInternalHasAppMenu(): boolean {
+  const hasLegacy = useInternalHasLegacyActionMenu();
+  const hasConfig = useHasAppMenuConfig();
+  return hasLegacy || hasConfig;
+}
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_action_menu.tsx b/src/core/packages/chrome/browser-components/src/shared/header_action_menu.tsx
index 8b50be135473e..37f54efd442be 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_action_menu.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_action_menu.tsx
@@ -10,14 +10,14 @@
 import type { FC } from 'react';
 import React, { useRef, useLayoutEffect } from 'react';
 import type { UnmountCallback } from '@kbn/core-mount-utils-browser';
-import { useCurrentActionMenu } from './chrome_hooks';
+import { useInternalLegacyActionMenu } from './chrome_hooks';
 
 /**
  * Renders the currently mounted header action menu set via {@link ChromeStart.setHeaderActionMenu}.
  * @deprecated Use {@link HeaderAppMenu} instead. See kibana-team#2651.
  */
 export const HeaderActionMenu: FC = () => {
-  const mount = useCurrentActionMenu();
+  const mount = useInternalLegacyActionMenu();
   const elementRef = useRef<HTMLDivElement>(null);
   const unmountRef = useRef<UnmountCallback | null>(null);
 
diff --git a/src/core/packages/chrome/browser-components/tsconfig.json b/src/core/packages/chrome/browser-components/tsconfig.json
index 7c3416e7dd9c5..86fd056420030 100644
--- a/src/core/packages/chrome/browser-components/tsconfig.json
+++ b/src/core/packages/chrome/browser-components/tsconfig.json
@@ -33,6 +33,7 @@
     "@kbn/react-env",
     "@kbn/react-kibana-context-env",
     "@kbn/core-chrome-layout-constants",
+    "@kbn/core-chrome-layout-components",
     "@kbn/core-chrome-sidebar-components",
     "@kbn/ui-side-navigation",
     "@kbn/core-chrome-feature-flags",
@@ -49,7 +50,7 @@
     "@kbn/shared-ux-label-formatter",
     "@kbn/test-jest-helpers",
     "@kbn/use-observable",
-    "@kbn/core-chrome-layout-components",
     "@kbn/shared-ux-utility",
+    "@kbn/app-header",
   ]
 }
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index a7d8d6ad1104d..a06bbcff38fb3 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -9,6 +9,8 @@
 
 import type { ReactNode } from 'react';
 import type { Observable } from 'rxjs';
+import type { IBasePath } from '@kbn/core-http-browser';
+import type { MountPoint } from '@kbn/core-mount-utils-browser';
 import type {
   ChromeSetup,
   ChromeStart,
@@ -18,7 +20,6 @@ import type {
   ChromeBreadcrumbsBadge,
   ChromeNext,
   ChromeNextAiButton,
-  ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
@@ -28,6 +29,7 @@ import type {
   NavigationTreeDefinitionUI,
   CloudURLs,
   SolutionId,
+  AppHeaderConfig,
 } from '@kbn/core-chrome-browser';
 
 /** @internal */
@@ -35,6 +37,11 @@ export type InternalChromeSetup = ChromeSetup;
 
 /** @internal */
 export interface InternalChromeStart extends ChromeStart {
+  componentDeps: {
+    readonly basePath: IBasePath;
+    readonly legacyActionMenu$: Observable<MountPoint | undefined>;
+  };
+
   sideNav: ChromeStart['sideNav'] & {
     /**
      * Set the width of the side nav.
@@ -121,9 +128,6 @@ export interface InternalChromeStart extends ChromeStart {
 
 /** @internal */
 export interface InternalChromeNext extends ChromeNext {
-  header: ChromeNext['header'] & {
-    get$(): Observable<ChromeNextHeaderConfig | undefined>;
-  };
   aiButton: ChromeNext['aiButton'] & {
     get$(): Observable<ChromeNextAiButton[]>;
   };
@@ -136,4 +140,11 @@ export interface InternalChromeNext extends ChromeNext {
   contextSwitcher: ChromeNext['contextSwitcher'] & {
     get$(): Observable<ReactNode>;
   };
+  inlineAppHeader: {
+    get$(): Observable<boolean>;
+    set(mounted: boolean): void;
+  };
+  appHeader: ChromeNext['appHeader'] & {
+    get$(): Observable<AppHeaderConfig | undefined>;
+  };
 }
diff --git a/src/core/packages/chrome/browser-internal-types/moon.yml b/src/core/packages/chrome/browser-internal-types/moon.yml
index f899dc2b7a901..c603b90b99db0 100644
--- a/src/core/packages/chrome/browser-internal-types/moon.yml
+++ b/src/core/packages/chrome/browser-internal-types/moon.yml
@@ -18,6 +18,8 @@ project:
   sourceRoot: src/core/packages/chrome/browser-internal-types
 dependsOn:
   - '@kbn/core-chrome-browser'
+  - '@kbn/core-http-browser'
+  - '@kbn/core-mount-utils-browser'
 tags:
   - shared-common
   - package
diff --git a/src/core/packages/chrome/browser-internal-types/tsconfig.json b/src/core/packages/chrome/browser-internal-types/tsconfig.json
index e9ad692ae97d7..dbecf8b5d88e2 100644
--- a/src/core/packages/chrome/browser-internal-types/tsconfig.json
+++ b/src/core/packages/chrome/browser-internal-types/tsconfig.json
@@ -12,5 +12,7 @@
   ],
   "kbn_references": [
     "@kbn/core-chrome-browser",
+    "@kbn/core-http-browser",
+    "@kbn/core-mount-utils-browser",
   ]
 }
diff --git a/src/core/packages/chrome/browser-internal/moon.yml b/src/core/packages/chrome/browser-internal/moon.yml
index e0bf2cbf4970c..d21f54c405888 100644
--- a/src/core/packages/chrome/browser-internal/moon.yml
+++ b/src/core/packages/chrome/browser-internal/moon.yml
@@ -56,6 +56,7 @@ dependsOn:
   - '@kbn/core-theme-browser-internal'
   - '@kbn/core-feature-flags-browser'
   - '@kbn/core-feature-flags-browser-mocks'
+  - '@kbn/core-chrome-feature-flags'
   - '@kbn/core-chrome-app-menu-components'
   - '@kbn/core-chrome-sidebar-internal'
   - '@kbn/core-chrome-sidebar-context'
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
index ffaff87bdc067..2d168a3ab0108 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_api.tsx
@@ -9,23 +9,23 @@
 
 import React, { type ReactNode } from 'react';
 import { type Observable, distinctUntilChanged, map, shareReplay } from 'rxjs';
-import type { ChromeNextAiButton } from '@kbn/core-chrome-browser';
+import type { ChromeNextAiButton, AppHeaderConfig } from '@kbn/core-chrome-browser';
+import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
 import type { RecentlyAccessedService } from '@kbn/recently-accessed';
 import { SidebarServiceProvider } from '@kbn/core-chrome-sidebar-context';
 import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
 import type { SidebarStart } from '@kbn/core-chrome-sidebar';
+import { isNextChrome } from '@kbn/core-chrome-feature-flags';
 import type { InternalChromeStart } from './types';
 import type { ChromeState } from './state/chrome_state';
 import type { NavControlsService } from './services/nav_controls';
 import type { NavLinksService } from './services/nav_links';
 import type { ProjectNavigationService } from './services/project_navigation';
-import type { NextHeaderService } from './services/next_header';
 import type { DocTitleService } from './services/doc_title';
 
 type NavControlsStart = ReturnType<NavControlsService['start']>;
 type NavLinksStart = ReturnType<NavLinksService['start']>;
 type ProjectNavigationStart = ReturnType<ProjectNavigationService['start']>;
-type NextHeaderStart = ReturnType<NextHeaderService['start']>;
 type DocTitleStart = ReturnType<DocTitleService['start']>;
 type RecentlyAccessedStart = ReturnType<RecentlyAccessedService['start']>;
 
@@ -37,12 +37,19 @@ export interface ChromeApiDeps {
     recentlyAccessed: RecentlyAccessedStart;
     docTitle: DocTitleStart;
     projectNavigation: ProjectNavigationStart;
-    nextHeader: NextHeaderStart;
   };
   sidebar: SidebarStart;
+  featureFlags: FeatureFlagsStart;
+  componentDeps: InternalChromeStart['componentDeps'];
 }
 
-export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): InternalChromeStart {
+export function createChromeApi({
+  state,
+  services,
+  sidebar,
+  featureFlags,
+  componentDeps,
+}: ChromeApiDeps): InternalChromeStart {
   const { projectNavigation } = services;
 
   const validateProjectStyle = () => {
@@ -54,6 +61,8 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
     }
   };
 
+  let appHeaderRegistrationId = 0;
+
   const hasHeaderBanner$ = state.headerBanner.$.pipe(
     map((banner) => Boolean(banner)),
     distinctUntilChanged(),
@@ -75,6 +84,8 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
   };
 
   const chromeStart: InternalChromeStart = {
+    componentDeps,
+
     withProvider: (children: ReactNode) => {
       return (
         <ChromeServiceProvider value={{ chrome: chromeStart }}>
@@ -175,10 +186,8 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
     project,
 
     next: {
-      header: {
-        get$: services.nextHeader.get$,
-        set: services.nextHeader.set,
-        reset: services.nextHeader.reset,
+      get isEnabled() {
+        return isNextChrome(featureFlags);
       },
       aiButton: {
         get$: () => state.aiButton.$.pipe(map((buttons) => [...buttons])),
@@ -205,6 +214,22 @@ export function createChromeApi({ state, services, sidebar }: ChromeApiDeps): In
         get$: () => state.contextSwitcher.$,
         set: state.contextSwitcher.set,
       },
+      inlineAppHeader: {
+        get$: () => state.inlineAppHeader.$,
+        set: state.inlineAppHeader.set,
+      },
+      appHeader: {
+        get$: () => state.appHeader.$,
+        set: (config: AppHeaderConfig) => {
+          const registrationId = ++appHeaderRegistrationId;
+          state.appHeader.set(config);
+          return () => {
+            if (registrationId === appHeaderRegistrationId) {
+              state.appHeader.set(undefined);
+            }
+          };
+        },
+      },
     },
 
     sidebar,
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
index 0086de3da4623..ca6db493d8428 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_service.tsx
@@ -30,7 +30,6 @@ import { DocTitleService } from './services/doc_title';
 import { NavControlsService } from './services/nav_controls';
 import { NavLinksService } from './services/nav_links';
 import { ProjectNavigationService } from './services/project_navigation';
-import { NextHeaderService } from './services/next_header';
 import { registerAnalyticsContextProvider } from './register_analytics_context_provider';
 import type { InternalChromeSetup, InternalChromeStart } from './types';
 import { createChromeState } from './state';
@@ -76,7 +75,6 @@ export class ChromeService {
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
   private readonly projectNavigation: ProjectNavigationService;
-  private readonly nextHeader: NextHeaderService;
   private readonly sidebar: SidebarService;
   private readonly logger: Logger;
   private readonly isServerless: boolean;
@@ -85,7 +83,6 @@ export class ChromeService {
     this.logger = params.coreContext.logger.get('chrome-browser');
     this.isServerless = params.coreContext.env.packageInfo.buildFlavor === 'serverless';
     this.projectNavigation = new ProjectNavigationService(this.isServerless);
-    this.nextHeader = new NextHeaderService();
     this.sidebar = new SidebarService({ basePath: params.basePath });
   }
 
@@ -109,6 +106,7 @@ export class ChromeService {
     theme,
     userProfile,
     uiSettings,
+    featureFlags,
   }: StartDeps): Promise<InternalChromeStart> {
     // 1. Create all chrome state
     const state = createChromeState({
@@ -167,8 +165,6 @@ export class ChromeService {
       chromeBreadcrumbs$: state.breadcrumbs.classic.$,
     });
 
-    const nextHeaderStart = this.nextHeader.start();
-
     const sidebar = this.sidebar.start();
 
     // 5. Setup app change handler (resets chrome state on app navigation)
@@ -177,7 +173,6 @@ export class ChromeService {
       stop$: this.stop$,
       state,
       docTitle,
-      nextHeader: nextHeaderStart,
     });
 
     // 6. Return chrome API
@@ -189,9 +184,13 @@ export class ChromeService {
         recentlyAccessed,
         docTitle,
         projectNavigation,
-        nextHeader: nextHeaderStart,
       },
       sidebar,
+      featureFlags,
+      componentDeps: {
+        basePath: http.basePath,
+        legacyActionMenu$: application.currentActionMenu$,
+      },
     });
 
     return chrome;
@@ -201,7 +200,6 @@ export class ChromeService {
     this.navControls.stop();
     this.navLinks.stop();
     this.projectNavigation.stop();
-    this.nextHeader.stop();
     this.sidebar.stop();
     this.stop$.next();
   }
diff --git a/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts b/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
deleted file mode 100644
index a990334acb996..0000000000000
--- a/src/core/packages/chrome/browser-internal/src/services/next_header/next_header_service.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ReplaySubject } from 'rxjs';
-import type { ChromeNextHeaderConfig } from '@kbn/core-chrome-browser';
-import { createState } from '../../state/state_helpers';
-
-export class NextHeaderService {
-  private readonly stop$ = new ReplaySubject<void>(1);
-  private readonly config = createState<ChromeNextHeaderConfig | undefined>(undefined);
-
-  public start() {
-    return {
-      get$: () => this.config.$,
-      set: (partial: Partial<ChromeNextHeaderConfig>) => {
-        const current = this.config.get() ?? {};
-        const next = { ...current };
-        for (const [key, value] of Object.entries(partial)) {
-          if (value !== undefined) {
-            (next as Record<string, unknown>)[key] = value;
-          }
-        }
-        this.config.set(
-          Object.keys(next).length > 0 ? (next as ChromeNextHeaderConfig) : undefined
-        );
-      },
-      reset: (...keys: Array<keyof ChromeNextHeaderConfig>) => {
-        if (keys.length === 0) {
-          this.config.set(undefined);
-          return;
-        }
-        const current = this.config.get();
-        if (!current) return;
-        const next = { ...current };
-        for (const key of keys) {
-          delete next[key];
-        }
-        this.config.set(Object.keys(next).length > 0 ? next : undefined);
-      },
-    };
-  }
-
-  public stop() {
-    this.stop$.next();
-    this.stop$.complete();
-  }
-}
diff --git a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
index 9a6985891e33a..4427f5996d12a 100644
--- a/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
+++ b/src/core/packages/chrome/browser-internal/src/side_effects/app_change_handler.ts
@@ -11,16 +11,12 @@ import type { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs';
 import type { ChromeDocTitle } from '@kbn/core-chrome-browser';
 import type { ChromeState } from '../state/chrome_state';
-import type { NextHeaderService } from '../services/next_header';
-
-type NextHeaderStart = ReturnType<NextHeaderService['start']>;
 
 export interface AppChangeHandlerDeps {
   currentAppId$: Observable<string | undefined>;
   stop$: Observable<void>;
   state: ChromeState;
   docTitle: ChromeDocTitle;
-  nextHeader: NextHeaderStart;
 }
 
 /**
@@ -32,12 +28,13 @@ export function setupAppChangeHandler({
   stop$,
   state,
   docTitle,
-  nextHeader,
 }: AppChangeHandlerDeps): void {
   currentAppId$.pipe(takeUntil(stop$)).subscribe(() => {
     // Reset UI elements
     state.breadcrumbs.legacyBadge.set(undefined);
     state.appMenu.set(undefined);
+    state.appHeader.set(undefined);
+    state.inlineAppHeader.set(false);
 
     // Reset breadcrumbs
     state.breadcrumbs.classic.set([]);
@@ -51,8 +48,5 @@ export function setupAppChangeHandler({
 
     // Reset document title
     docTitle.reset();
-
-    // Reset Chrome-Next header config (AI button is global and not cleared here)
-    nextHeader.reset();
   });
 }
diff --git a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
index 45b964e121d5e..a4e0f8ddfc0be 100644
--- a/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
+++ b/src/core/packages/chrome/browser-internal/src/state/chrome_state.ts
@@ -22,6 +22,7 @@ import type {
   ChromeNextAiButton,
   ChromeNextGlobalSearchConfig,
   ChromeUserBanner,
+  AppHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 
@@ -86,6 +87,10 @@ export interface ChromeState {
 
   /** Newsfeed handler registered by the newsfeed plugin */
   newsfeedHandler: State<{ open: () => void; hasNew$: Observable<boolean> } | undefined>;
+
+  /** Whether an inline AppHeader is currently mounted by the active app */
+  inlineAppHeader: State<boolean>;
+  appHeader: State<AppHeaderConfig | undefined>;
 }
 
 export interface ChromeStateDeps {
@@ -144,6 +149,12 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
     { open: () => void; hasNew$: Observable<boolean> } | undefined
   >(undefined);
 
+  // Inline AppHeader presence (managed by @kbn/app-header)
+  const inlineAppHeader = createState<boolean>(false);
+
+  // App header config (managed by chrome.next.appHeader.set)
+  const appHeader = createState<AppHeaderConfig | undefined>(undefined);
+
   return {
     visibility,
     style,
@@ -174,5 +185,7 @@ export function createChromeState({ application, docLinks }: ChromeStateDeps): C
     appDocumentationLink,
     feedbackHandler,
     newsfeedHandler,
+    inlineAppHeader,
+    appHeader,
   };
 }
diff --git a/src/core/packages/chrome/browser-internal/tsconfig.json b/src/core/packages/chrome/browser-internal/tsconfig.json
index ac33ffc8fbcc5..32cba3c3dfaef 100644
--- a/src/core/packages/chrome/browser-internal/tsconfig.json
+++ b/src/core/packages/chrome/browser-internal/tsconfig.json
@@ -54,6 +54,7 @@
     "@kbn/core-theme-browser-internal",
     "@kbn/core-feature-flags-browser",
     "@kbn/core-feature-flags-browser-mocks",
+    "@kbn/core-chrome-feature-flags",
     "@kbn/core-chrome-app-menu-components",
     "@kbn/core-chrome-sidebar-internal",
     "@kbn/core-chrome-sidebar-context",
diff --git a/src/core/packages/chrome/browser-mocks/moon.yml b/src/core/packages/chrome/browser-mocks/moon.yml
index efbeb88ea08b1..e3294c5747538 100644
--- a/src/core/packages/chrome/browser-mocks/moon.yml
+++ b/src/core/packages/chrome/browser-mocks/moon.yml
@@ -22,6 +22,7 @@ dependsOn:
   - '@kbn/core-chrome-browser-internal-types'
   - '@kbn/lazy-object'
   - '@kbn/core-chrome-sidebar-mocks'
+  - '@kbn/core-mount-utils-browser'
 tags:
   - shared-browser
   - package
diff --git a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
index 57a5670887b3a..579c5c8b63b2d 100644
--- a/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
+++ b/src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts
@@ -8,13 +8,15 @@
  */
 
 import { BehaviorSubject, of } from 'rxjs';
+import type { Observable } from 'rxjs';
+import type { MountPoint } from '@kbn/core-mount-utils-browser';
 import type { DeeplyMockedKeys } from '@kbn/utility-types-jest';
 import type { ReactNode } from 'react';
 import type {
   ChromeBadge,
   ChromeBreadcrumb,
-  ChromeNextHeaderConfig,
   ChromeNextGlobalSearchConfig,
+  AppHeaderConfig,
 } from '@kbn/core-chrome-browser';
 import type {
   InternalChromeSetup,
@@ -30,16 +32,28 @@ const createSetupContractMock = (): DeeplyMockedKeys<InternalChromeSetup> => {
 };
 
 const createStartContractMock = () => {
-  const nextHeaderState$ = new BehaviorSubject<ChromeNextHeaderConfig | undefined>(undefined);
   const nextGlobalSearchState$ = new BehaviorSubject<ChromeNextGlobalSearchConfig | undefined>(
     undefined
   );
   const nextUserMenuState$ = new BehaviorSubject<ReactNode>(null);
   const nextContextSwitcherState$ = new BehaviorSubject<ReactNode>(null);
+  const nextAppHeaderState$ = new BehaviorSubject<AppHeaderConfig | undefined>(undefined);
   const appDocumentationLinkState$ = new BehaviorSubject<string | undefined>(undefined);
 
   const startContract: DeeplyMockedKeys<InternalChromeStart> = lazyObject({
     withProvider: jest.fn((children) => children),
+    componentDeps: lazyObject({
+      basePath: lazyObject({
+        get: jest.fn().mockReturnValue(''),
+        prepend: jest.fn((path: string) => path),
+        remove: jest.fn(),
+        serverBasePath: '/',
+        assetsHrefBase: '/',
+      }),
+      legacyActionMenu$: new BehaviorSubject<MountPoint | undefined>(
+        undefined
+      ) as unknown as DeeplyMockedKeys<Observable<MountPoint | undefined>>,
+    }),
     sidebar: lazyObject(sidebarServiceMock.createStartContract()),
     navLinks: lazyObject({
       getNavLinks$: jest.fn().mockReturnValue(new BehaviorSubject([])),
@@ -113,31 +127,7 @@ const createStartContractMock = () => {
       getProjectHome$: jest.fn().mockReturnValue(of('/')),
     }),
     next: lazyObject({
-      header: lazyObject({
-        get$: jest.fn().mockReturnValue(nextHeaderState$),
-        set: jest.fn((config: Partial<ChromeNextHeaderConfig>) => {
-          const current = nextHeaderState$.getValue();
-          const next = { ...current, ...config };
-          nextHeaderState$.next(
-            Object.keys(next).length > 0 ? (next as ChromeNextHeaderConfig) : undefined
-          );
-        }),
-        reset: jest.fn((...keys: Array<keyof ChromeNextHeaderConfig>) => {
-          if (keys.length === 0) {
-            nextHeaderState$.next(undefined);
-            return;
-          }
-          const current = nextHeaderState$.getValue();
-          if (!current) return;
-          const next = { ...current };
-          for (const key of keys) {
-            delete next[key];
-          }
-          nextHeaderState$.next(
-            Object.keys(next).length > 0 ? (next as ChromeNextHeaderConfig) : undefined
-          );
-        }),
-      }),
+      isEnabled: false,
       aiButton: lazyObject({
         get$: jest.fn().mockReturnValue(new BehaviorSubject([])),
         register: jest.fn().mockReturnValue(() => {}),
@@ -160,6 +150,19 @@ const createStartContractMock = () => {
           nextContextSwitcherState$.next(content ?? null);
         }),
       }),
+      inlineAppHeader: lazyObject({
+        get$: jest.fn().mockReturnValue(new BehaviorSubject(false)),
+        set: jest.fn(),
+      }),
+      appHeader: lazyObject({
+        get$: jest.fn().mockReturnValue(nextAppHeaderState$),
+        set: jest.fn((config: AppHeaderConfig) => {
+          nextAppHeaderState$.next(config);
+          return () => {
+            nextAppHeaderState$.next(undefined);
+          };
+        }),
+      }),
     }),
     setGlobalFooter: jest.fn(),
     getGlobalFooter$: jest.fn().mockReturnValue(new BehaviorSubject(null)),
diff --git a/src/core/packages/chrome/browser-mocks/tsconfig.json b/src/core/packages/chrome/browser-mocks/tsconfig.json
index 504f008687092..8016e7adc00f9 100644
--- a/src/core/packages/chrome/browser-mocks/tsconfig.json
+++ b/src/core/packages/chrome/browser-mocks/tsconfig.json
@@ -16,7 +16,8 @@
     "@kbn/core-chrome-browser",
     "@kbn/core-chrome-browser-internal-types",
     "@kbn/lazy-object",
-    "@kbn/core-chrome-sidebar-mocks"
+    "@kbn/core-chrome-sidebar-mocks",
+    "@kbn/core-mount-utils-browser"
   ],
   "exclude": [
     "target/**/*",
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index c8a487728453e..b439738ff565b 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -9,6 +9,11 @@
 
 export type {
   AppDeepLinkId,
+  AppHeaderBack,
+  AppHeaderBadge,
+  AppHeaderBadgeItem,
+  AppHeaderConfig,
+  AppHeaderTab,
   AppId,
   ChromeBadge,
   ChromeBreadcrumbsBadge,
@@ -27,11 +32,14 @@ export type {
   ChromeNavControls,
   ChromeNavLink,
   ChromeNavLinks,
+  ChromeNextAiButton,
+  ChromeNextGlobalSearchConfig,
   ChromeRecentlyAccessed,
   ChromeRecentlyAccessedHistoryItem,
   ChromeSetup,
   ChromeStart,
   ChromeStyle,
+  ChromeNext,
   ChromeUserBanner,
   ChromeProjectNavigationNode,
   CloudLinkId,
@@ -54,15 +62,4 @@ export type {
   SidebarAppDefinition,
   SidebarSetup,
   SidebarStart,
-  ChromeNext,
-  ChromeNextAiButton,
-  ChromeNextGlobalSearchConfig,
-  ChromeNextHeaderBack,
-  ChromeNextHeaderBadge,
-  ChromeNextHeaderBadgeMenuItem,
-  ChromeNextHeaderCallout,
-  ChromeNextHeaderConfig,
-  ChromeNextHeaderGlobalActions,
-  ChromeNextHeaderMetadataSlotItem,
-  ChromeNextHeaderTab,
 } from './src';
diff --git a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
index c045d4c8db3dc..3146544ab01bf 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts
@@ -7,32 +7,78 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode, MouseEventHandler } from 'react';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import type { ChromeNextAiButton } from './ai_button';
 import type { ChromeNextGlobalSearchConfig } from './global_search';
-import type { ChromeNextHeaderConfig } from './header';
+
+/** @public */
+export interface AppHeaderBack {
+  href: string;
+  /** Click handler, called alongside href navigation when provided. */
+  onClick?: MouseEventHandler;
+  /** Destination name for accessibility (e.g. "Back to {label}"). */
+  label?: string;
+}
+
+/** @public */
+export interface AppHeaderBadge {
+  label: string;
+  /** EUI badge color. `filled` is intentionally excluded. */
+  color?: 'hollow' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'accent';
+  tooltip?: string;
+  onClick?: () => void;
+  onClickAriaLabel?: string;
+  'data-test-subj'?: string;
+  /** @deprecated Used for compatibility with existing breadcrumb badge custom renderers. */
+  renderCustomBadge?: (props: { badgeText: string }) => ReactElement;
+  /** Popover menu items for badge context menus. When provided, the badge becomes a dropdown trigger. */
+  items?: AppHeaderBadgeItem[];
+  /** Width of the popover menu panel in pixels. */
+  popoverWidth?: number;
+}
+
+/** @public */
+export interface AppHeaderBadgeItem {
+  name: string;
+  icon?: string;
+  onClick?: () => void;
+  items?: AppHeaderBadgeItem[];
+  popoverWidth?: number;
+  'data-test-subj'?: string;
+  disabled?: boolean;
+  toolTipContent?: string;
+}
+
+/** @public */
+export interface AppHeaderTab {
+  id: string;
+  label: string;
+  isSelected?: boolean;
+  onClick?: () => void;
+  href?: string;
+  badge?: number;
+  'data-test-subj'?: string;
+}
+
+/** @public */
+export interface AppHeaderConfig {
+  title?: string;
+  back?: string | AppHeaderBack;
+  tabs?: AppHeaderTab[];
+  badges?: AppHeaderBadge[];
+  menu?: AppMenuConfig;
+  onShare?: () => void;
+  favorite?: ReactNode;
+}
 
 /**
- * Chrome-Next APIs: header configuration, AI button slot, global search, user menu, and context switcher.
+ * Chrome-Next APIs: AI button slot, global search, user menu, context switcher, and app header.
  * @public
  */
 export interface ChromeNext {
-  header: {
-    /**
-     * Shallow-merge fields into the current Chrome-Next header configuration.
-     * Only provided keys are updated; `undefined` values in the partial are ignored.
-     * Use {@link reset} to clear fields.
-     */
-    set(config: Partial<ChromeNextHeaderConfig>): void;
-
-    /**
-     * Clear Chrome-Next header configuration.
-     * Called with no arguments: clears everything.
-     * Called with key names: clears only those fields.
-     * Automatically called with no arguments on app change.
-     */
-    reset(...keys: Array<keyof ChromeNextHeaderConfig>): void;
-  };
+  /** Whether the Chrome-Next feature flag is enabled. */
+  readonly isEnabled: boolean;
   aiButton: {
     /**
      * Register an AI button for the Chrome-Next header.
@@ -69,4 +115,14 @@ export interface ChromeNext {
      */
     set(content?: ReactNode): void;
   };
+  appHeader: {
+    /**
+     * Set the app header configuration for the Chrome-Next project header.
+     * Chrome renders an application top bar with back navigation, title, tabs,
+     * badges, menu, share action, and favorite action based on this config.
+     * Pass the config to show; the returned callback removes it.
+     * Per-app — cleared on app change.
+     */
+    set(config: AppHeaderConfig): () => void;
+  };
 }
diff --git a/src/core/packages/chrome/browser/src/chrome_next/header.ts b/src/core/packages/chrome/browser/src/chrome_next/header.ts
deleted file mode 100644
index 134c5cbe5fb3c..0000000000000
--- a/src/core/packages/chrome/browser/src/chrome_next/header.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-import type { ReactNode } from 'react';
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
-import type { IconType } from '@elastic/eui';
-
-/**
- * Unified configuration for the Chrome-controlled Chrome-Next header.
- * Apps provide structured data via `chrome.next.header.set(config)`;
- * Chrome renders title area, global actions, and app menu.
- */
-export interface ChromeNextHeaderConfig {
-  /**
-   * Page title displayed in the Chrome-controlled header.
-   * Can be the app name (e.g. "Discover") or a viewed object
-   * (e.g. a saved dashboard name). Single-line, truncated by Chrome if too long.
-   */
-  title?: string;
-
-  /**
-   * Badges inline next to the title. Chrome shows 1–2 as-is; for 3+, first badge plus "+N" popover
-   * for the rest. Max 200px per badge; `filled` is not exposed.
-   */
-  badges?: ChromeNextHeaderBadge[];
-
-  /**
-   * Second row below the title (max 3 items, all visible). Text (`EuiText`) or button (`EuiButtonEmpty`).
-   * TODO: render in `AppHeader`.
-   */
-  metadata?: ChromeNextHeaderMetadataSlotItem[];
-
-  /**
-   * Global object actions next to the title. Edit title and share use fixed Chrome icons;
-   * favorite is an optional app-supplied `ReactNode` (e.g. content-management FavoriteButton).
-   *
-   * Rendering order (fixed by Chrome): editTitle, share, favorite.
-   */
-  globalActions?: ChromeNextHeaderGlobalActions;
-
-  /**
-   * Optional tabs rendered as part of the header.
-   * When provided, increases the top bar height dynamically.
-   */
-  tabs?: ChromeNextHeaderTab[];
-
-  /**
-   * Optional single callout rendered below the title/tabs area.
-   * Only one callout at a time. Chrome controls styling.
-   */
-  callout?: ChromeNextHeaderCallout;
-
-  /**
-   * App menu (toolbar actions). Items, primary action, secondary action.
-   */
-  appMenu?: AppMenuConfig;
-
-  /**
-   * Optional explicit back navigation for the Chrome-Next header back control.
-   * When set, overrides breadcrumb-derived back destinations.
-   * A single object produces a direct link; an array produces a popover menu.
-   */
-  back?: ChromeNextHeaderBack | ChromeNextHeaderBack[];
-}
-
-/** Explicit back target for {@link ChromeNextHeaderConfig.back}. */
-export interface ChromeNextHeaderBack {
-  href: string;
-  /** Destination name for accessibility (e.g. "Back to {label}"). */
-  label?: string;
-}
-
-interface ChromeNextHeaderBadgeBase {
-  label: string;
-  /** EUI badge color. `filled` is intentionally excluded. */
-  color?: 'hollow' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'accent';
-  tooltip?: string;
-  'data-test-subj'?: string;
-}
-
-interface ChromeNextHeaderBadgeWithClick extends ChromeNextHeaderBadgeBase {
-  popoverWidth?: never;
-  items?: never;
-  onClick?: () => void;
-  onClickAriaLabel?: string;
-}
-
-interface ChromeNextHeaderPopoverBadge extends ChromeNextHeaderBadgeBase {
-  items: ChromeNextHeaderBadgeMenuItem[];
-  popoverWidth?: number;
-  onClick?: never;
-  onClickAriaLabel?: never;
-}
-
-/**
- * A menu item for badge context menus.
- * Leaf items have `onClick`; parent items have nested `items`.
- */
-export interface ChromeNextHeaderBadgeMenuItem {
-  /** Display label for the menu item. */
-  name: string;
-  /** Optional icon. */
-  icon?: IconType;
-  /** Handler for leaf items. Mutually exclusive with `items`. */
-  onClick?: () => void;
-  /** Nested sub-menu items. Mutually exclusive with `onClick`. */
-  items?: ChromeNextHeaderBadgeMenuItem[];
-  /** Width of the nested sub-menu panel (in px). Only used when `items` is provided. */
-  popoverWidth?: number;
-  /** Test subject identifier. */
-  'data-test-subj'?: string;
-  /** Whether the item is disabled. */
-  disabled?: boolean;
-  /** Optional tooltip content. */
-  toolTipContent?: string;
-}
-
-export type ChromeNextHeaderBadge = ChromeNextHeaderBadgeWithClick | ChromeNextHeaderPopoverBadge;
-
-/**
- * A single metadata slot item — either plain text or an interactive button.
- * Text renders as `EuiText`; button renders as `EuiButtonEmpty`.
- */
-export type ChromeNextHeaderMetadataSlotItem =
-  | { type: 'text'; label: string }
-  | { type: 'button'; label: string; onClick: () => void; iconType?: string };
-
-/**
- * Global actions beside the Chrome-Next title.
- */
-export interface ChromeNextHeaderGlobalActions {
-  /**
-   * Inline title edit (Chrome UI TBD). `onSave` runs when the user commits a new title.
-   */
-  editTitle?: {
-    onSave: (newTitle: string) => void;
-  };
-  /** Share; Chrome renders the icon. */
-  share?: {
-    onClick: () => void;
-  };
-  /** Favorite control as `ReactNode` (e.g. FavoriteButton) so apps supply providers and clients. */
-  /** TODO: should become a structured API */
-  favorite?: ReactNode;
-}
-
-export interface ChromeNextHeaderTab {
-  id: string;
-  label: string;
-  isSelected?: boolean;
-  onClick: () => void;
-  /** Optional badge count on the tab */
-  badge?: number;
-}
-
-export interface ChromeNextHeaderCallout {
-  title: string;
-  color: 'primary' | 'warning' | 'danger' | 'success';
-  text?: string;
-  /** When provided, renders a dismiss button */
-  onDismiss?: () => void;
-}
diff --git a/src/core/packages/chrome/browser/src/chrome_next/index.ts b/src/core/packages/chrome/browser/src/chrome_next/index.ts
index f54d39d6058c5..3e4a0c1657e78 100644
--- a/src/core/packages/chrome/browser/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser/src/chrome_next/index.ts
@@ -8,15 +8,12 @@
  */
 
 export type { ChromeNextAiButton } from './ai_button';
-export type { ChromeNext } from './chrome_next';
-export type { ChromeNextGlobalSearchConfig } from './global_search';
 export type {
-  ChromeNextHeaderBack,
-  ChromeNextHeaderBadge,
-  ChromeNextHeaderBadgeMenuItem,
-  ChromeNextHeaderCallout,
-  ChromeNextHeaderConfig,
-  ChromeNextHeaderGlobalActions,
-  ChromeNextHeaderMetadataSlotItem,
-  ChromeNextHeaderTab,
-} from './header';
+  ChromeNext,
+  AppHeaderConfig,
+  AppHeaderBack,
+  AppHeaderBadge,
+  AppHeaderBadgeItem,
+  AppHeaderTab,
+} from './chrome_next';
+export type { ChromeNextGlobalSearchConfig } from './global_search';
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 1e64cf7909cf9..4559e37841622 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -29,6 +29,16 @@ export type {
   ChromeRecentlyAccessedHistoryItem,
 } from './recently_accessed';
 export type { ChromeBadge, ChromeBreadcrumbsBadge, ChromeUserBanner, ChromeStyle } from './types';
+export type {
+  AppHeaderBack,
+  AppHeaderBadge,
+  AppHeaderBadgeItem,
+  AppHeaderConfig,
+  AppHeaderTab,
+  ChromeNext,
+  ChromeNextAiButton,
+  ChromeNextGlobalSearchConfig,
+} from './chrome_next';
 
 export type {
   ChromeProjectNavigationNode,
@@ -58,17 +68,3 @@ export type {
   SidebarSetup,
   SidebarStart,
 } from './sidebar';
-
-export type {
-  ChromeNext,
-  ChromeNextAiButton,
-  ChromeNextGlobalSearchConfig,
-  ChromeNextHeaderBack,
-  ChromeNextHeaderBadge,
-  ChromeNextHeaderBadgeMenuItem,
-  ChromeNextHeaderCallout,
-  ChromeNextHeaderConfig,
-  ChromeNextHeaderGlobalActions,
-  ChromeNextHeaderMetadataSlotItem,
-  ChromeNextHeaderTab,
-} from './chrome_next';
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index e9035e6b0a99a..15f53dc1d596f 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -15,14 +15,16 @@ import {
   ChromeComponentsProvider,
   ClassicHeader,
   ProjectHeader,
-  AppHeader,
   GlobalHeader,
   GridLayoutProjectSideNav,
   HeaderTopBanner,
   ChromelessHeader,
   AppMenuBar,
+  ChromeAppHeaderRenderer,
   Sidebar,
   useHasAppMenu,
+  useHasInlineAppHeader,
+  useHasChromeAppHeaderContent,
 } from '@kbn/core-chrome-browser-components';
 import type { ChromeComponentsDeps } from '@kbn/core-chrome-browser-components';
 import {
@@ -32,6 +34,7 @@ import {
   useSideNavWidth,
 } from '@kbn/core-chrome-browser-hooks';
 import { isNextChrome } from '@kbn/core-chrome-feature-flags';
+
 import { useGlobalFooter, useHasHeaderBanner } from '@kbn/core-chrome-browser-hooks/internal';
 import { GridLayoutGlobalStyles } from './grid_global_app_style';
 import type { LayoutService, LayoutServiceStartDeps } from '../../layout_service';
@@ -94,6 +97,7 @@ const useChromeSlots = (nextChrome: boolean): ChromeSlots => {
   const chromeVisible = useIsChromeVisible();
   const chromeStyle = useChromeStyle();
   const hasAppMenu = useHasAppMenu();
+  const hasInlineAppHeader = useHasInlineAppHeader();
   const hasHeaderBanner = useHasHeaderBanner();
   const footer = useGlobalFooter();
   const sidebarWidth = useSidebarWidth();
@@ -102,6 +106,9 @@ const useChromeSlots = (nextChrome: boolean): ChromeSlots => {
   const layoutConfigKey =
     chromeStyle === 'classic' ? 'classic' : nextChrome ? 'projectNext' : 'project';
 
+  const hasChromeAppHeaderContent = useHasChromeAppHeaderContent();
+  const needsChromeAppHeader = nextChrome && !hasInlineAppHeader && hasChromeAppHeaderContent;
+
   const layoutConfig: ChromeLayoutConfig = {
     ...layoutConfigs[layoutConfigKey],
     sidebarWidth,
@@ -125,7 +132,7 @@ const useChromeSlots = (nextChrome: boolean): ChromeSlots => {
       ...base,
       header: <GlobalHeader />,
       navigation: <GridLayoutProjectSideNav />,
-      applicationTopBar: <AppHeader />,
+      applicationTopBar: needsChromeAppHeader ? <ChromeAppHeaderRenderer /> : undefined,
     };
   }
 
diff --git a/src/platform/plugins/shared/dashboard/moon.yml b/src/platform/plugins/shared/dashboard/moon.yml
index 75b71ea3e653a..b846561ec14ac 100644
--- a/src/platform/plugins/shared/dashboard/moon.yml
+++ b/src/platform/plugins/shared/dashboard/moon.yml
@@ -113,6 +113,7 @@ dependsOn:
   - '@kbn/test'
   - '@kbn/core-chrome-app-menu-components'
   - '@kbn/core-chrome-app-menu'
+  - '@kbn/app-header'
   - '@kbn/test-jest-helpers'
   - '@kbn/scout'
   - '@kbn/cps-utils'
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
index cf99d7886de8e..5876014854fc4 100644
--- a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
+++ b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -27,11 +27,12 @@ import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import type { Query } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { getManagedContentBadge } from '@kbn/managed-content-badge';
-import type { TopNavMenuBadgeProps, TopNavMenuProps } from '@kbn/navigation-plugin/public';
+import type { TopNavMenuBadgeProps } from '@kbn/navigation-plugin/public';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyLabsFlyout, withSuspense } from '@kbn/presentation-util-plugin/public';
 
 import { AppMenu } from '@kbn/core-chrome-app-menu';
+import { ChromeAppHeaderRegistration } from '@kbn/app-header';
 import { UI_SETTINGS } from '../../common/constants';
 import { DASHBOARD_APP_ID } from '../../common/page_bundle_constants';
 import type { SaveDashboardReturn } from '../dashboard_api/save_modal/types';
@@ -312,24 +313,12 @@ export function InternalDashboardTopNav({
     showResetChange,
   });
 
-  useEffect(() => {
-    coreServices.chrome.next.header.set({
-      title: title ?? '',
-      ...(chromeNextHeaderFavoriteGlobalAction
-        ? { globalActions: { favorite: chromeNextHeaderFavoriteGlobalAction } }
-        : {}),
-    });
-    return () => {
-      coreServices.chrome.next.header.reset();
-    };
-  }, [title, chromeNextHeaderFavoriteGlobalAction]);
-
   UseUnmount(() => {
     dashboardApi.clearOverlays();
   });
 
-  const badges = useMemo(() => {
-    const allBadges: TopNavMenuProps['badges'] = [];
+  const badges = useMemo<TopNavMenuBadgeProps[]>(() => {
+    const allBadges: TopNavMenuBadgeProps[] = [];
 
     const { showWriteControls } = getDashboardCapabilities();
     if (showWriteControls && dashboardApi.isManaged) {
@@ -393,24 +382,30 @@ export function InternalDashboardTopNav({
     });
   }, [lastSavedId]);
 
+  const appMenuConfig = visibilityProps.showTopNavMenu
+    ? viewMode === 'edit'
+      ? editModeTopNavConfig
+      : viewModeTopNavConfig
+    : undefined;
+
   return (
     <div css={styles.container}>
+      {visibilityProps.showTopNavMenu && viewMode !== 'print' && (
+        <ChromeAppHeaderRegistration
+          title={dashboardTitle}
+          // TODO: instead of hardcoding this should also be dynamic like customLeadingBreadCrumbs
+          back="/app/dashboards#/list"
+          menu={appMenuConfig}
+          favorite={chromeNextHeaderFavoriteGlobalAction}
+        />
+      )}
       <EuiScreenReaderOnly>
         <h1
           id="dashboardTitle"
           ref={dashboardTitleRef}
         >{`${getDashboardBreadcrumb()} - ${dashboardTitle}`}</h1>
       </EuiScreenReaderOnly>
-      <AppMenu
-        setAppMenu={coreServices.chrome.setAppMenu}
-        config={
-          visibilityProps.showTopNavMenu
-            ? viewMode === 'edit'
-              ? editModeTopNavConfig
-              : viewModeTopNavConfig
-            : undefined
-        }
-      />
+      <AppMenu setAppMenu={coreServices.chrome.setAppMenu} config={appMenuConfig} />
       {viewMode !== 'print' && visibilityProps.showSearchBar && (
         <unifiedSearchService.ui.SearchBar
           {...visibilityProps}
diff --git a/src/platform/plugins/shared/dashboard/tsconfig.json b/src/platform/plugins/shared/dashboard/tsconfig.json
index cf9cc5aae0584..4c96150941579 100644
--- a/src/platform/plugins/shared/dashboard/tsconfig.json
+++ b/src/platform/plugins/shared/dashboard/tsconfig.json
@@ -110,6 +110,7 @@
     "@kbn/test",
     "@kbn/core-chrome-app-menu-components",
     "@kbn/core-chrome-app-menu",
+    "@kbn/app-header",
     "@kbn/test-jest-helpers",
     "@kbn/scout",
     "@kbn/cps-utils",
@@ -123,7 +124,8 @@
     "@kbn/dashboard-navigation-options-common",
     "@kbn/dashboard-navigation-options-components",
     "@kbn/dashboard-navigation-options-schema",
-    "@kbn/as-code-shared-telemetry"
+    "@kbn/as-code-shared-telemetry",
+    "@kbn/core-chrome-browser"
   ],
   "exclude": [
     "target/**/*"
diff --git a/src/platform/plugins/shared/discover/moon.yml b/src/platform/plugins/shared/discover/moon.yml
index b8665f189eacb..f8e4212d3c935 100644
--- a/src/platform/plugins/shared/discover/moon.yml
+++ b/src/platform/plugins/shared/discover/moon.yml
@@ -85,6 +85,7 @@ dependsOn:
   - '@kbn/deeplinks-analytics'
   - '@kbn/shared-ux-markdown'
   - '@kbn/data-view-utils'
+  - '@kbn/app-header'
   - '@kbn/presentation-publishing'
   - '@kbn/aiops-log-pattern-analysis'
   - '@kbn/elastic-agent-utils'
diff --git a/src/platform/plugins/shared/discover/public/application/context/context_app.tsx b/src/platform/plugins/shared/discover/public/application/context/context_app.tsx
index c63c689d7f72d..1352188f6bd0d 100644
--- a/src/platform/plugins/shared/discover/public/application/context/context_app.tsx
+++ b/src/platform/plugins/shared/discover/public/application/context/context_app.tsx
@@ -41,6 +41,7 @@ import { SurrDocType } from './services/context';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { setBreadcrumbs } from '../../utils/breadcrumbs';
 import { useScopedServices } from '../../components/scoped_services_provider';
+import { DiscoverAppHeader } from '../../components/discover_app_header';
 
 const ContextAppContentMemoized = memo(ContextAppContent);
 
@@ -261,6 +262,12 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
               values: { anchorId },
             })}
           </h1>
+          <DiscoverAppHeader
+            title={i18n.translate('discover.context.headerTitle', {
+              defaultMessage: 'Surrounding documents',
+            })}
+            back={referrer ? { href: referrer } : undefined}
+          />
           <TopNavMenu {...getNavBarProps()} />
           <EuiPage css={styles.docsPage}>
             <EuiPageBody
diff --git a/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx b/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx
index 629aeb26bd366..a2e7b4e2f1e93 100644
--- a/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx
+++ b/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx
@@ -20,6 +20,7 @@ import { useDiscoverServices } from '../../../hooks/use_discover_services';
 import { SingleDocViewer } from './single_doc_viewer';
 import { createDataViewDataSource } from '../../../../common/data_sources';
 import { useScopedServices } from '../../../components/scoped_services_provider';
+import { DiscoverAppHeader } from '../../../components/discover_app_header';
 
 export interface DocProps extends EsDocSearchProps {
   /**
@@ -65,8 +66,13 @@ export function Doc(props: DocProps) {
   }, [chrome, props.referrer, props.index, props.id, dataView, locator, services]);
 
   return (
-    <EuiPage>
-      <h1
+    <>
+      <DiscoverAppHeader
+        title={`${props.index}#${props.id}`}
+        back={props.referrer ? { href: props.referrer } : undefined}
+      />
+      <EuiPage>
+        <h1
         id="singleDocTitle"
         className="euiScreenReaderOnly"
         data-test-subj="discoverSingleDocTitle"
@@ -152,6 +158,7 @@ export function Doc(props: DocProps) {
           </div>
         )}
       </EuiPageBody>
-    </EuiPage>
+      </EuiPage>
+    </>
   );
 }
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx
index 4ddd5b4ab1614..55c27df6dd415 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx
@@ -38,6 +38,7 @@ import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css';
 import { QueryClient, QueryClientProvider } from '@kbn/react-query';
+
 import { VIEW_MODE } from '../../../../../common/constants';
 import { useAppStateSelector } from '../../state_management/redux';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx b/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
index f2b19d664096e..44d09f7932739 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/single_tab_view/single_tab_view_with_app_menu.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import { AppMenu } from '@kbn/core-chrome-app-menu';
 import { SingleTabView, type SingleTabViewProps } from '.';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
@@ -18,15 +18,6 @@ export const SingleTabViewWithAppMenu = (props: SingleTabViewProps) => {
   const isNextChrome = discoverFeatureFlags.getIsNextChrome();
   const topNavMenuItems = useTopNavMenuItems();
 
-  useEffect(() => {
-    if (isNextChrome && topNavMenuItems) {
-      chrome.next.header.set({ appMenu: topNavMenuItems });
-      return () => {
-        chrome.next.header.reset('appMenu');
-      };
-    }
-  }, [isNextChrome, topNavMenuItems, chrome.next.header]);
-
   return (
     <>
       {!isNextChrome && topNavMenuItems && (
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
index 7f77f7208f78a..8f969412b3783 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/hide_tabs_bar.tsx
@@ -35,15 +35,6 @@ export const HideTabsBar: FC<{
     };
   }, [dispatch]);
 
-  useEffect(() => {
-    if (isNextChrome && customizationContext.displayMode === 'standalone' && topNavMenuItems) {
-      chrome.next.header.set({ appMenu: topNavMenuItems });
-      return () => {
-        chrome.next.header.reset('appMenu');
-      };
-    }
-  }, [isNextChrome, customizationContext.displayMode, topNavMenuItems, chrome.next.header]);
-
   return (
     <>
       {
diff --git a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
index fba76539a3052..9fc83bd77a2f3 100644
--- a/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/components/tabs_view/tabs_view.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { EuiResizeObserver } from '@elastic/eui';
 import { UnifiedTabs, type UnifiedTabsProps } from '@kbn/unified-tabs';
 import { AppMenuComponent } from '@kbn/core-chrome-app-menu-components';
@@ -49,15 +49,6 @@ export const TabsView = (props: SingleTabViewProps) => {
     topNavMenuItems,
   } = useAppMenuData({ currentDataView });
 
-  useEffect(() => {
-    if (isNextChrome && topNavMenuItems) {
-      services.chrome.next.header.set({ appMenu: topNavMenuItems });
-      return () => {
-        services.chrome.next.header.reset('appMenu');
-      };
-    }
-  }, [isNextChrome, topNavMenuItems, services.chrome.next.header]);
-
   const onEvent: UnifiedTabsProps['onEBTEvent'] = useCallback(
     (event) => {
       void scopedEbtManager.trackTabsEvent(event);
diff --git a/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx b/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx
index bdd71a2c44c7d..46c00c77cfb5d 100644
--- a/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx
+++ b/src/platform/plugins/shared/discover/public/application/main/discover_main_route.tsx
@@ -16,6 +16,8 @@ import type { AppMountParameters } from '@kbn/core/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 import useLatest from 'react-use/lib/useLatest';
 import { i18n } from '@kbn/i18n';
+import { DiscoverAppHeader } from '../../components/discover_app_header';
+import { useTopNavMenuItems } from './components/top_nav/use_top_nav_menu_items';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import type { CustomizationCallback, DiscoverCustomizationContext } from '../../customizations';
 import { DiscoverCustomizationContextProvider } from '../../customizations';
@@ -103,6 +105,11 @@ export const DiscoverMainRoute = ({
   );
 };
 
+const DiscoverMainAppHeader: React.FC<{ title: string }> = ({ title }) => {
+  const appMenu = useTopNavMenuItems();
+  return <DiscoverAppHeader title={title} appMenu={appMenu} />;
+};
+
 const DiscoverMainRouteContent = (props: SingleTabViewProps) => {
   const { customizationContext, runtimeStateManager } = props;
   const services = useDiscoverServices();
@@ -220,16 +227,9 @@ const DiscoverMainRouteContent = (props: SingleTabViewProps) => {
         titleBreadcrumbText: persistedDiscoverSession?.title,
         services,
       });
-      chrome.next.header.set({
-        title: persistedDiscoverSession?.title || 'Discover',
-      });
     }
-    return () => {
-      chrome.next.header.reset('title');
-    };
   }, [
     chrome.docTitle,
-    chrome.next.header,
     persistedDiscoverSession?.title,
     customizationContext.displayMode,
     services,
@@ -271,6 +271,9 @@ const DiscoverMainRouteContent = (props: SingleTabViewProps) => {
     <ChartPortalsRenderer runtimeStateManager={runtimeStateManager}>
       <DiscoverTopNavMenuProvider customizationContext={customizationContext}>
         <>
+          {customizationContext.displayMode === 'standalone' && (
+            <DiscoverMainAppHeader title={persistedDiscoverSession?.title || 'Discover'} />
+          )}
           <h1 className="euiScreenReaderOnly" data-test-subj="discoverSavedSearchTitle">
             {persistedDiscoverSession?.title
               ? i18n.translate('discover.pageTitleWithSavedSearch', {
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx b/src/platform/plugins/shared/discover/public/components/discover_app_header/discover_app_header.tsx
similarity index 50%
rename from src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
rename to src/platform/plugins/shared/discover/public/components/discover_app_header/discover_app_header.tsx
index d861ecf3b8d7f..c07d43fdea229 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx
+++ b/src/platform/plugins/shared/discover/public/components/discover_app_header/discover_app_header.tsx
@@ -8,19 +8,16 @@
  */
 
 import React from 'react';
-import { AppHeaderShell } from './app_header_shell';
-import { AppBadges } from './app_badges';
-import { TitleArea } from './title_area';
-import { GlobalActions } from './global_actions';
-import { AppMenu } from './app_menu';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { ChromeAppHeaderRegistration } from '@kbn/app-header';
+import type { AppHeaderBack } from '@kbn/app-header';
 
-export const AppHeader = React.memo(() => (
-  <AppHeaderShell
-    title={<TitleArea />}
-    badges={<AppBadges />}
-    titleActions={<GlobalActions />}
-    trailing={<AppMenu />}
-  />
-));
+export interface DiscoverAppHeaderProps {
+  title: string;
+  back?: string | AppHeaderBack;
+  appMenu?: AppMenuConfig;
+}
 
-AppHeader.displayName = 'AppHeader';
+export const DiscoverAppHeader: React.FC<DiscoverAppHeaderProps> = ({ title, back, appMenu }) => (
+  <ChromeAppHeaderRegistration title={title} back={back} menu={appMenu} />
+);
diff --git a/src/core/packages/chrome/browser-internal/src/services/next_header/index.ts b/src/platform/plugins/shared/discover/public/components/discover_app_header/index.ts
similarity index 78%
rename from src/core/packages/chrome/browser-internal/src/services/next_header/index.ts
rename to src/platform/plugins/shared/discover/public/components/discover_app_header/index.ts
index e4f9347526f4e..8d2a5a107a6af 100644
--- a/src/core/packages/chrome/browser-internal/src/services/next_header/index.ts
+++ b/src/platform/plugins/shared/discover/public/components/discover_app_header/index.ts
@@ -7,4 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { NextHeaderService } from './next_header_service';
+export { DiscoverAppHeader } from './discover_app_header';
+export type { DiscoverAppHeaderProps } from './discover_app_header';
diff --git a/src/platform/plugins/shared/discover/tsconfig.json b/src/platform/plugins/shared/discover/tsconfig.json
index cec8cd56a7ae4..b9ac40064f05b 100644
--- a/src/platform/plugins/shared/discover/tsconfig.json
+++ b/src/platform/plugins/shared/discover/tsconfig.json
@@ -80,6 +80,7 @@
     "@kbn/deeplinks-analytics",
     "@kbn/shared-ux-markdown",
     "@kbn/data-view-utils",
+    "@kbn/app-header",
     "@kbn/presentation-publishing",
     "@kbn/aiops-log-pattern-analysis",
     "@kbn/elastic-agent-utils",
diff --git a/src/platform/plugins/shared/management/public/plugin.tsx b/src/platform/plugins/shared/management/public/plugin.tsx
index 4c3002ea9f528..d357d495857a6 100644
--- a/src/platform/plugins/shared/management/public/plugin.tsx
+++ b/src/platform/plugins/shared/management/public/plugin.tsx
@@ -165,13 +165,12 @@ export class ManagementPlugin
           cloud: deps.cloud,
           isAirGapped,
           setBreadcrumbs: (newBreadcrumbs) => {
+            const [, ...trailingBreadcrumbs] = newBreadcrumbs;
             if (deps.serverless) {
-              // drop the root management breadcrumb in serverless because it comes from the navigation tree
-              const [, ...trailingBreadcrumbs] = newBreadcrumbs;
               deps.serverless.setBreadcrumbs(trailingBreadcrumbs);
             } else {
               coreStart.chrome.setBreadcrumbs(newBreadcrumbs, {
-                project: { value: newBreadcrumbs, absolute: true },
+                project: { value: trailingBreadcrumbs, absolute: true },
               });
             }
           },
diff --git a/tsconfig.base.json b/tsconfig.base.json
index e969f4bc598f8..8c14e1cf17211 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -150,6 +150,8 @@
       "@kbn/apm-ui-shared/*": ["src/platform/packages/shared/kbn-apm-ui-shared/*"],
       "@kbn/apm-utils": ["src/platform/packages/shared/kbn-apm-utils"],
       "@kbn/apm-utils/*": ["src/platform/packages/shared/kbn-apm-utils/*"],
+      "@kbn/app-header": ["src/core/packages/chrome/app-header"],
+      "@kbn/app-header/*": ["src/core/packages/chrome/app-header/*"],
       "@kbn/app-link-test-plugin": ["src/platform/test/plugin_functional/plugins/app_link_test"],
       "@kbn/app-link-test-plugin/*": ["src/platform/test/plugin_functional/plugins/app_link_test/*"],
       "@kbn/application-usage-test-plugin": ["x-pack/platform/test/usage_collection/plugins/application_usage_test"],
diff --git a/x-pack/platform/plugins/shared/index_management/moon.yml b/x-pack/platform/plugins/shared/index_management/moon.yml
index 84b3d152589b4..df4caf54a6602 100644
--- a/x-pack/platform/plugins/shared/index_management/moon.yml
+++ b/x-pack/platform/plugins/shared/index_management/moon.yml
@@ -80,6 +80,8 @@ dependsOn:
   - '@kbn/search-index-documents'
   - '@kbn/cloud-connect-plugin'
   - '@kbn/shared-ux-column-presets'
+  - '@kbn/core-chrome-app-menu-components'
+  - '@kbn/app-header'
 tags:
   - plugin
   - prod
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx
index c259f4eed8483..f3de534d9aac0 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx
@@ -7,8 +7,8 @@
 
 import React, { useState, useEffect, useMemo } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiPageSection, EuiSpacer, EuiPageHeader } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiPageSection, EuiSpacer } from '@elastic/eui';
 
 import { useRedirectPath } from '../../../../hooks/redirect_path';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
@@ -17,6 +17,7 @@ import { useComponentTemplatesContext } from '../../component_templates_context'
 import { useUpdateAssociatedDsMappings } from '../component_template_ds_mappings/use_update_associated_ds_mappings';
 import { ComponentTemplateForm } from '../component_template_form';
 import { useStepFromQueryString } from '../use_step_from_query_string';
+import { PageHeader } from '../../../page_header';
 
 interface Props {
   /**
@@ -125,25 +126,21 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
 
   return (
     <EuiPageSection restrictWidth style={{ width: '100%' }}>
-      <EuiPageHeader
-        pageTitle={
-          <span data-test-subj="pageTitle">
-            {isCloning ? (
-              <FormattedMessage
-                id="xpack.idxMgmt.cloneComponentTemplate.pageTitle"
-                defaultMessage="Clone component template"
-              />
-            ) : (
-              <FormattedMessage
-                id="xpack.idxMgmt.createComponentTemplate.pageTitle"
-                defaultMessage="Create component template"
-              />
-            )}
-          </span>
+      <PageHeader
+        title={
+          isCloning
+            ? i18n.translate('xpack.idxMgmt.cloneComponentTemplate.pageTitle', {
+                defaultMessage: 'Clone component template',
+              })
+            : i18n.translate('xpack.idxMgmt.createComponentTemplate.pageTitle', {
+                defaultMessage: 'Create component template',
+              })
         }
-        bottomBorder
+        back="/app/management/data/index_management/component_templates"
+        fallback={{
+          'data-test-subj': 'pageTitle',
+        }}
       />
-
       <EuiSpacer size="l" />
 
       <ComponentTemplateForm
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx
index 25a6874cd98ea..d48370e360f4d 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx
@@ -7,8 +7,9 @@
 
 import React, { useState, useEffect, useMemo } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiPageSection, EuiPageHeader, EuiSpacer, EuiCallOut } from '@elastic/eui';
+import { EuiPageSection, EuiSpacer, EuiCallOut } from '@elastic/eui';
 
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 import { useComponentTemplatesContext } from '../../component_templates_context';
@@ -16,6 +17,7 @@ import type { ComponentTemplateDeserialized, Error } from '../../shared_imports'
 import { PageLoading, PageError, attemptToURIDecode } from '../../shared_imports';
 import { ComponentTemplateForm } from '../component_template_form';
 import { useRedirectPath } from '../../../../hooks/redirect_path';
+import { PageHeader } from '../../../page_header';
 
 import { useStepFromQueryString } from '../use_step_from_query_string';
 import { useUpdateAssociatedDsMappings } from '../component_template_ds_mappings/use_update_associated_ds_mappings';
@@ -115,19 +117,16 @@ export const ComponentTemplateEdit: React.FunctionComponent<RouteComponentProps<
 
   return (
     <EuiPageSection restrictWidth style={{ width: '100%' }}>
-      <EuiPageHeader
-        pageTitle={
-          <span data-test-subj="pageTitle">
-            <FormattedMessage
-              id="xpack.idxMgmt.componentTemplateEdit.editPageTitle"
-              defaultMessage="Edit component template ''{name}''"
-              values={{ name: decodedName }}
-            />
-          </span>
-        }
-        bottomBorder
+      <PageHeader
+        title={i18n.translate('xpack.idxMgmt.componentTemplateEdit.editPageTitle', {
+          defaultMessage: "Edit component template ''{name}''",
+          values: { name: decodedName },
+        })}
+        back="/app/management/data/index_management/component_templates"
+        fallback={{
+          'data-test-subj': 'pageTitle',
+        }}
       />
-
       <EuiSpacer size="l" />
 
       {componentTemplate?.deprecated && (
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
new file mode 100644
index 0000000000000..a237e2e962b38
--- /dev/null
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { AppHeader as PageHeader } from '@kbn/app-header';
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx
index 4e430a3d026c7..3fcd83a1a1342 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx
@@ -8,7 +8,7 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSpacer, EuiButton, EuiPageHeader } from '@elastic/eui';
+import { EuiSpacer, EuiButton } from '@elastic/eui';
 import type { ScopedHistory } from '@kbn/core/public';
 
 import { allowAutoCreateRadioIds, STANDARD_INDEX_MODE } from '../../../../common/constants';
@@ -26,13 +26,14 @@ import {
 } from '../index_templates';
 import { StepLogisticsContainer, StepComponentContainer, StepReviewContainer } from './steps';
 import { buildTemplateFromWizardData } from './utils/build_template_from_wizard_data';
+import { PageHeader } from '../page_header';
 
 const { stripEmptyFields } = serializers;
 const { FormWizard, FormWizardStep } = Forms;
 const { useGlobalFlyout } = GlobalFlyout;
 
 interface Props {
-  title: string | JSX.Element;
+  title: string;
   onSave: (template: TemplateDeserialized) => void;
   clearSaveError: () => void;
   isSaving: boolean;
@@ -273,9 +274,14 @@ export const TemplateForm = ({
 
   return (
     <>
-      {/* Form header */}
-      <EuiPageHeader pageTitle={<span data-test-subj="pageTitle">{title}</span>} bottomBorder />
-
+      <PageHeader
+        title={title}
+        back="/app/management/data/index_management/templates"
+        padding={{ bleed: 'l' }}
+        fallback={{
+          'data-test-subj': 'pageTitle',
+        }}
+      />
       <EuiSpacer size="m" />
 
       {isLegacyIndexTemplate && (
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
index 1cb4e9aa3a4a3..a85a0bfa9384b 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
@@ -5,12 +5,15 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { documentationService } from '../../services/documentation';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../services/breadcrumbs';
+import { PageHeader } from '../../components/page_header';
 
 import { CreatePolicyWizard } from './create_policy_wizard';
 import { CreatePolicyContextProvider } from './create_policy_context';
@@ -20,40 +23,58 @@ export const EnrichPolicyCreate: React.FunctionComponent<RouteComponentProps> =
     breadcrumbService.setBreadcrumbs(IndexManagementBreadcrumb.enrichPoliciesCreate);
   }, []);
 
+  const appMenu = useMemo<AppMenuConfig>(
+    () => ({
+      items: [
+        {
+          id: 'createEnrichPolicyDocumentationLink',
+          order: 0,
+          overflow: true,
+          label: i18n.translate('xpack.idxMgmt.enrichPolicyCreate.titleDocsLinkText', {
+            defaultMessage: 'Documentation',
+          }),
+          iconType: 'documentation',
+          href: documentationService.getCreateEnrichPolicyLink(),
+          target: '_blank',
+          testId: 'createEnrichPolicyDocumentationLink',
+        },
+      ],
+    }),
+    []
+  );
+
   return (
     <CreatePolicyContextProvider>
-      <EuiPageHeader
-        data-test-subj="createEnrichPolicyHeaderContent"
-        pageTitle={
-          <span data-test-subj="appTitle">
+      <PageHeader
+        title={i18n.translate('xpack.idxMgmt.enrichPolicyCreate.appTitle', {
+          defaultMessage: 'Create enrich policy',
+        })}
+        back="/app/management/data/index_management/enrich_policies"
+        menu={appMenu}
+        padding={{ bleed: 'l' }}
+        fallback={{
+          'data-test-subj': 'createEnrichPolicyHeaderContent',
+          description: (
             <FormattedMessage
-              id="xpack.idxMgmt.enrichPolicyCreate.appTitle"
-              defaultMessage="Create enrich policy"
+              id="xpack.idxMgmt.enrichPolicyCreate.appDescription"
+              defaultMessage="Specify how to retrieve and enrich your incoming data."
             />
-          </span>
-        }
-        description={
-          <FormattedMessage
-            id="xpack.idxMgmt.enrichPolicyCreate.appDescription"
-            defaultMessage="Specify how to retrieve and enrich your incoming data."
-          />
-        }
-        bottomBorder
-        rightSideItems={[
-          <EuiButtonEmpty
-            href={documentationService.getCreateEnrichPolicyLink()}
-            target="_blank"
-            iconType="question"
-            data-test-subj="createEnrichPolicyDocumentationLink"
-          >
-            <FormattedMessage
-              id="xpack.idxMgmt.enrichPolicyCreate.titleDocsLinkText"
-              defaultMessage="Documentation"
-            />
-          </EuiButtonEmpty>,
-        ]}
+          ),
+          rightSideItems: [
+            <EuiButtonEmpty
+              href={documentationService.getCreateEnrichPolicyLink()}
+              target="_blank"
+              iconType="question"
+              data-test-subj="createEnrichPolicyDocumentationLink"
+            >
+              <FormattedMessage
+                id="xpack.idxMgmt.enrichPolicyCreate.titleDocsLinkText"
+                defaultMessage="Documentation"
+              />
+            </EuiButtonEmpty>,
+          ],
+        }}
       />
-
       <EuiSpacer size="l" />
 
       <CreatePolicyWizard />
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
index af325bbe60dc8..b71a7d18ec5bf 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
@@ -5,11 +5,16 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
+
+import type { AppHeaderTab } from '@kbn/app-header';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { PageHeader } from '../../components/page_header';
 
 import { Section } from '../../../../common/constants';
 import { documentationService } from '../../services/documentation';
@@ -43,88 +48,105 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
     plugins: { console: consolePlugin },
     privs,
   } = useAppContext();
-  const tabs = [
+  const onSectionChange = (newSection: Section) => {
+    history.push(`/${newSection}`);
+  };
+
+  const tabs: AppHeaderTab[] = [
     {
       id: Section.Indices,
-      name: <FormattedMessage id="xpack.idxMgmt.home.indicesTabTitle" defaultMessage="Indices" />,
+      label: i18n.translate('xpack.idxMgmt.home.indicesTabTitle', { defaultMessage: 'Indices' }),
+      isSelected: section === Section.Indices,
+      onClick: () => onSectionChange(Section.Indices),
+      'data-test-subj': `${Section.Indices}Tab`,
     },
     {
       id: Section.DataStreams,
-      name: (
-        <FormattedMessage
-          id="xpack.idxMgmt.home.dataStreamsTabTitle"
-          defaultMessage="Data Streams"
-        />
-      ),
+      label: i18n.translate('xpack.idxMgmt.home.dataStreamsTabTitle', {
+        defaultMessage: 'Data Streams',
+      }),
+      isSelected: section === Section.DataStreams,
+      onClick: () => onSectionChange(Section.DataStreams),
+      'data-test-subj': `${Section.DataStreams}Tab`,
     },
     {
       id: Section.IndexTemplates,
-      name: (
-        <FormattedMessage
-          id="xpack.idxMgmt.home.indexTemplatesTabTitle"
-          defaultMessage="Index Templates"
-        />
-      ),
+      label: i18n.translate('xpack.idxMgmt.home.indexTemplatesTabTitle', {
+        defaultMessage: 'Index Templates',
+      }),
+      isSelected: section === Section.IndexTemplates,
+      onClick: () => onSectionChange(Section.IndexTemplates),
+      'data-test-subj': `${Section.IndexTemplates}Tab`,
     },
     {
       id: Section.ComponentTemplates,
-      name: (
-        <FormattedMessage
-          id="xpack.idxMgmt.home.componentTemplatesTabTitle"
-          defaultMessage="Component Templates"
-        />
-      ),
+      label: i18n.translate('xpack.idxMgmt.home.componentTemplatesTabTitle', {
+        defaultMessage: 'Component Templates',
+      }),
+      isSelected: section === Section.ComponentTemplates,
+      onClick: () => onSectionChange(Section.ComponentTemplates),
+      'data-test-subj': `${Section.ComponentTemplates}Tab`,
     },
   ];
 
   if (privs.monitorEnrich) {
     tabs.push({
       id: Section.EnrichPolicies,
-      name: (
-        <FormattedMessage
-          id="xpack.idxMgmt.home.enrichPoliciesTabTitle"
-          defaultMessage="Enrich Policies"
-        />
-      ),
+      label: i18n.translate('xpack.idxMgmt.home.enrichPoliciesTabTitle', {
+        defaultMessage: 'Enrich Policies',
+      }),
+      isSelected: section === Section.EnrichPolicies,
+      onClick: () => onSectionChange(Section.EnrichPolicies),
+      'data-test-subj': `${Section.EnrichPolicies}Tab`,
     });
   }
 
-  const onSectionChange = (newSection: Section) => {
-    history.push(`/${newSection}`);
-  };
+  const appMenu = useMemo<AppMenuConfig>(
+    () => ({
+      items: [
+        {
+          id: 'documentationLink',
+          order: 0,
+          overflow: true,
+          label: i18n.translate('xpack.idxMgmt.home.idxMgmtDocsLinkText', {
+            defaultMessage: 'Documentation',
+          }),
+          iconType: 'documentation',
+          href: documentationService.getIdxMgmtDocumentationLink(),
+          target: '_blank',
+          testId: 'documentationLink',
+        },
+      ],
+    }),
+    []
+  );
 
   const indexManagementTabs = (
     <>
-      <EuiPageHeader
-        data-test-subj="indexManagementHeaderContent"
-        pageTitle={
-          <span data-test-subj="appTitle">
-            <FormattedMessage id="xpack.idxMgmt.home.appTitle" defaultMessage="Index Management" />
-          </span>
-        }
-        bottomBorder
-        rightSideItems={[
-          <EuiButtonEmpty
-            href={documentationService.getIdxMgmtDocumentationLink()}
-            target="_blank"
-            iconType="question"
-            data-test-subj="documentationLink"
-          >
-            <FormattedMessage
-              id="xpack.idxMgmt.home.idxMgmtDocsLinkText"
-              defaultMessage="Index Management docs"
-            />
-          </EuiButtonEmpty>,
-        ]}
-        tabs={tabs.map((tab) => ({
-          onClick: () => onSectionChange(tab.id),
-          isSelected: tab.id === section,
-          key: tab.id,
-          'data-test-subj': `${tab.id}Tab`,
-          label: tab.name,
-        }))}
+      <PageHeader
+        title={i18n.translate('xpack.idxMgmt.home.appTitle', {
+          defaultMessage: 'Index Management',
+        })}
+        tabs={tabs}
+        menu={appMenu}
+        padding={{ bleed: 'l' }}
+        fallback={{
+          'data-test-subj': 'indexManagementHeaderContent',
+          rightSideItems: [
+            <EuiButtonEmpty
+              href={documentationService.getIdxMgmtDocumentationLink()}
+              target="_blank"
+              iconType="question"
+              data-test-subj="documentationLink"
+            >
+              <FormattedMessage
+                id="xpack.idxMgmt.home.idxMgmtDocsLinkText"
+                defaultMessage="Index Management docs"
+              />
+            </EuiButtonEmpty>,
+          ],
+        }}
       />
-
       <EuiSpacer size="l" />
 
       <Routes>
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
index fc34308e47627..fc6e65b4ecc75 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
@@ -7,25 +7,29 @@
 
 import type { FunctionComponent } from 'react';
 import React, { useCallback, useMemo } from 'react';
-import type { EuiPageHeaderProps } from '@elastic/eui';
-import { EuiButtonEmpty, EuiIcon, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { EuiBadge, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import type { RouteComponentProps } from 'react-router-dom';
 import { openWiredConnectionDetails } from '@kbn/cloud/connection_details';
+import { ROLLUP_DEPRECATION_BADGE_LABEL, RollupDeprecationTooltip } from '@kbn/rollup';
 
+import type { AppHeaderTab, AppHeaderBadge } from '@kbn/app-header';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useIndexErrors } from '../../../../hooks/use_index_errors';
 import { resetIndexUrlParams } from './reset_index_url_params';
-import { renderBadges } from '../../../../lib/render_badges';
 import { useLoadIndexDocumentsSample } from '../../../../services/api';
+import { PageHeader } from '../../../../components/page_header';
 import type { Index } from '../../../../../../common';
 import type { IndexDetailsTab, IndexDetailsTabId } from '../../../../../../common/constants';
-import { INDEX_OPEN, IndexDetailsSection } from '../../../../../../common/constants';
+import { INDEX_OPEN, IndexDetailsSection, Section } from '../../../../../../common/constants';
 import { getIndexDetailsLink } from '../../../../services/routing';
 import { useAppContext } from '../../../../app_context';
 import { DiscoverLink } from '../../../../lib/discover_link';
+import { renderBadges } from '../../../../lib/render_badges';
 import { ManageIndexButton } from './manage_index_button';
+import { useManageIndexMenu } from './use_manage_index_menu';
 import { DetailsPageMappings } from './details_page_mappings';
 import { DetailsPageSettings } from './details_page_settings';
 import { DetailsPageStats } from './details_page_stats';
@@ -87,7 +91,9 @@ export const DetailsPageContent: FunctionComponent<Props> = ({
     config: { enableIndexStats },
     plugins: { console: consolePlugin, ml },
     services: { extensionsService, notificationService },
+    url,
   } = useAppContext();
+  const discoverLocator = url?.locators.get('DISCOVER_APP_LOCATOR');
   const hasMLPermissions = capabilities?.ml?.canGetTrainedModels ? true : false;
 
   const indexErrors = useIndexErrors(index, ml, hasMLPermissions);
@@ -150,82 +156,151 @@ export const DetailsPageContent: FunctionComponent<Props> = ({
     return resendDocumentsSampleRequest();
   }, [resendDocumentsSampleRequest]);
 
-  const headerTabs = useMemo<EuiPageHeaderProps['tabs']>(() => {
-    return tabs.map((tabConfig) => ({
-      onClick: () => onSectionChange(tabConfig.id),
-      isSelected: tabConfig.id === tab,
-      key: tabConfig.id,
-      'data-test-subj': `indexDetailsTab-${tabConfig.id}`,
-      label: tabConfig.name,
-    }));
-  }, [tabs, tab, onSectionChange]);
-
-  const pageTitle = (
-    <>
-      {index.name}
-      {renderBadges(index, extensionsService)}
-    </>
+  const { manageIndexItems, modalHost } = useManageIndexMenu({
+    index,
+    reloadIndexDetails: fetchIndexDetails,
+    navigateToIndicesList,
+    onIndexRefresh,
+  });
+
+  const headerTabs = useMemo<AppHeaderTab[]>(
+    () =>
+      tabs.map((tabConfig) => ({
+        id: tabConfig.id,
+        label: tabConfig.name as string,
+        isSelected: tabConfig.id === tab,
+        onClick: () => onSectionChange(tabConfig.id),
+        'data-test-subj': `indexDetailsTab-${tabConfig.id}`,
+      })),
+    [tabs, tab, onSectionChange]
   );
 
-  return (
-    <>
-      <EuiPageHeader
-        data-test-subj="indexDetailsHeader"
-        pageTitle={pageTitle}
-        breadcrumbs={[
-          {
-            ['data-test-subj']: 'indexDetailsBackToIndicesButton',
-            text: (
-              <>
-                <EuiIcon size="s" aria-hidden={true} type="chevronSingleLeft" />
-                <FormattedMessage
-                  id="xpack.idxMgmt.indexDetails.backToIndicesButtonLabel"
-                  defaultMessage="Back to indices"
-                />
-              </>
-            ),
-            color: 'primary',
-            'aria-current': false,
-            onClick: (e) => {
-              e.preventDefault();
-              navigateToIndicesList();
+  const badges = useMemo<AppHeaderBadge[]>(() => {
+    const result: AppHeaderBadge[] = [];
+    extensionsService.badges.forEach((indexBadge) => {
+      if (indexBadge.matchIndex(index)) {
+        const badge: AppHeaderBadge = {
+          label: indexBadge.label,
+          color: indexBadge.color as AppHeaderBadge['color'],
+        };
+
+        if (indexBadge.label === ROLLUP_DEPRECATION_BADGE_LABEL) {
+          badge.renderCustomBadge = ({ badgeText }) => (
+            <RollupDeprecationTooltip>
+              <EuiBadge color={indexBadge.color}>{badgeText}</EuiBadge>
+            </RollupDeprecationTooltip>
+          );
+        }
+
+        result.push(badge);
+      }
+    });
+    return result;
+  }, [extensionsService.badges, index]);
+
+  const fallbackPageTitle = useMemo(
+    () => (
+      <>
+        {index.name}
+        {renderBadges(index, extensionsService)}
+      </>
+    ),
+    [extensionsService, index]
+  );
+
+  const appMenu = useMemo<AppMenuConfig>(
+    () => ({
+      primaryActionItem: discoverLocator
+        ? {
+            id: 'discoverIndex',
+            label: i18n.translate('xpack.idxMgmt.indexDetails.openInDiscoverMenuLabel', {
+              defaultMessage: 'Open in Discover',
+            }),
+            iconType: 'discoverApp' as const,
+            run: () => {
+              discoverLocator.navigate({ dataViewSpec: { title: index.name } });
             },
+            testId: 'discoverButtonLink',
+          }
+        : undefined,
+      items: [
+        {
+          id: 'connectionDetails',
+          order: 1,
+          label: i18n.translate('xpack.idxMgmt.indexDetails.connectionDetailsMenuLabel', {
+            defaultMessage: 'Connection details',
+          }),
+          iconType: 'plugs' as const,
+          run: () => {
+            openWiredConnectionDetails({
+              props: { options: { defaultTabId: 'apiKeys' } },
+            }).catch((error) => {
+              notificationService.showDangerToast(
+                error?.body?.message ?? error?.message ?? 'An unexpected error occurred'
+              );
+            });
           },
-        ]}
-        bottomBorder
+          testId: 'openConnectionDetails',
+        },
+        {
+          id: 'manageIndex',
+          order: 2,
+          label: i18n.translate('xpack.idxMgmt.indexDetails.manageIndexMenuLabel', {
+            defaultMessage: 'Manage index',
+          }),
+          iconType: 'managementApp' as const,
+          items: manageIndexItems,
+          testId: 'indexActionsContextMenuButton',
+        },
+      ],
+    }),
+    [index.name, discoverLocator, notificationService, manageIndexItems]
+  );
+
+  return (
+    <>
+      <PageHeader
+        title={index.name}
+        back={`/app/management/data/index_management/${Section.Indices}`}
         tabs={headerTabs}
-        rightSideItems={[
-          <ManageIndexButton
-            index={index}
-            reloadIndexDetails={fetchIndexDetails}
-            navigateToIndicesList={navigateToIndicesList}
-            onIndexRefresh={onIndexRefresh}
-            fill={true}
-          />,
-          <DiscoverLink indexName={index.name} asButton={true} fill={false} />,
-          <EuiButtonEmpty
-            onClick={() =>
-              openWiredConnectionDetails({
-                props: { options: { defaultTabId: 'apiKeys' } },
-              }).catch((error) => {
-                notificationService.showDangerToast(
-                  error?.body?.message ?? error?.message ?? 'An unexpected error occurred'
-                );
-              })
-            }
-            iconType="plugs"
-            data-test-subj="openConnectionDetails"
-          >
-            <FormattedMessage
-              id="xpack.idxMgmt.indexDetails.connectionDetailsButtonLabel"
-              defaultMessage="Connection details"
-            />
-          </EuiButtonEmpty>,
-        ]}
-      >
-        {indexErrors.length > 0 ? <IndexErrorCallout errors={indexErrors} /> : null}
-      </EuiPageHeader>
+        badges={badges}
+        menu={appMenu}
+        padding={{ bleed: 'l' }}
+        fallback={{
+          'data-test-subj': 'indexDetailsHeader',
+          pageTitle: fallbackPageTitle,
+          rightSideItems: [
+            <ManageIndexButton
+              index={index}
+              reloadIndexDetails={fetchIndexDetails}
+              navigateToIndicesList={navigateToIndicesList}
+              onIndexRefresh={onIndexRefresh}
+              fill={true}
+            />,
+            <DiscoverLink indexName={index.name} asButton={true} fill={false} />,
+            <EuiButtonEmpty
+              onClick={() =>
+                openWiredConnectionDetails({
+                  props: { options: { defaultTabId: 'apiKeys' } },
+                }).catch((error) => {
+                  notificationService.showDangerToast(
+                    error?.body?.message ?? error?.message ?? 'An unexpected error occurred'
+                  );
+                })
+              }
+              iconType="plugs"
+              data-test-subj="openConnectionDetails"
+            >
+              <FormattedMessage
+                id="xpack.idxMgmt.indexDetails.connectionDetailsButtonLabel"
+                defaultMessage="Connection details"
+              />
+            </EuiButtonEmpty>,
+          ],
+        }}
+      />
       <EuiSpacer size="l" />
+      {indexErrors.length > 0 && <IndexErrorCallout errors={indexErrors} />}
       <div
         data-test-subj={`indexDetailsContent`}
         css={css`
@@ -235,6 +310,7 @@ export const DetailsPageContent: FunctionComponent<Props> = ({
         <DetailsPageTab tabs={tabs} tab={tab} index={index} />
       </div>
       {consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null}
+      {modalHost}
     </>
   );
 };
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
new file mode 100644
index 0000000000000..d24e8c7cda081
--- /dev/null
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
@@ -0,0 +1,361 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ReactNode } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { i18n } from '@kbn/i18n';
+import type { HttpSetup } from '@kbn/core-http-browser';
+import type { AppMenuPopoverItem } from '@kbn/core-chrome-app-menu-components';
+
+import type { Index } from '../../../../../../common';
+import {
+  INDEX_OPEN,
+  MAX_DOCUMENTS_FOR_CONVERT_TO_LOOKUP_INDEX,
+  MAX_SHARDS_FOR_CONVERT_TO_LOOKUP_INDEX,
+} from '../../../../../../common/constants';
+import {
+  clearCacheIndices as clearCacheIndicesRequest,
+  closeIndices as closeIndicesRequest,
+  deleteIndices as deleteIndicesRequest,
+  flushIndices as flushIndicesRequest,
+  forcemergeIndices as forcemergeIndicesRequest,
+  openIndices as openIndicesRequest,
+  refreshIndices as refreshIndicesRequest,
+} from '../../../../services';
+import { httpService } from '../../../../services/http';
+import { useAppContext } from '../../../../app_context';
+import type { ModalHostHandles } from '../index_actions_context_menu/modal_host/modal_host';
+import { ModalHost } from '../index_actions_context_menu/modal_host/modal_host';
+
+interface UseManageIndexMenuArgs {
+  index: Index;
+  reloadIndexDetails: () => Promise<void>;
+  navigateToIndicesList: () => void;
+  onIndexRefresh?: () => Promise<void> | void;
+}
+
+interface UseManageIndexMenuReturn {
+  manageIndexItems: AppMenuPopoverItem[];
+  modalHost: ReactNode;
+}
+
+export function useManageIndexMenu({
+  index,
+  reloadIndexDetails,
+  navigateToIndicesList,
+  onIndexRefresh,
+}: UseManageIndexMenuArgs): UseManageIndexMenuReturn {
+  const {
+    services: { extensionsService, notificationService },
+    plugins: { reindexService },
+    core: { getUrlForApp },
+    history,
+    config: { enableIndexActions, isServerless },
+  } = useAppContext();
+
+  const modalRef = useRef<ModalHostHandles | null>(null);
+  const indexNames = useMemo(() => [index.name], [index]);
+
+  const reloadIndices = useCallback(async () => {
+    await reloadIndexDetails();
+  }, [reloadIndexDetails]);
+
+  const closeIndices = useCallback(async () => {
+    try {
+      await closeIndicesRequest(indexNames);
+      await reloadIndices();
+      notificationService.showSuccessToast(
+        i18n.translate('xpack.idxMgmt.closeIndicesAction.indexClosedMessage', {
+          defaultMessage: 'The index {indexNames} was closed.',
+          values: { indexNames: indexNames.join(', ') },
+        })
+      );
+    } catch (error) {
+      notificationService.showDangerToast(error.body.message);
+    }
+  }, [reloadIndices, indexNames, notificationService]);
+
+  const openIndices = useCallback(async () => {
+    try {
+      await openIndicesRequest(indexNames);
+      await reloadIndices();
+      notificationService.showSuccessToast(
+        i18n.translate('xpack.idxMgmt.openIndicesAction.indexOpenedMessage', {
+          defaultMessage: 'The index {indexNames} was opened.',
+          values: { indexNames: indexNames.join(', ') },
+        })
+      );
+    } catch (error) {
+      notificationService.showDangerToast(error.body.message);
+    }
+  }, [reloadIndices, indexNames, notificationService]);
+
+  const flushIndices = useCallback(async () => {
+    try {
+      await flushIndicesRequest(indexNames);
+      await reloadIndices();
+      notificationService.showSuccessToast(
+        i18n.translate('xpack.idxMgmt.flushIndicesAction.indexFlushedMessage', {
+          defaultMessage: 'The index {indexNames} was flushed.',
+          values: { indexNames: indexNames.join(', ') },
+        })
+      );
+    } catch (error) {
+      notificationService.showDangerToast(error.body.message);
+    }
+  }, [reloadIndices, indexNames, notificationService]);
+
+  const refreshIndices = useCallback(async () => {
+    try {
+      await refreshIndicesRequest(indexNames);
+      await reloadIndices();
+      await onIndexRefresh?.();
+      notificationService.showSuccessToast(
+        i18n.translate('xpack.idxMgmt.refreshIndicesAction.indexRefreshedMessage', {
+          defaultMessage: 'The index {indexNames} was refreshed.',
+          values: { indexNames: indexNames.join(', ') },
+        })
+      );
+    } catch (error) {
+      notificationService.showDangerToast(error.body.message);
+    }
+  }, [reloadIndices, indexNames, onIndexRefresh, notificationService]);
+
+  const clearCacheIndices = useCallback(async () => {
+    try {
+      await clearCacheIndicesRequest(indexNames);
+      await reloadIndices();
+      notificationService.showSuccessToast(
+        i18n.translate('xpack.idxMgmt.clearCacheIndicesAction.indexCacheClearedMessage', {
+          defaultMessage: 'The cache of the index {indexNames} was cleared.',
+          values: { indexNames: indexNames.join(', ') },
+        })
+      );
+    } catch (error) {
+      notificationService.showDangerToast(error.body.message);
+    }
+  }, [reloadIndices, indexNames, notificationService]);
+
+  const forcemergeIndices = useCallback(
+    async (maxNumSegments: string) => {
+      try {
+        await forcemergeIndicesRequest(indexNames, maxNumSegments);
+        await reloadIndices();
+        notificationService.showSuccessToast(
+          i18n.translate('xpack.idxMgmt.forceMergeIndicesAction.indexForcemergedMessage', {
+            defaultMessage: 'The index {indexNames} was force merged.',
+            values: { indexNames: indexNames.join(', ') },
+          })
+        );
+      } catch (error) {
+        notificationService.showDangerToast(error.body.message);
+      }
+    },
+    [reloadIndices, indexNames, notificationService]
+  );
+
+  const deleteIndices = useCallback(async () => {
+    try {
+      await deleteIndicesRequest(indexNames);
+      notificationService.showSuccessToast(
+        i18n.translate('xpack.idxMgmt.deleteIndicesAction.indexDeletedMessage', {
+          defaultMessage: 'The index {indexNames} was deleted.',
+          values: { indexNames: indexNames.join(', ') },
+        })
+      );
+      navigateToIndicesList();
+    } catch (error) {
+      notificationService.showDangerToast(error.body.message);
+    }
+  }, [navigateToIndicesList, indexNames, notificationService]);
+
+  const performExtensionAction = useCallback(
+    async (
+      requestMethod: (names: string[], http: HttpSetup) => Promise<void>,
+      successMessage: string
+    ) => {
+      try {
+        await requestMethod(indexNames, httpService.httpClient);
+        await reloadIndices();
+        notificationService.showSuccessToast(successMessage);
+      } catch (error) {
+        notificationService.showDangerToast(error.body.message);
+      }
+    },
+    [reloadIndices, indexNames, notificationService]
+  );
+
+  const manageIndexItems = useMemo<AppMenuPopoverItem[]>(() => {
+    const allOpen = index.status === INDEX_OPEN;
+    const items: AppMenuPopoverItem[] = [];
+    let order = 0;
+
+    if (allOpen && enableIndexActions) {
+      items.push({
+        id: 'closeIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.closeIndexLabel', {
+          defaultMessage: 'Close index',
+        }),
+        run: () => { closeIndices(); },
+        testId: 'closeIndexMenuButton',
+      });
+      items.push({
+        id: 'forcemergeIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.forceMergeIndexLabel', {
+          defaultMessage: 'Force merge index',
+        }),
+        run: () => { modalRef.current?.openModal({ kind: 'forcemerge' }); },
+        testId: 'forcemergeIndexMenuButton',
+      });
+      items.push({
+        id: 'refreshIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.refreshIndexLabel', {
+          defaultMessage: 'Refresh index',
+        }),
+        run: () => { refreshIndices(); },
+        testId: 'refreshIndexMenuButton',
+      });
+      items.push({
+        id: 'clearCacheIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.clearIndexCacheLabel', {
+          defaultMessage: 'Clear index cache',
+        }),
+        run: () => { clearCacheIndices(); },
+        testId: 'clearCacheIndexMenuButton',
+      });
+      items.push({
+        id: 'flushIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.flushIndexLabel', {
+          defaultMessage: 'Flush index',
+        }),
+        run: () => { flushIndices(); },
+        testId: 'flushIndexMenuButton',
+      });
+    } else if (!allOpen && enableIndexActions) {
+      items.push({
+        id: 'openIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.openIndexLabel', {
+          defaultMessage: 'Open index',
+        }),
+        run: () => { openIndices(); },
+        testId: 'openIndexMenuButton',
+      });
+    }
+
+    items.push({
+      id: 'deleteIndex',
+      order: order++,
+      label: i18n.translate('xpack.idxMgmt.indexActionsMenu.deleteIndexLabel', {
+        defaultMessage: 'Delete index',
+      }),
+      run: () => { modalRef.current?.openModal({ kind: 'delete' }); },
+      testId: 'deleteIndexMenuButton',
+    });
+
+    extensionsService.actions.forEach((actionExtension, actionIndex) => {
+      const actionDef = actionExtension({
+        indices: [index],
+        reloadIndices,
+        getUrlForApp,
+      });
+      if (actionDef) {
+        const { buttonLabel, requestMethod, successMessage, renderConfirmModal } = actionDef;
+        if (requestMethod) {
+          items.push({
+            id: `extension-${actionIndex}`,
+            order: order++,
+            label: buttonLabel,
+            run: () => { performExtensionAction(requestMethod, successMessage); },
+          });
+        } else if (renderConfirmModal) {
+          items.push({
+            id: `extension-${actionIndex}`,
+            order: order++,
+            label: buttonLabel,
+            run: () => { modalRef.current?.openModal({ kind: 'extension', actionIndex }); },
+          });
+        }
+      }
+    });
+
+    if (reindexService && index.mode !== 'lookup' && !index.hidden) {
+      const documents = index.documents;
+      const isWithinDocumentLimit =
+        documents !== undefined &&
+        documents >= 0 &&
+        documents <= MAX_DOCUMENTS_FOR_CONVERT_TO_LOOKUP_INDEX;
+      const hasSinglePrimaryShard =
+        Number(index.primary) === MAX_SHARDS_FOR_CONVERT_TO_LOOKUP_INDEX;
+      const isConvertable = isServerless
+        ? isWithinDocumentLimit
+        : isWithinDocumentLimit && hasSinglePrimaryShard;
+
+      items.push({
+        id: 'convertToLookupIndex',
+        order: order++,
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.convertToLookupIndexButton', {
+          defaultMessage: 'Convert to lookup index',
+        }),
+        disableButton: !isConvertable,
+        run: () => { modalRef.current?.openModal({ kind: 'convertToLookup' }); },
+        testId: 'convertToLookupIndexButton',
+      });
+    }
+
+    return items;
+  }, [
+    index,
+    enableIndexActions,
+    isServerless,
+    reindexService,
+    extensionsService.actions,
+    reloadIndices,
+    getUrlForApp,
+    closeIndices,
+    openIndices,
+    flushIndices,
+    refreshIndices,
+    clearCacheIndices,
+    forcemergeIndices,
+    deleteIndices,
+    performExtensionAction,
+  ]);
+
+  const modalHost = useMemo<ReactNode>(
+    () => (
+      <ModalHost
+        ref={modalRef}
+        indexNames={[index.name]}
+        indices={[index]}
+        indicesListURLParams=""
+        forcemergeIndices={forcemergeIndices}
+        deleteIndices={deleteIndices}
+        reloadIndices={reloadIndices}
+        extensionsService={extensionsService}
+        getUrlForApp={getUrlForApp}
+        history={history}
+      />
+    ),
+    [
+      index,
+      forcemergeIndices,
+      deleteIndices,
+      reloadIndices,
+      extensionsService,
+      getUrlForApp,
+      history,
+    ]
+  );
+
+  return { manageIndexItems, modalHost };
+}
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/template_clone/template_clone.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/template_clone/template_clone.tsx
index c8ed0c8b7d8ec..3340562133646 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/template_clone/template_clone.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/template_clone/template_clone.tsx
@@ -7,6 +7,7 @@
 
 import React, { useEffect, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiPageSection } from '@elastic/eui';
 import type { ScopedHistory } from '@kbn/core/public';
@@ -105,13 +106,10 @@ export const TemplateClone: React.FunctionComponent<RouteComponentProps<MatchPar
   return (
     <EuiPageSection restrictWidth style={{ width: '100%' }}>
       <TemplateForm
-        title={
-          <FormattedMessage
-            id="xpack.idxMgmt.createTemplate.cloneTemplatePageTitle"
-            defaultMessage="Clone template ''{name}''"
-            values={{ name: decodedTemplateName }}
-          />
-        }
+        title={i18n.translate('xpack.idxMgmt.createTemplate.cloneTemplatePageTitle', {
+          defaultMessage: "Clone template ''{name}''",
+          values: { name: decodedTemplateName },
+        })}
         defaultValue={templateData}
         onSave={onSave}
         isSaving={isSaving}
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/template_create/template_create.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/template_create/template_create.tsx
index 0422ac00602f7..5bc8cc206deb3 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/template_create/template_create.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/template_create/template_create.tsx
@@ -8,7 +8,7 @@
 import React, { useEffect, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import { EuiPageSection } from '@elastic/eui';
 import { parse } from 'query-string';
 import type { ScopedHistory } from '@kbn/core/public';
@@ -60,17 +60,13 @@ export const TemplateCreate: React.FunctionComponent<RouteComponentProps> = ({ h
     <EuiPageSection restrictWidth style={{ width: '100%' }}>
       <TemplateForm
         title={
-          isLegacy ? (
-            <FormattedMessage
-              id="xpack.idxMgmt.createTemplate.createLegacyTemplatePageTitle"
-              defaultMessage="Create legacy template"
-            />
-          ) : (
-            <FormattedMessage
-              id="xpack.idxMgmt.createTemplate.createTemplatePageTitle"
-              defaultMessage="Create template"
-            />
-          )
+          isLegacy
+            ? i18n.translate('xpack.idxMgmt.createTemplate.createLegacyTemplatePageTitle', {
+                defaultMessage: 'Create legacy template',
+              })
+            : i18n.translate('xpack.idxMgmt.createTemplate.createTemplatePageTitle', {
+                defaultMessage: 'Create template',
+              })
         }
         onSave={onSave}
         isSaving={isSaving}
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/template_edit/template_edit.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/template_edit/template_edit.tsx
index 4f221b749668b..cd95eb89f2ecf 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/template_edit/template_edit.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/template_edit/template_edit.tsx
@@ -10,6 +10,7 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiPageSection, EuiSpacer, EuiCallOut } from '@elastic/eui';
+
 import type { ScopedHistory } from '@kbn/core/public';
 
 import type { TemplateDeserialized } from '../../../../common';
@@ -177,13 +178,10 @@ export const TemplateEdit: React.FunctionComponent<RouteComponentProps<MatchPara
       )}
 
       <TemplateForm
-        title={
-          <FormattedMessage
-            id="xpack.idxMgmt.editTemplate.editTemplatePageTitle"
-            defaultMessage="Edit template ''{name}''"
-            values={{ name: decodedTemplateName }}
-          />
-        }
+        title={i18n.translate('xpack.idxMgmt.editTemplate.editTemplatePageTitle', {
+          defaultMessage: "Edit template ''{name}''",
+          values: { name: decodedTemplateName },
+        })}
         defaultValue={template!}
         onSave={onSave}
         isSaving={isSaving}
diff --git a/x-pack/platform/plugins/shared/index_management/tsconfig.json b/x-pack/platform/plugins/shared/index_management/tsconfig.json
index c9a09140c0106..dae1050ae5920 100644
--- a/x-pack/platform/plugins/shared/index_management/tsconfig.json
+++ b/x-pack/platform/plugins/shared/index_management/tsconfig.json
@@ -76,6 +76,8 @@
     "@kbn/search-index-documents",
     "@kbn/cloud-connect-plugin",
     "@kbn/shared-ux-column-presets",
+    "@kbn/core-chrome-app-menu-components",
+    "@kbn/app-header",
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/x-pack/platform/plugins/shared/spaces/moon.yml b/x-pack/platform/plugins/shared/spaces/moon.yml
index 10323fca121fa..733e6eb2eb776 100644
--- a/x-pack/platform/plugins/shared/spaces/moon.yml
+++ b/x-pack/platform/plugins/shared/spaces/moon.yml
@@ -76,6 +76,7 @@ dependsOn:
   - '@kbn/cps-common'
   - '@kbn/cps-utils'
   - '@kbn/tour-queue'
+  - '@kbn/context-switcher-components'
 tags:
   - plugin
   - prod
diff --git a/yarn.lock b/yarn.lock
index 09e08ece2b50d..8b967cb6e419c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8131,6 +8131,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/app-header@link:src/core/packages/chrome/app-header":
+  version "0.0.0"
+  uid ""
+
 "@kbn/painless-lab-plugin@link:x-pack/platform/plugins/private/painless_lab":
   version "0.0.0"
   uid ""

From 6ad1bf9389c2e8a8cb168dcae67b807a88d3e6c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngeles=20Mart=C3=ADnez=20Barrio?=
 <angeles.martinezbarrio@elastic.co>
Date: Wed, 6 May 2026 12:37:06 +0200
Subject: [PATCH 46/77] [DoNotReview/FeatureBranch][Chrome Next] Add Spaces
 context switcher footer links (#267739)

Relates to https://github.com/elastic/kibana/issues/259992?reload=1

## Summary

- Added footer links to the context switcher view:
- [Root] Get started ( or Add data for Obs only): based on either
project type (Serverless) or current solution (ECH), navigates to
relevant get started page. Gated only by the Kibana's `navLinks`
capability.
- [Root] Connection details (Serverless): opens flyout, flyout content
is internally gated, some flyout parts might not rendered based on
Kibana's `api_keys.save` capability.
- [Root] Invite users: for Serverless it navigates to Cloud console
users, gated by privileged URL internally based on `hasManageSecurity`
gated by Kibana's `users.save` capability. For ECH it navigates to
Kibana user management, gated by Kibana's `users.save` and `navLinks`
capabilities.
- [Submenu] Create project/deployment: no Kibana-side permission check,
TBD.
- Ensured the switcher popover closes on link/action clicks

Still to do:
- Manage deployment/project gating + View all deployments/projects
gating (related to https://github.com/elastic/kibana/issues/253828)
- Create project/deployment gating (related M2
https://github.com/elastic/kibana/issues/267742)

### Testing

| Root view | Submenu view |
| --- | --- |
| <img width="449" height="384" alt="Screenshot 2026-05-05 at 11 05 32"
src="https://github.com/user-attachments/assets/0b5e1190-23a0-4f94-9b4c-66456b6f2e03"
/> | <img width="243" height="194" alt="Screenshot 2026-05-05 at 11 05
42"
src="https://github.com/user-attachments/assets/39eff88f-4afc-47cb-adf7-59221dd5f6df"
/> |
| <img width="467" height="365" alt="Screenshot 2026-05-05 at 11 10 56"
src="https://github.com/user-attachments/assets/43c4ee2d-4950-4425-bbdf-8a5d287e2030"
/> | <img width="458" height="357" alt="Screenshot 2026-05-05 at 11 11
02"
src="https://github.com/user-attachments/assets/e5259e5d-1207-4ab1-a867-d64f46fa5ca4"
/> |
| <img width="480" height="348" alt="Screenshot 2026-05-05 at 11 18 52"
src="https://github.com/user-attachments/assets/78bba9da-8288-4ef5-8365-259eddb7aaff"
/> | <img width="494" height="353" alt="Screenshot 2026-05-05 at 11 18
58"
src="https://github.com/user-attachments/assets/b551f664-45fd-40f5-921b-208e9f8a5cad"
/> |
---
 .../src/components/context_switcher.tsx       |  44 +++--
 .../src/components/views/spaces_list.tsx      |   2 +
 .../packages/shared/deeplinks/shared/index.ts |   6 +-
 .../plugins/shared/cloud/public/plugin.tsx    |   2 +
 .../plugins/shared/cloud/public/types.ts      |  12 ++
 .../plugins/shared/cloud/public/urls.ts       |   6 +
 .../plugins/shared/cloud/server/config.ts     |   6 +
 .../context_switcher_component.tsx            |   9 +
 .../public/context_switcher/hooks/index.ts    |   1 +
 .../hooks/use_environment_context.ts          |  17 +-
 .../hooks/use_footer_links.ts                 | 171 ++++++++++++++++++
 11 files changed, 259 insertions(+), 17 deletions(-)
 create mode 100644 x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_footer_links.ts

diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
index 9fbf170364c24..8049658d02957 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher.tsx
@@ -25,7 +25,7 @@ import type { ContextMenuViewProps } from './views/context_menu';
 import { ContextSubmenuView } from './views/context_submenu';
 import type { ContextSubmenuViewProps } from './views/context_submenu';
 import { ContextSwitcherTriggerButton } from './context_switcher_trigger_button';
-import type { ActionConfig } from './types';
+import type { ActionConfig, LinksListItem } from './types';
 import { POPOVER_WIDTH, type ContextSwitcherProps, type SpaceItem } from './types';
 import type { SelectableListItem } from './selectable_list';
 
@@ -142,19 +142,33 @@ export const ContextSwitcher = ({
   );
 
   const withClosePopover = useCallback(
-    (action?: ActionConfig): ActionConfig | undefined => {
-      if (!action) return undefined;
-      return {
-        ...action,
-        onClick: () => {
-          closePopover();
-          action?.onClick?.();
-        },
-      };
+    (onClick?: () => void) => () => {
+      closePopover();
+      onClick?.();
     },
     [closePopover]
   );
 
+  const withClosePopoverAction = useCallback(
+    (action?: ActionConfig): ActionConfig | undefined =>
+      action ? { ...action, onClick: withClosePopover(action.onClick) } : undefined,
+    [withClosePopover]
+  );
+  const withClosePopoverLink = useCallback(
+    (item: LinksListItem): LinksListItem => ({ ...item, onClick: withClosePopover(item.onClick) }),
+    [withClosePopover]
+  );
+
+  const footerLinksWithClose = useMemo(
+    () => footerLinks?.map(withClosePopoverLink),
+    [footerLinks, withClosePopoverLink]
+  );
+
+  const environmentItemsWithClose = useMemo(
+    () => environmentContext?.submenuItems.map(withClosePopoverLink) ?? [],
+    [environmentContext, withClosePopoverLink]
+  );
+
   const searchConfig =
     selectableItems.length >= (spaces.search?.threshold ?? SEARCH_THRESHOLD)
       ? {
@@ -174,12 +188,12 @@ export const ContextSwitcher = ({
   const spacesViewProps = {
     id: 'contextSwitcherSpacesList',
     title: SPACES_TITLE,
-    headerAction: withClosePopover(spaces.headerAction),
+    headerAction: withClosePopoverAction(spaces.headerAction),
     items: selectableItems,
     onSelect: handleSpaceSelect,
     search: searchConfig,
     isLoading: spaces.isLoading,
-    footerAction: withClosePopover(spaces.footerAction),
+    footerAction: withClosePopoverAction(spaces.footerAction),
   };
 
   const environmentDescription = isProject
@@ -263,12 +277,12 @@ export const ContextSwitcher = ({
               ),
               value: spacesDescription,
             },
-            footerLinks,
+            footerLinks: footerLinksWithClose,
           }}
           environmentSubmenuView={{
             title: SUBMENU_TITLES[environmentContext.environmentType],
-            items: environmentContext.submenuItems,
-            footerAction: withClosePopover(environmentContext.submenuFooterAction),
+            items: environmentItemsWithClose,
+            footerAction: withClosePopoverAction(environmentContext.submenuFooterAction),
           }}
           spacesSubmenuView={spacesViewProps}
         />
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
index cfd5759b5c9e4..dcafc4c5d9f19 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/spaces_list.tsx
@@ -130,6 +130,8 @@ export const SpacesListView = ({
                       size="s"
                       onClick={headerAction.onClick}
                       data-test-subj={headerAction['data-test-subj']}
+                      isDisabled={headerAction.disabled}
+                      target={headerAction.external ? '_blank' : undefined}
                     >
                       {headerAction.label}
                     </EuiButtonEmpty>
diff --git a/src/platform/packages/shared/deeplinks/shared/index.ts b/src/platform/packages/shared/deeplinks/shared/index.ts
index 096849a95d216..72f9d09ee623d 100644
--- a/src/platform/packages/shared/deeplinks/shared/index.ts
+++ b/src/platform/packages/shared/deeplinks/shared/index.ts
@@ -7,4 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export type { AppId, DeepLinkId } from './deep_links';
+export const HOME_APP_ID = 'home';
+
+export type AppId = typeof HOME_APP_ID;
+
+export type DeepLinkId = AppId;
diff --git a/x-pack/platform/plugins/shared/cloud/public/plugin.tsx b/x-pack/platform/plugins/shared/cloud/public/plugin.tsx
index 66e8028e72648..222f3aaf9a7cc 100644
--- a/x-pack/platform/plugins/shared/cloud/public/plugin.tsx
+++ b/x-pack/platform/plugins/shared/cloud/public/plugin.tsx
@@ -32,7 +32,9 @@ export interface CloudConfigType {
   profile_url?: string;
   deployments_url?: string;
   deployment_url?: string;
+  create_deployment_url?: string;
   projects_url?: string;
+  create_project_url?: string;
   billing_url?: string;
   organization_url?: string;
   users_and_roles_url?: string;
diff --git a/x-pack/platform/plugins/shared/cloud/public/types.ts b/x-pack/platform/plugins/shared/cloud/public/types.ts
index 0b254908ee362..cc4d3178509e4 100644
--- a/x-pack/platform/plugins/shared/cloud/public/types.ts
+++ b/x-pack/platform/plugins/shared/cloud/public/types.ts
@@ -33,6 +33,12 @@ export interface CloudBasicUrls {
    * @example `{baseUrl}/deployments/bfdad4ef99a24212a06d387593686d63`
    */
   deploymentUrl?: string;
+  /**
+   * This is the path to the Cloud deployment creation page. The value is already prepended with `baseUrl`.
+   *
+   * @example `{baseUrl}/deployments/create`
+   */
+  createDeploymentUrl?: string;
   /**
    * The full URL to the user profile page on Elastic Cloud. Undefined if not running on Cloud.
    */
@@ -49,6 +55,12 @@ export interface CloudBasicUrls {
    * The full URL to the serverless projects page on Elastic Cloud. Undefined if not running in Serverless.
    */
   projectsUrl?: string;
+  /**
+   * This is the path to the Cloud project creation page. The value is already prepended with `baseUrl`.
+   *
+   * @example `{baseUrl}/projects/create`
+   */
+  createProjectUrl?: string;
   /**
    * This is the path to the Snapshots page for the deployment to which the Kibana instance belongs. The value is already prepended with `deploymentUrl`.
    *
diff --git a/x-pack/platform/plugins/shared/cloud/public/urls.ts b/x-pack/platform/plugins/shared/cloud/public/urls.ts
index 62590ade1c2a4..cac3afe7aa4fe 100644
--- a/x-pack/platform/plugins/shared/cloud/public/urls.ts
+++ b/x-pack/platform/plugins/shared/cloud/public/urls.ts
@@ -40,16 +40,20 @@ export class CloudUrlsService {
       organization_url: organizationUrl,
       deployments_url: deploymentsUrl,
       deployment_url: deploymentUrl,
+      create_deployment_url: createDeploymentUrl,
       performance_url: performanceUrl,
       projects_url: projectsUrl,
+      create_project_url: createProjectUrl,
     } = this.config;
 
     const fullCloudDeploymentsUrl = getFullCloudUrl(baseUrl, deploymentsUrl);
     const fullCloudDeploymentUrl = getFullCloudUrl(baseUrl, deploymentUrl);
+    const fullCloudCreateDeploymentUrl = getFullCloudUrl(baseUrl, createDeploymentUrl);
     const fullCloudProfileUrl = getFullCloudUrl(baseUrl, profileUrl);
     const fullCloudOrganizationUrl = getFullCloudUrl(baseUrl, organizationUrl);
     const fullCloudPerformanceUrl = getFullCloudUrl(baseUrl, performanceUrl);
     const fullCloudProjectsUrl = getFullCloudUrl(baseUrl, projectsUrl);
+    const fullCloudCreateProjectUrl = getFullCloudUrl(baseUrl, createProjectUrl);
     const fullCloudSnapshotsUrl = `${fullCloudDeploymentUrl}/${CLOUD_SNAPSHOTS_PATH}`;
 
     return {
@@ -57,11 +61,13 @@ export class CloudUrlsService {
       kibanaUrl,
       deploymentsUrl: fullCloudDeploymentsUrl,
       deploymentUrl: fullCloudDeploymentUrl,
+      createDeploymentUrl: fullCloudCreateDeploymentUrl,
       profileUrl: fullCloudProfileUrl,
       organizationUrl: fullCloudOrganizationUrl,
       snapshotsUrl: fullCloudSnapshotsUrl,
       performanceUrl: fullCloudPerformanceUrl,
       projectsUrl: fullCloudProjectsUrl,
+      createProjectUrl: fullCloudCreateProjectUrl,
     };
   }
 
diff --git a/x-pack/platform/plugins/shared/cloud/server/config.ts b/x-pack/platform/plugins/shared/cloud/server/config.ts
index 1fb8e0fa7c717..650f5a073fc4a 100644
--- a/x-pack/platform/plugins/shared/cloud/server/config.ts
+++ b/x-pack/platform/plugins/shared/cloud/server/config.ts
@@ -72,6 +72,7 @@ const configSchema = schema.object({
   csp: schema.maybe(schema.string()),
   deployments_url: schema.string({ defaultValue: '/deployments' }),
   deployment_url: schema.maybe(schema.string()),
+  create_deployment_url: schema.string({ defaultValue: '/deployments/create' }),
   id: schema.maybe(schema.string()),
   isSaasContainer: schema.maybe(schema.boolean()),
   organization_id: schema.maybe(schema.string()),
@@ -82,6 +83,9 @@ const configSchema = schema.object({
   profile_url: schema.maybe(schema.string()),
   projects_url: offeringBasedSchema({ serverless: schema.string({ defaultValue: '/projects/' }) }),
   trial_end_date: schema.maybe(schema.string()),
+  create_project_url: offeringBasedSchema({
+    serverless: schema.string({ defaultValue: '/projects/create' }),
+  }),
   is_elastic_staff_owned: schema.maybe(schema.boolean()),
   onboarding: schema.maybe(
     schema.object({
@@ -119,6 +123,7 @@ export const config: PluginConfigDescriptor<CloudConfigType> = {
     csp: true,
     deployments_url: true,
     deployment_url: true,
+    create_deployment_url: true,
     id: true,
     isSaasContainer: true,
     organization_id: true,
@@ -128,6 +133,7 @@ export const config: PluginConfigDescriptor<CloudConfigType> = {
     organization_url: true,
     profile_url: true,
     projects_url: true,
+    create_project_url: true,
     trial_end_date: true,
     is_elastic_staff_owned: true,
     serverless: {
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
index c1a6e58bf7d0a..7a4a99f260af4 100644
--- a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
@@ -15,6 +15,7 @@ import {
 import type { CoreStart } from '@kbn/core/public';
 import { useQueryClient } from '@kbn/react-query';
 
+import { useFooterLinks } from './hooks';
 import { useActiveSpace } from './hooks/use_active_space';
 import { useEnvironmentContext } from './hooks/use_environment_context';
 import { useManagementActions } from './hooks/use_management_actions';
@@ -57,6 +58,13 @@ export const ContextSwitcherComponent = ({
     isServerless,
   });
 
+  const footerLinks = useFooterLinks({
+    application: core.application,
+    cloud,
+    isServerless,
+    activeSpaceSolution: activeSpace?.solution,
+  });
+
   const managementActions = useManagementActions({
     application: core.application,
     canManageSpaces: core.application.capabilities.spaces?.manage === true,
@@ -92,6 +100,7 @@ export const ContextSwitcherComponent = ({
       spaces={spacesConfig}
       environmentContext={environmentContext}
       onOpen={handleOpen}
+      footerLinks={footerLinks}
     />
   );
 };
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts
index da5b72dbb76c5..3fb9771216c33 100644
--- a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/index.ts
@@ -9,3 +9,4 @@ export { useActiveSpace } from './use_active_space';
 export { useEnvironmentContext } from './use_environment_context';
 export { useManagementActions } from './use_management_actions';
 export { useSpaceItems } from './use_space_items';
+export { useFooterLinks } from './use_footer_links';
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts
index b07f19c879b65..9e989ddb71884 100644
--- a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_environment_context.ts
@@ -9,6 +9,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import type { CloudStart } from '@kbn/cloud-plugin/public';
 import type {
+  ActionConfig,
   ContextSwitcherEnvironmentConfig,
   LinksListItem,
 } from '@kbn/context-switcher-components';
@@ -92,6 +93,20 @@ export const useEnvironmentContext = ({
       });
     }
 
-    return { environmentType, name, submenuItems };
+    const isProject = environmentType === 'project';
+    const createUrl = isProject ? cloud.createProjectUrl : cloud.createDeploymentUrl;
+
+    const submenuFooterAction: ActionConfig | undefined = createUrl
+      ? {
+          id: isProject ? 'createProject' : 'createDeployment',
+          label: i18n.translate('xpack.spaces.contextSwitcher.createUrlLabel', {
+            defaultMessage: 'Create {environmentType}',
+            values: { environmentType },
+          }),
+          href: createUrl,
+        }
+      : undefined;
+
+    return { environmentType, name, submenuItems, submenuFooterAction };
   }, [cloud, environmentName, isCloud, isServerless]);
 };
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_footer_links.ts b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_footer_links.ts
new file mode 100644
index 0000000000000..8cf36090addaf
--- /dev/null
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_footer_links.ts
@@ -0,0 +1,171 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { openWiredConnectionDetails } from '@kbn/cloud/connection_details';
+import type { CloudStart } from '@kbn/cloud-plugin/public';
+import type { LinksListItem } from '@kbn/context-switcher-components';
+import type { CoreStart } from '@kbn/core/public';
+import { OBSERVABILITY_ONBOARDING_APP_ID } from '@kbn/deeplinks-observability';
+import { SEARCH_GETTING_STARTED } from '@kbn/deeplinks-search';
+import { SECURITY_APP_ID } from '@kbn/deeplinks-security';
+import { HOME_APP_ID } from '@kbn/deeplinks-shared';
+import type { WorkplaceAIApp } from '@kbn/deeplinks-workplace-ai';
+import { i18n } from '@kbn/i18n';
+
+import type { Space } from '../../../common';
+
+type GetStartedAppId =
+  | typeof HOME_APP_ID
+  | typeof OBSERVABILITY_ONBOARDING_APP_ID
+  | typeof SEARCH_GETTING_STARTED
+  | typeof SECURITY_APP_ID
+  | WorkplaceAIApp;
+
+interface GetStartedTarget {
+  appId: GetStartedAppId;
+  path?: string;
+}
+
+const WORKPLACE_AI_APP_ID: WorkplaceAIApp = 'workplace_ai';
+
+const SERVERLESS_TARGETS: Record<string, GetStartedTarget> = {
+  observability: { appId: OBSERVABILITY_ONBOARDING_APP_ID },
+  search: { appId: SEARCH_GETTING_STARTED },
+  security: { appId: SECURITY_APP_ID, path: '/get_started' },
+  workplaceai: { appId: WORKPLACE_AI_APP_ID },
+};
+
+const SPACE_SOLUTION_TARGETS: Record<string, GetStartedTarget> = {
+  oblt: { appId: OBSERVABILITY_ONBOARDING_APP_ID },
+  es: { appId: SEARCH_GETTING_STARTED },
+  security: { appId: SECURITY_APP_ID, path: '/get_started' },
+  workplaceai: { appId: WORKPLACE_AI_APP_ID },
+  classic: { appId: HOME_APP_ID },
+};
+
+export const useFooterLinks = ({
+  application,
+  cloud,
+  isServerless,
+  activeSpaceSolution,
+}: {
+  application: CoreStart['application'];
+  cloud?: CloudStart;
+  isServerless?: boolean;
+  activeSpaceSolution?: Space['solution'];
+}): LinksListItem[] => {
+  const [usersAndRolesUrl, setUsersAndRolesUrl] = useState<string | undefined>(undefined);
+
+  const canAccessApp = useCallback(
+    (appId: string): boolean => application.capabilities.navLinks?.[appId] === true,
+    [application.capabilities.navLinks]
+  );
+
+  useEffect(() => {
+    let isMounted = true;
+
+    if (!cloud || isServerless !== true) {
+      setUsersAndRolesUrl(undefined);
+      return () => {
+        isMounted = false;
+      };
+    }
+
+    cloud
+      .getPrivilegedUrls()
+      .then((urls) => {
+        if (isMounted) setUsersAndRolesUrl(urls.usersAndRolesUrl);
+      })
+      .catch(() => {
+        if (isMounted) setUsersAndRolesUrl(undefined);
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [cloud, isServerless]);
+
+  return useMemo(() => {
+    const items: LinksListItem[] = [];
+
+    const serverlessProjectType = isServerless === true ? cloud?.serverless.projectType : undefined;
+
+    const preferredTarget = (serverlessProjectType && SERVERLESS_TARGETS[serverlessProjectType]) ??
+      (activeSpaceSolution && SPACE_SOLUTION_TARGETS[activeSpaceSolution]) ?? {
+        appId: HOME_APP_ID,
+      };
+
+    const isObservability =
+      serverlessProjectType === 'observability' || activeSpaceSolution === 'oblt';
+
+    const getStartedHref = canAccessApp(preferredTarget.appId)
+      ? application.getUrlForApp(preferredTarget.appId, { path: preferredTarget.path })
+      : undefined;
+
+    // "Get started" link ("Add data" for Observability projects)
+    if (getStartedHref) {
+      items.push({
+        id: isObservability ? 'addData' : 'getStarted',
+        label: isObservability
+          ? i18n.translate('xpack.spaces.contextSwitcher.footerLinks.addDataLabel', {
+              defaultMessage: 'Add data',
+            })
+          : i18n.translate('xpack.spaces.contextSwitcher.footerLinks.getStartedLabel', {
+              defaultMessage: 'Get started',
+            }),
+        href: getStartedHref,
+        iconType: isObservability ? 'plus' : 'rocket',
+        'data-test-subj': `contextSwitcherFooterGetStarted-${preferredTarget.appId}`,
+      });
+    }
+
+    // "Connection details" link
+    if (isServerless === true && cloud?.isCloudEnabled === true) {
+      items.push({
+        id: 'connectionDetails',
+        label: i18n.translate('xpack.spaces.contextSwitcher.footerLinks.connectionDetailsLabel', {
+          defaultMessage: 'Connection details',
+        }),
+        onClick: () => {
+          void openWiredConnectionDetails();
+        },
+        iconType: 'plugs',
+        'data-test-subj': 'contextSwitcherFooterConnectionDetails',
+      });
+    }
+
+    const canInviteUsersViaCloud = isServerless === true && Boolean(usersAndRolesUrl);
+    const canInviteUsersViaKibana =
+      isServerless !== true &&
+      canAccessApp('management') &&
+      application.capabilities.users?.save === true;
+
+    const inviteUsersHref = canInviteUsersViaCloud
+      ? usersAndRolesUrl
+      : canInviteUsersViaKibana
+      ? application.getUrlForApp('management', { path: 'security/users' })
+      : undefined;
+
+    // "Invite users" link
+    if (inviteUsersHref) {
+      items.push({
+        id: 'inviteUsers',
+        label: i18n.translate('xpack.spaces.contextSwitcher.footerLinks.inviteUsersLabel', {
+          defaultMessage: 'Invite users',
+        }),
+        href: inviteUsersHref,
+        iconType: 'user',
+        external: canInviteUsersViaCloud,
+        'data-test-subj': 'contextSwitcherFooterInviteUsers',
+      });
+    }
+
+    return items;
+  }, [application, canAccessApp, cloud, isServerless, usersAndRolesUrl, activeSpaceSolution]);
+};

From 059e8551b945b22fd748b5e41450e1501d77441a Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Wed, 6 May 2026 23:55:03 +0200
Subject: [PATCH 47/77] Fix missing export

---
 .../chrome/app-menu/core-chrome-app-menu-components/index.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
index ef4587ecf77ff..084f0863bffd5 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
@@ -24,7 +24,7 @@ export type {
   AppMenuSplitButtonProps,
 } from './src';
 
-export { APP_MENU_ITEM_LIMIT } from './src';
+export { APP_MENU_ITEM_LIMIT, APP_MENU_SHARE_ID } from './src';
 
 export {
   getDisplayedItemsAllowedAmount,

From bec5df613b96f8aac33bb982f0efc121321a64be Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Thu, 7 May 2026 12:19:44 +0200
Subject: [PATCH 48/77] Update context switcher button size

---
 .../src/components/context_switcher_trigger_button.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
index 1844ccefb2473..55b1c842c31e0 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_switcher_trigger_button.tsx
@@ -43,7 +43,7 @@ export const ContextSwitcherTriggerButton = ({
   return (
     <EuiButtonEmpty
       color="text"
-      size="m"
+      size="s"
       onClick={onClick}
       iconType="arrowDown"
       iconSide="right"

From 42c759024218dfe1fda5bd2900aa4dcf835e781f Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 7 May 2026 10:33:48 +0000
Subject: [PATCH 49/77] Changes from node scripts/lint_ts_projects --fix

---
 src/platform/plugins/shared/dashboard/tsconfig.json | 1 -
 x-pack/platform/plugins/shared/spaces/tsconfig.json | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/platform/plugins/shared/dashboard/tsconfig.json b/src/platform/plugins/shared/dashboard/tsconfig.json
index 4c96150941579..a973a5a92c3ca 100644
--- a/src/platform/plugins/shared/dashboard/tsconfig.json
+++ b/src/platform/plugins/shared/dashboard/tsconfig.json
@@ -125,7 +125,6 @@
     "@kbn/dashboard-navigation-options-components",
     "@kbn/dashboard-navigation-options-schema",
     "@kbn/as-code-shared-telemetry",
-    "@kbn/core-chrome-browser"
   ],
   "exclude": [
     "target/**/*"
diff --git a/x-pack/platform/plugins/shared/spaces/tsconfig.json b/x-pack/platform/plugins/shared/spaces/tsconfig.json
index f97566d661a00..be06ebe7f21af 100644
--- a/x-pack/platform/plugins/shared/spaces/tsconfig.json
+++ b/x-pack/platform/plugins/shared/spaces/tsconfig.json
@@ -65,6 +65,12 @@
     "@kbn/cps-utils",
     "@kbn/tour-queue",
     "@kbn/context-switcher-components",
+    "@kbn/cloud",
+    "@kbn/deeplinks-observability",
+    "@kbn/deeplinks-search",
+    "@kbn/deeplinks-security",
+    "@kbn/deeplinks-shared",
+    "@kbn/deeplinks-workplace-ai",
   ],
   "exclude": ["target/**/*"]
 }

From 06fce620b702a63df2856ae1ccb267a14ecf1fc2 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 7 May 2026 10:37:19 +0000
Subject: [PATCH 50/77] TO FIX: Run node 'scripts/yarn_deduplicate && yarn kbn
 bootstrap' locally, or add an exception to src/dev/yarn_deduplicate/index.ts
 and then commit the changes and push to your branch

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c39258d4d33d8..4540d79b50785 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4823,6 +4823,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/app-header@link:src/core/packages/chrome/app-header":
+  version "0.0.0"
+  uid ""
+
 "@kbn/app-link-test-plugin@link:src/platform/test/plugin_functional/plugins/app_link_test":
   version "0.0.0"
   uid ""
@@ -8139,10 +8143,6 @@
   version "0.0.0"
   uid ""
 
-"@kbn/app-header@link:src/core/packages/chrome/app-header":
-  version "0.0.0"
-  uid ""
-
 "@kbn/painless-lab-plugin@link:x-pack/platform/plugins/private/painless_lab":
   version "0.0.0"
   uid ""

From dfde4dea92f5640748ada456c37df4d3553890ca Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 7 May 2026 10:38:47 +0000
Subject: [PATCH 51/77] Changes from node scripts/generate codeowners

---
 .github/CODEOWNERS | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 60182f4b392a0..c2bcd244d9082 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -136,6 +136,7 @@ src/core/packages/capabilities/common @elastic/kibana-core
 src/core/packages/capabilities/server @elastic/kibana-core
 src/core/packages/capabilities/server-internal @elastic/kibana-core
 src/core/packages/capabilities/server-mocks @elastic/kibana-core
+src/core/packages/chrome/app-header @elastic/appex-sharedux
 src/core/packages/chrome/app-menu/core-chrome-app-menu @elastic/appex-sharedux
 src/core/packages/chrome/app-menu/core-chrome-app-menu-components @elastic/appex-sharedux
 src/core/packages/chrome/browser @elastic/appex-sharedux
@@ -145,6 +146,7 @@ src/core/packages/chrome/browser-hooks @elastic/appex-sharedux
 src/core/packages/chrome/browser-internal @elastic/appex-sharedux
 src/core/packages/chrome/browser-internal-types @elastic/appex-sharedux
 src/core/packages/chrome/browser-mocks @elastic/appex-sharedux
+src/core/packages/chrome/feature-flags @elastic/appex-sharedux
 src/core/packages/chrome/layout/core-chrome-layout @elastic/appex-sharedux
 src/core/packages/chrome/layout/core-chrome-layout-components @elastic/appex-sharedux
 src/core/packages/chrome/layout/core-chrome-layout-constants @elastic/appex-sharedux

From ef7c3d3d83bd8b5b4a79aaaa6e2ff0b1e6979294 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 7 May 2026 10:38:55 +0000
Subject: [PATCH 52/77] Changes from node scripts/regenerate_moon_projects.js
 --update

---
 x-pack/platform/plugins/shared/spaces/moon.yml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/x-pack/platform/plugins/shared/spaces/moon.yml b/x-pack/platform/plugins/shared/spaces/moon.yml
index 733e6eb2eb776..2c0a621e06dc4 100644
--- a/x-pack/platform/plugins/shared/spaces/moon.yml
+++ b/x-pack/platform/plugins/shared/spaces/moon.yml
@@ -77,6 +77,12 @@ dependsOn:
   - '@kbn/cps-utils'
   - '@kbn/tour-queue'
   - '@kbn/context-switcher-components'
+  - '@kbn/cloud'
+  - '@kbn/deeplinks-observability'
+  - '@kbn/deeplinks-search'
+  - '@kbn/deeplinks-security'
+  - '@kbn/deeplinks-shared'
+  - '@kbn/deeplinks-workplace-ai'
 tags:
   - plugin
   - prod

From 981814abdcd101dd608b9c45f2abc930423324a4 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 7 May 2026 10:49:20 +0000
Subject: [PATCH 53/77] Changes from node scripts/eslint_all_files --no-cache
 --fix

---
 .../app-header/src/app_header/hooks/chrome.ts |   1 -
 .../chrome/browser-components/index.ts        |   6 +-
 .../public/application/doc/components/doc.tsx | 158 +++++++++---------
 .../details_page/use_manage_index_menu.tsx    |  40 +++--
 4 files changed, 114 insertions(+), 91 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts
index 0513922e58569..2a9ca494ee300 100644
--- a/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/chrome.ts
@@ -24,4 +24,3 @@ export function useLegacyActionMenu(): MountPoint | undefined {
 export function useHasLegacyActionMenu(): boolean {
   return !!useLegacyActionMenu();
 }
-
diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 1bdc52b8c86d8..e3df11a57fa52 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -11,7 +11,11 @@ export { ChromeComponentsProvider } from './src/context';
 export type { ChromeComponentsDeps } from './src/context';
 
 export { ClassicHeader } from './src/classic';
-export { ProjectHeader, ChromeAppHeaderRenderer, useHasChromeAppHeaderContent } from './src/project';
+export {
+  ProjectHeader,
+  ChromeAppHeaderRenderer,
+  useHasChromeAppHeaderContent,
+} from './src/project';
 export { GlobalHeader, GlobalHeaderShell, HeaderActionButton } from './src/chrome_next';
 export type { GlobalHeaderShellProps, HeaderActionButtonProps } from './src/chrome_next';
 export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_sidenav';
diff --git a/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx b/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx
index a2e7b4e2f1e93..d843284c0346f 100644
--- a/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx
+++ b/src/platform/plugins/shared/discover/public/application/doc/components/doc.tsx
@@ -73,91 +73,91 @@ export function Doc(props: DocProps) {
       />
       <EuiPage>
         <h1
-        id="singleDocTitle"
-        className="euiScreenReaderOnly"
-        data-test-subj="discoverSingleDocTitle"
-      >
-        {i18n.translate('discover.doc.pageTitle', {
-          defaultMessage: 'Single document - #{id}',
-          values: { id: props.id },
-        })}
-      </h1>
-      <EuiPageBody panelled paddingSize="m" panelProps={{ role: 'main' }}>
-        {reqState === ElasticRequestState.NotFoundDataView && (
-          <EuiCallOut
-            announceOnMount
-            color="danger"
-            data-test-subj={`doc-msg-notFoundDataView`}
-            iconType="warning"
-            title={
-              <FormattedMessage
-                id="discover.doc.failedToLocateDataView"
-                defaultMessage="No data view matches ID {dataViewId}."
-                values={{ dataViewId: dataView.id }}
-              />
-            }
-          />
-        )}
-        {reqState === ElasticRequestState.NotFound && (
-          <EuiCallOut
-            announceOnMount
-            color="danger"
-            data-test-subj={`doc-msg-notFound`}
-            iconType="warning"
-            title={
-              <FormattedMessage
-                id="discover.doc.failedToLocateDocumentDescription"
-                defaultMessage="Cannot find document"
-              />
-            }
-          >
-            <FormattedMessage
-              id="discover.doc.couldNotFindDocumentsDescription"
-              defaultMessage="No documents match that ID."
+          id="singleDocTitle"
+          className="euiScreenReaderOnly"
+          data-test-subj="discoverSingleDocTitle"
+        >
+          {i18n.translate('discover.doc.pageTitle', {
+            defaultMessage: 'Single document - #{id}',
+            values: { id: props.id },
+          })}
+        </h1>
+        <EuiPageBody panelled paddingSize="m" panelProps={{ role: 'main' }}>
+          {reqState === ElasticRequestState.NotFoundDataView && (
+            <EuiCallOut
+              announceOnMount
+              color="danger"
+              data-test-subj={`doc-msg-notFoundDataView`}
+              iconType="warning"
+              title={
+                <FormattedMessage
+                  id="discover.doc.failedToLocateDataView"
+                  defaultMessage="No data view matches ID {dataViewId}."
+                  values={{ dataViewId: dataView.id }}
+                />
+              }
             />
-          </EuiCallOut>
-        )}
-
-        {reqState === ElasticRequestState.Error && (
-          <EuiCallOut
-            announceOnMount
-            color="danger"
-            data-test-subj={`doc-msg-error`}
-            iconType="warning"
-            title={
+          )}
+          {reqState === ElasticRequestState.NotFound && (
+            <EuiCallOut
+              announceOnMount
+              color="danger"
+              data-test-subj={`doc-msg-notFound`}
+              iconType="warning"
+              title={
+                <FormattedMessage
+                  id="discover.doc.failedToLocateDocumentDescription"
+                  defaultMessage="Cannot find document"
+                />
+              }
+            >
               <FormattedMessage
-                id="discover.doc.failedToExecuteQueryDescription"
-                defaultMessage="Cannot run search"
+                id="discover.doc.couldNotFindDocumentsDescription"
+                defaultMessage="No documents match that ID."
               />
-            }
-          >
-            <FormattedMessage
-              id="discover.doc.somethingWentWrongDescription"
-              defaultMessage="{indexName} is missing."
-              values={{ indexName: props.index }}
-            />{' '}
-            <EuiLink href={indexExistsLink} target="_blank">
+            </EuiCallOut>
+          )}
+
+          {reqState === ElasticRequestState.Error && (
+            <EuiCallOut
+              announceOnMount
+              color="danger"
+              data-test-subj={`doc-msg-error`}
+              iconType="warning"
+              title={
+                <FormattedMessage
+                  id="discover.doc.failedToExecuteQueryDescription"
+                  defaultMessage="Cannot run search"
+                />
+              }
+            >
               <FormattedMessage
-                id="discover.doc.somethingWentWrongDescriptionAddon"
-                defaultMessage="Please ensure the index exists."
-              />
-            </EuiLink>
-          </EuiCallOut>
-        )}
+                id="discover.doc.somethingWentWrongDescription"
+                defaultMessage="{indexName} is missing."
+                values={{ indexName: props.index }}
+              />{' '}
+              <EuiLink href={indexExistsLink} target="_blank">
+                <FormattedMessage
+                  id="discover.doc.somethingWentWrongDescriptionAddon"
+                  defaultMessage="Please ensure the index exists."
+                />
+              </EuiLink>
+            </EuiCallOut>
+          )}
 
-        {reqState === ElasticRequestState.Loading && (
-          <EuiCallOut announceOnMount data-test-subj={`doc-msg-loading`}>
-            <EuiLoadingSpinner size="m" />{' '}
-            <FormattedMessage id="discover.doc.loadingDescription" defaultMessage="Loading…" />
-          </EuiCallOut>
-        )}
+          {reqState === ElasticRequestState.Loading && (
+            <EuiCallOut announceOnMount data-test-subj={`doc-msg-loading`}>
+              <EuiLoadingSpinner size="m" />{' '}
+              <FormattedMessage id="discover.doc.loadingDescription" defaultMessage="Loading…" />
+            </EuiCallOut>
+          )}
 
-        {reqState === ElasticRequestState.Found && record !== null && dataView && (
-          <div data-test-subj="doc-hit">
-            <SingleDocViewer record={record} dataView={dataView} />
-          </div>
-        )}
-      </EuiPageBody>
+          {reqState === ElasticRequestState.Found && record !== null && dataView && (
+            <div data-test-subj="doc-hit">
+              <SingleDocViewer record={record} dataView={dataView} />
+            </div>
+          )}
+        </EuiPageBody>
       </EuiPage>
     </>
   );
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
index d24e8c7cda081..9d0a217b23104 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
@@ -201,7 +201,9 @@ export function useManageIndexMenu({
         label: i18n.translate('xpack.idxMgmt.indexActionsMenu.closeIndexLabel', {
           defaultMessage: 'Close index',
         }),
-        run: () => { closeIndices(); },
+        run: () => {
+          closeIndices();
+        },
         testId: 'closeIndexMenuButton',
       });
       items.push({
@@ -210,7 +212,9 @@ export function useManageIndexMenu({
         label: i18n.translate('xpack.idxMgmt.indexActionsMenu.forceMergeIndexLabel', {
           defaultMessage: 'Force merge index',
         }),
-        run: () => { modalRef.current?.openModal({ kind: 'forcemerge' }); },
+        run: () => {
+          modalRef.current?.openModal({ kind: 'forcemerge' });
+        },
         testId: 'forcemergeIndexMenuButton',
       });
       items.push({
@@ -219,7 +223,9 @@ export function useManageIndexMenu({
         label: i18n.translate('xpack.idxMgmt.indexActionsMenu.refreshIndexLabel', {
           defaultMessage: 'Refresh index',
         }),
-        run: () => { refreshIndices(); },
+        run: () => {
+          refreshIndices();
+        },
         testId: 'refreshIndexMenuButton',
       });
       items.push({
@@ -228,7 +234,9 @@ export function useManageIndexMenu({
         label: i18n.translate('xpack.idxMgmt.indexActionsMenu.clearIndexCacheLabel', {
           defaultMessage: 'Clear index cache',
         }),
-        run: () => { clearCacheIndices(); },
+        run: () => {
+          clearCacheIndices();
+        },
         testId: 'clearCacheIndexMenuButton',
       });
       items.push({
@@ -237,7 +245,9 @@ export function useManageIndexMenu({
         label: i18n.translate('xpack.idxMgmt.indexActionsMenu.flushIndexLabel', {
           defaultMessage: 'Flush index',
         }),
-        run: () => { flushIndices(); },
+        run: () => {
+          flushIndices();
+        },
         testId: 'flushIndexMenuButton',
       });
     } else if (!allOpen && enableIndexActions) {
@@ -247,7 +257,9 @@ export function useManageIndexMenu({
         label: i18n.translate('xpack.idxMgmt.indexActionsMenu.openIndexLabel', {
           defaultMessage: 'Open index',
         }),
-        run: () => { openIndices(); },
+        run: () => {
+          openIndices();
+        },
         testId: 'openIndexMenuButton',
       });
     }
@@ -258,7 +270,9 @@ export function useManageIndexMenu({
       label: i18n.translate('xpack.idxMgmt.indexActionsMenu.deleteIndexLabel', {
         defaultMessage: 'Delete index',
       }),
-      run: () => { modalRef.current?.openModal({ kind: 'delete' }); },
+      run: () => {
+        modalRef.current?.openModal({ kind: 'delete' });
+      },
       testId: 'deleteIndexMenuButton',
     });
 
@@ -275,14 +289,18 @@ export function useManageIndexMenu({
             id: `extension-${actionIndex}`,
             order: order++,
             label: buttonLabel,
-            run: () => { performExtensionAction(requestMethod, successMessage); },
+            run: () => {
+              performExtensionAction(requestMethod, successMessage);
+            },
           });
         } else if (renderConfirmModal) {
           items.push({
             id: `extension-${actionIndex}`,
             order: order++,
             label: buttonLabel,
-            run: () => { modalRef.current?.openModal({ kind: 'extension', actionIndex }); },
+            run: () => {
+              modalRef.current?.openModal({ kind: 'extension', actionIndex });
+            },
           });
         }
       }
@@ -307,7 +325,9 @@ export function useManageIndexMenu({
           defaultMessage: 'Convert to lookup index',
         }),
         disableButton: !isConvertable,
-        run: () => { modalRef.current?.openModal({ kind: 'convertToLookup' }); },
+        run: () => {
+          modalRef.current?.openModal({ kind: 'convertToLookup' });
+        },
         testId: 'convertToLookupIndexButton',
       });
     }

From c95ee500a120000d00da99f178c8bbc63edcc9b0 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Thu, 7 May 2026 13:54:46 +0200
Subject: [PATCH 54/77] [Chrome Next][DoNotReview] Use app docs API for index
 management (#268078)

## Summary

This PR changes index management to use app docs API instead of
registering app menu config.
---
 .../app-header/src/app_header/app_header.tsx  |  5 ++--
 .../app-header/src/app_header/app_menu.tsx    |  7 +++--
 .../app_header/hooks/use_app_header_menu.ts   | 28 +++++++++++++------
 .../src/app_header_with_fallback.tsx          |  2 ++
 .../enrich_policy_create.tsx                  | 26 ++---------------
 .../public/application/sections/home/home.tsx | 26 ++---------------
 6 files changed, 33 insertions(+), 61 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
index c6624810cc975..3f37ab2f0c3bf 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
@@ -31,10 +31,11 @@ export interface AppHeaderViewProps {
   favorite?: ReactNode;
   sticky?: boolean;
   padding?: AppHeaderPadding;
+  docLink?: string;
 }
 
 export const AppHeaderView = React.memo<AppHeaderViewProps>(
-  ({ title, back, tabs, badges, menu, onShare, favorite, sticky, padding }) => {
+  ({ title, back, tabs, badges, menu, onShare, favorite, sticky, padding, docLink }) => {
     const hasLegacyActionMenu = useHasLegacyActionMenu();
     const shareAction = useShareAction(menu, onShare);
     const show =
@@ -54,7 +55,7 @@ export const AppHeaderView = React.memo<AppHeaderViewProps>(
         title={<TitleArea title={title} back={back} />}
         badges={<AppBadges badges={badges} />}
         titleActions={<TitleActions shareAction={shareAction} favorite={favorite} />}
-        trailing={<AppMenu menu={menu} hasExplicitShare={!!onShare} />}
+        trailing={<AppMenu menu={menu} hasExplicitShare={!!onShare} docLink={docLink} />}
         tabs={<AppTabs tabs={tabs} />}
         sticky={sticky}
         padding={padding}
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
index 93fbcdbd09620..9ae663ec0e9e3 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
@@ -21,13 +21,14 @@ const AppMenuComponent = lazy(async () => {
 export interface AppMenuProps {
   menu?: AppMenuConfig;
   hasExplicitShare?: boolean;
+  docLink?: string;
 }
 
-export const AppMenu = React.memo<AppMenuProps>(({ menu, hasExplicitShare }) => {
-  const { config, staticItems } = useAppHeaderMenu(menu, !!hasExplicitShare);
+export const AppMenu = React.memo<AppMenuProps>(({ menu, hasExplicitShare, docLink }) => {
+  const { config, staticItems } = useAppHeaderMenu(menu, !!hasExplicitShare, docLink);
   const hasLegacyActionMenu = useHasLegacyActionMenu();
 
-  if (config) {
+  if (config || staticItems?.length) {
     return (
       <Suspense>
         <AppMenuComponent config={config} staticItems={staticItems} />
diff --git a/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
index 60d8a76755e0a..fdf5ef893976f 100644
--- a/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
@@ -8,13 +8,17 @@
  */
 
 import { useMemo } from 'react';
-import type { AppMenuConfig, AppMenuItemType } from '@kbn/core-chrome-app-menu-components';
+import type {
+  AppMenuConfig,
+  AppMenuItemType,
+  AppMenuStaticItem,
+} from '@kbn/core-chrome-app-menu-components';
 import { APP_MENU_SHARE_ID, getTooltip } from '@kbn/core-chrome-app-menu-components';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { useObservable } from '@kbn/use-observable';
 import { i18n } from '@kbn/i18n';
 
-const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuItemType => ({
+const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuStaticItem => ({
   label: i18n.translate('chrome.appHeader.feedbackMenuItemLabel', {
     defaultMessage: 'Feedback',
   }),
@@ -22,9 +26,10 @@ const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuItemType =>
   iconType: 'comment',
   order: 1,
   run: feedbackHandler,
+  global: true,
 });
 
-const createDocumentationMenuItem = (href: string): AppMenuItemType => ({
+const createDocumentationMenuItem = (href: string): AppMenuStaticItem => ({
   label: i18n.translate('chrome.appHeader.documentationMenuItemLabel', {
     defaultMessage: 'Documentation',
   }),
@@ -40,20 +45,24 @@ interface ResolvedAppMenu {
   shareItem: AppMenuItemType | undefined;
 }
 
-const useStaticItems = () => {
+const useStaticItems = (explicitDocLink?: string) => {
   const chrome = useChromeService();
   const feedbackHandler = useObservable(chrome.getFeedbackHandler$(), undefined);
   const documentationLink = useObservable(chrome.getAppDocumentationLink$(), undefined);
   const helpExtension = useObservable(chrome.getHelpExtension$(), undefined);
 
   return useMemo(() => {
-    const staticItems: AppMenuItemType[] = [];
+    const staticItems: AppMenuStaticItem[] = [];
 
     if (feedbackHandler) {
       staticItems.push(createFeedbackMenuItem(feedbackHandler));
     }
 
+    /**
+     * Precedence: <AppHeader/> docLink prop -> chrome.getAppDocumentationLink$() -> chrome.getHelpExtension$()
+     */
     const docLink =
+      explicitDocLink ??
       documentationLink ??
       helpExtension?.links?.find((link) => link.linkType === 'documentation')?.href;
 
@@ -62,7 +71,7 @@ const useStaticItems = () => {
     }
 
     return staticItems;
-  }, [feedbackHandler, documentationLink, helpExtension]);
+  }, [feedbackHandler, explicitDocLink, documentationLink, helpExtension]);
 };
 
 const useResolvedAppMenu = (
@@ -87,13 +96,14 @@ const useResolvedAppMenu = (
 
 export function useAppHeaderMenu(
   pageAppMenu: AppMenuConfig | undefined,
-  hasExplicitShare: boolean
+  hasExplicitShare: boolean,
+  docLink?: string
 ): {
   config: AppMenuConfig | undefined;
-  staticItems: AppMenuItemType[];
+  staticItems: AppMenuStaticItem[];
 } {
   const { menu } = useResolvedAppMenu(pageAppMenu, hasExplicitShare);
-  const staticItems = useStaticItems();
+  const staticItems = useStaticItems(docLink);
 
   return {
     config: menu,
diff --git a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
index 0c1dff58a8326..2990ca857ff08 100644
--- a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
@@ -42,6 +42,7 @@ export const AppHeaderWithFallback: FC<AppHeaderWithFallbackProps> = ({
   fallback,
   sticky,
   padding,
+  docLink,
 }) => {
   const chrome = useChromeService();
 
@@ -72,6 +73,7 @@ export const AppHeaderWithFallback: FC<AppHeaderWithFallbackProps> = ({
       favorite={favorite}
       sticky={sticky}
       padding={padding}
+      docLink={docLink}
     />
   );
 };
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
index a85a0bfa9384b..ea4f648f1fb0d 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
@@ -5,16 +5,14 @@
  * 2.0.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { documentationService } from '../../services/documentation';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../services/breadcrumbs';
 import { PageHeader } from '../../components/page_header';
-
 import { CreatePolicyWizard } from './create_policy_wizard';
 import { CreatePolicyContextProvider } from './create_policy_context';
 
@@ -23,26 +21,6 @@ export const EnrichPolicyCreate: React.FunctionComponent<RouteComponentProps> =
     breadcrumbService.setBreadcrumbs(IndexManagementBreadcrumb.enrichPoliciesCreate);
   }, []);
 
-  const appMenu = useMemo<AppMenuConfig>(
-    () => ({
-      items: [
-        {
-          id: 'createEnrichPolicyDocumentationLink',
-          order: 0,
-          overflow: true,
-          label: i18n.translate('xpack.idxMgmt.enrichPolicyCreate.titleDocsLinkText', {
-            defaultMessage: 'Documentation',
-          }),
-          iconType: 'documentation',
-          href: documentationService.getCreateEnrichPolicyLink(),
-          target: '_blank',
-          testId: 'createEnrichPolicyDocumentationLink',
-        },
-      ],
-    }),
-    []
-  );
-
   return (
     <CreatePolicyContextProvider>
       <PageHeader
@@ -50,8 +28,8 @@ export const EnrichPolicyCreate: React.FunctionComponent<RouteComponentProps> =
           defaultMessage: 'Create enrich policy',
         })}
         back="/app/management/data/index_management/enrich_policies"
-        menu={appMenu}
         padding={{ bleed: 'l' }}
+        docLink={documentationService.getCreateEnrichPolicyLink()}
         fallback={{
           'data-test-subj': 'createEnrichPolicyHeaderContent',
           description: (
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
index b71a7d18ec5bf..86fe0df11e2e8 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { i18n } from '@kbn/i18n';
@@ -13,7 +13,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 
 import type { AppHeaderTab } from '@kbn/app-header';
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { PageHeader } from '../../components/page_header';
 
 import { Section } from '../../../../common/constants';
@@ -48,6 +47,7 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
     plugins: { console: consolePlugin },
     privs,
   } = useAppContext();
+
   const onSectionChange = (newSection: Section) => {
     history.push(`/${newSection}`);
   };
@@ -101,26 +101,6 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
     });
   }
 
-  const appMenu = useMemo<AppMenuConfig>(
-    () => ({
-      items: [
-        {
-          id: 'documentationLink',
-          order: 0,
-          overflow: true,
-          label: i18n.translate('xpack.idxMgmt.home.idxMgmtDocsLinkText', {
-            defaultMessage: 'Documentation',
-          }),
-          iconType: 'documentation',
-          href: documentationService.getIdxMgmtDocumentationLink(),
-          target: '_blank',
-          testId: 'documentationLink',
-        },
-      ],
-    }),
-    []
-  );
-
   const indexManagementTabs = (
     <>
       <PageHeader
@@ -128,8 +108,8 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
           defaultMessage: 'Index Management',
         })}
         tabs={tabs}
-        menu={appMenu}
         padding={{ bleed: 'l' }}
+        docLink={documentationService.getIdxMgmtDocumentationLink()}
         fallback={{
           'data-test-subj': 'indexManagementHeaderContent',
           rightSideItems: [

From 9d473ca7ac6d655a5fe533f7398510010113aa0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngeles=20Mart=C3=ADnez=20Barrio?=
 <angeles.martinezbarrio@elastic.co>
Date: Thu, 7 May 2026 14:39:07 +0200
Subject: [PATCH 55/77] [DoNotReview/FeatureBranch][Chrome Next] Lazy load
 context switcher (#268161)

Relates to https://github.com/elastic/kibana/issues/259992

## Summary

- Lazy load context switcher
- Fix some i18 issues
- Update spaces plugin limits
---
 packages/kbn-optimizer/limits.yml             |  2 +-
 .../app_header/hooks/use_app_header_menu.ts   |  4 +--
 .../context_switcher/context_switcher.tsx     | 31 +++++++++----------
 .../context_switcher_component.tsx            | 22 ++++++++++---
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index 66107f1bd9b79..d328b3b5355a0 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -175,7 +175,7 @@ pageLoadAssetSize:
   share: 64066
   slo: 40437
   snapshotRestore: 22068
-  spaces: 36639
+  spaces: 30180
   stackAlerts: 31499
   stackConnectors: 85421
   streams: 32595
diff --git a/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
index fdf5ef893976f..a4540fe4336b8 100644
--- a/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
@@ -19,7 +19,7 @@ import { useObservable } from '@kbn/use-observable';
 import { i18n } from '@kbn/i18n';
 
 const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuStaticItem => ({
-  label: i18n.translate('chrome.appHeader.feedbackMenuItemLabel', {
+  label: i18n.translate('core.chrome.appHeader.feedbackMenuItemLabel', {
     defaultMessage: 'Feedback',
   }),
   id: 'feedback',
@@ -30,7 +30,7 @@ const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuStaticItem
 });
 
 const createDocumentationMenuItem = (href: string): AppMenuStaticItem => ({
-  label: i18n.translate('chrome.appHeader.documentationMenuItemLabel', {
+  label: i18n.translate('core.chrome.appHeader.documentationMenuItemLabel', {
     defaultMessage: 'Documentation',
   }),
   id: 'documentation',
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx
index aa30a9290983c..1b49df1fab01b 100644
--- a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher.tsx
@@ -9,11 +9,16 @@ import React from 'react';
 
 import type { CloudStart } from '@kbn/cloud-plugin/public';
 import type { CoreStart } from '@kbn/core/public';
-import { QueryClient, QueryClientProvider } from '@kbn/react-query';
+import { dynamic } from '@kbn/shared-ux-utility';
 
-import { ContextSwitcherComponent } from './context_switcher_component';
 import type { SpacesManager } from '../spaces_manager';
 
+const LazyContextSwitcherComponent = dynamic(() =>
+  import('./context_switcher_component').then((m) => ({
+    default: m.ContextSwitcherComponent,
+  }))
+);
+
 export function initContextSwitcher(
   spacesManager: SpacesManager,
   core: CoreStart,
@@ -25,21 +30,13 @@ export function initContextSwitcher(
     return;
   }
 
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { staleTime: 0, networkMode: 'always' },
-    },
-  });
-
   core.chrome.next.contextSwitcher.set(
-    <QueryClientProvider client={queryClient}>
-      <ContextSwitcherComponent
-        spacesManager={spacesManager}
-        core={core}
-        cloud={cloud}
-        isServerless={isServerless}
-        allowSolutionVisibility={allowSolutionVisibility}
-      />
-    </QueryClientProvider>
+    <LazyContextSwitcherComponent
+      spacesManager={spacesManager}
+      core={core}
+      cloud={cloud}
+      isServerless={isServerless}
+      allowSolutionVisibility={allowSolutionVisibility}
+    />
   );
 }
diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
index 7a4a99f260af4..e3e521fb04b56 100644
--- a/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/context_switcher_component.tsx
@@ -13,7 +13,7 @@ import {
   type ContextSwitcherSpacesConfig,
 } from '@kbn/context-switcher-components';
 import type { CoreStart } from '@kbn/core/public';
-import { useQueryClient } from '@kbn/react-query';
+import { QueryClient, QueryClientProvider } from '@kbn/react-query';
 
 import { useFooterLinks } from './hooks';
 import { useActiveSpace } from './hooks/use_active_space';
@@ -32,15 +32,27 @@ interface ContextSwitcherComponentProps {
   allowSolutionVisibility: boolean;
 }
 
-export const ContextSwitcherComponent = ({
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 0, networkMode: 'always' },
+  },
+});
+
+export const ContextSwitcherComponent = (props: ContextSwitcherComponentProps) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ContextSwitcherInner {...props} />
+    </QueryClientProvider>
+  );
+};
+
+const ContextSwitcherInner = ({
   spacesManager,
   core,
   cloud,
   isServerless,
   allowSolutionVisibility,
 }: ContextSwitcherComponentProps) => {
-  const queryClient = useQueryClient();
-
   const { data: spaces, isLoading } = useSpaces(spacesManager);
   const activeSpace = useActiveSpace(spacesManager);
 
@@ -80,7 +92,7 @@ export const ContextSwitcherComponent = ({
 
   const handleOpen = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: SPACES_QUERY_KEY });
-  }, [queryClient]);
+  }, []);
 
   const spacesConfig = useMemo((): ContextSwitcherSpacesConfig | undefined => {
     if (!activeSpaceItem) return undefined;

From 01ffcf59450b71ec71a8bac6b82727022478901c Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Thu, 7 May 2026 14:42:36 +0200
Subject: [PATCH 56/77] Update cloud bundle limits

---
 packages/kbn-optimizer/limits.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index d328b3b5355a0..2f2115950a52a 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -15,7 +15,7 @@ pageLoadAssetSize:
   canvas: 14881
   cases: 177203
   charts: 40269
-  cloud: 10648
+  cloud: 11906
   cloudConnect: 9149
   cloudDataMigration: 5687
   cloudDefend: 8146

From cc429fca88df0cc7034c6ce29a2576aec9aeb9c5 Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Thu, 7 May 2026 15:08:04 +0200
Subject: [PATCH 57/77] Update use manage index menu i18n ids

---
 .../details_page/use_manage_index_menu.tsx    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
index 9d0a217b23104..6596b041ed5aa 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/use_manage_index_menu.tsx
@@ -198,7 +198,7 @@ export function useManageIndexMenu({
       items.push({
         id: 'closeIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.closeIndexLabel', {
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.closeIndexLabel', {
           defaultMessage: 'Close index',
         }),
         run: () => {
@@ -209,7 +209,7 @@ export function useManageIndexMenu({
       items.push({
         id: 'forcemergeIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.forceMergeIndexLabel', {
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.forceMergeIndexLabel', {
           defaultMessage: 'Force merge index',
         }),
         run: () => {
@@ -220,7 +220,7 @@ export function useManageIndexMenu({
       items.push({
         id: 'refreshIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.refreshIndexLabel', {
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.refreshIndexLabel', {
           defaultMessage: 'Refresh index',
         }),
         run: () => {
@@ -231,7 +231,7 @@ export function useManageIndexMenu({
       items.push({
         id: 'clearCacheIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.clearIndexCacheLabel', {
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.clearIndexCacheLabel', {
           defaultMessage: 'Clear index cache',
         }),
         run: () => {
@@ -242,7 +242,7 @@ export function useManageIndexMenu({
       items.push({
         id: 'flushIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.flushIndexLabel', {
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.flushIndexLabel', {
           defaultMessage: 'Flush index',
         }),
         run: () => {
@@ -254,7 +254,7 @@ export function useManageIndexMenu({
       items.push({
         id: 'openIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.openIndexLabel', {
+        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.openIndexLabel', {
           defaultMessage: 'Open index',
         }),
         run: () => {
@@ -267,7 +267,7 @@ export function useManageIndexMenu({
     items.push({
       id: 'deleteIndex',
       order: order++,
-      label: i18n.translate('xpack.idxMgmt.indexActionsMenu.deleteIndexLabel', {
+      label: i18n.translate('xpack.idxMgmt.indexActionsMenu.detailsPage.deleteIndexLabel', {
         defaultMessage: 'Delete index',
       }),
       run: () => {
@@ -321,9 +321,12 @@ export function useManageIndexMenu({
       items.push({
         id: 'convertToLookupIndex',
         order: order++,
-        label: i18n.translate('xpack.idxMgmt.indexActionsMenu.convertToLookupIndexButton', {
-          defaultMessage: 'Convert to lookup index',
-        }),
+        label: i18n.translate(
+          'xpack.idxMgmt.indexActionsMenu.detailsPage.convertToLookupIndexButton',
+          {
+            defaultMessage: 'Convert to lookup index',
+          }
+        ),
         disableButton: !isConvertable,
         run: () => {
           modalRef.current?.openModal({ kind: 'convertToLookup' });
@@ -346,8 +349,6 @@ export function useManageIndexMenu({
     flushIndices,
     refreshIndices,
     clearCacheIndices,
-    forcemergeIndices,
-    deleteIndices,
     performExtensionAction,
   ]);
 

From cc9577064ffd62c11886b432893f352f3d243d81 Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Thu, 7 May 2026 15:39:25 +0200
Subject: [PATCH 58/77] Override chrome next feature flag for testing purposes

---
 src/core/packages/chrome/feature-flags/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/core/packages/chrome/feature-flags/index.ts b/src/core/packages/chrome/feature-flags/index.ts
index fe4fbb3f5dc36..f3c46b69a1e69 100644
--- a/src/core/packages/chrome/feature-flags/index.ts
+++ b/src/core/packages/chrome/feature-flags/index.ts
@@ -25,7 +25,9 @@ export const isNextChrome = (featureFlags: FeatureFlagsBooleanReader): boolean =
   } catch {
     // sessionStorage may be unavailable
   }
-  return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
+  // return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
+  // TODO: Remove this after integration branch manual testing is done
+  return true;
 };
 
 export const toggleNextChrome = (featureFlags: FeatureFlagsBooleanReader): void => {

From 63becfc02ce82943a630c7ee2eff107a85cc97e0 Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Thu, 7 May 2026 16:13:31 +0200
Subject: [PATCH 59/77] Fix solution view info type

---
 .../public/context_switcher/hooks/use_space_items.tsx       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx
index adba9ce1f254f..9afc8eb17cacc 100644
--- a/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx
+++ b/x-pack/platform/plugins/shared/spaces/public/context_switcher/hooks/use_space_items.tsx
@@ -40,6 +40,12 @@ const SOLUTION_VIEW_INFO: Record<SolutionKey, { iconType: IconType; label: strin
   oblt: OBS_SOLUTION,
   search: ES_SOLUTION,
   observability: OBS_SOLUTION,
+  vectordb: {
+    iconType: 'logoElasticsearch',
+    label: i18n.translate('xpack.spaces.solutionViewInfo.vectordb', {
+      defaultMessage: 'VectorDB',
+    }),
+  },
   workplaceai: {
     iconType: 'logoElasticsearch',
     label: i18n.translate('xpack.spaces.solutionViewInfo.workplaceai', {

From 8e88b5a772de4cd487129208a47ebcbe9029d0f7 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Thu, 7 May 2026 08:31:42 -0700
Subject: [PATCH 60/77] Header style tweaks (#268086)

## Summary

### App header: tighten vertical rhythm and standardize sizing

Refines the app header's spacing to create a more breathing room.

**Changes**
- Updates the app header title from EuiTitle size="xs" to size="s" for
improved visual hierarchy
- Extends `resolveLayoutProps` to return `paddingBlock` alongside
`paddingInline`, so vertical padding follows the same `'l'` (16px) /
`'m'` (12px) logic as inline padding rather than being hardcoded
- Applies `padding-block` to `primaryRow` conditionally, with a reduced
`padding-block-end` (`xs`/4px) when tabs are present to tighten the gap
between the title row and tab strip
- Adds `hasTabs` prop to `AppHeaderShell` (derived from the raw tabs
array in `AppHeaderView` before wrapping) to correctly signal tab
presence for layout purposes
- Increases the overflow menu button from `xs` (24px) to `s` (32px) for
visual consistency with other action buttons in the header

### Screenshots

**Discover and Dashboard use the tighter `m`/12px padding**
<img width="3514" height="230" alt="CleanShot 2026-05-06 at 15 57 05@2x"
src="https://github.com/user-attachments/assets/d670215f-9d0f-4d79-87cc-1b761e157cfc"
/>

**All other apps use `l`/16px padding**
<img width="3514" height="316" alt="CleanShot 2026-05-06 at 16 01 14@2x"
src="https://github.com/user-attachments/assets/1b3726de-27c9-405b-9f18-7af0df497323"
/>

**Decrease space between title and tabs**
<img width="3514" height="290" alt="CleanShot 2026-05-06 at 15 59 01@2x"
src="https://github.com/user-attachments/assets/207332d7-8a12-4d86-bf87-e3b03c54dfe7"
/>



### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
---
 .../app-header/src/app_header/app_header.tsx  |  2 +-
 .../src/app_header/app_header_shell.tsx       | 36 ++++++++++++++-----
 .../app-header/src/app_header/title_area.tsx  |  2 +-
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
index 3f37ab2f0c3bf..c9181d00575cf 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
@@ -56,7 +56,7 @@ export const AppHeaderView = React.memo<AppHeaderViewProps>(
         badges={<AppBadges badges={badges} />}
         titleActions={<TitleActions shareAction={shareAction} favorite={favorite} />}
         trailing={<AppMenu menu={menu} hasExplicitShare={!!onShare} docLink={docLink} />}
-        tabs={<AppTabs tabs={tabs} />}
+        tabs={tabs?.length ? <AppTabs tabs={tabs} /> : undefined} 
         sticky={sticky}
         padding={padding}
       />
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx
index e866a1b67aa17..e0ba90e77a213 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header_shell.tsx
@@ -33,31 +33,46 @@ const resolveLayoutProps = (
   const resolved = padding ?? (sticky ? 'm' : 'none');
 
   if (resolved === 'none') {
-    return { paddingInline: undefined, bleedMargin: undefined };
+    return { paddingInline: undefined, paddingBlock: undefined, bleedMargin: undefined };
   }
 
   if (resolved === 'm') {
-    return { paddingInline: euiTheme.size.m, bleedMargin: undefined };
+    return {
+      paddingInline: euiTheme.size.m,
+      paddingBlock: euiTheme.size.m,
+      bleedMargin: undefined,
+    };
   }
 
   const bleedMargin = resolved.bleed === 'l' ? euiTheme.size.l : euiTheme.size.m;
   const size = resolved.size ?? resolved.bleed;
 
   let paddingInline: string | undefined;
+  let paddingBlock: string | undefined;
   if (size === 'l') {
-    paddingInline = euiTheme.size.l;
+    paddingInline = euiTheme.size.base;
+    paddingBlock = euiTheme.size.base;
   } else if (size === 'm') {
     paddingInline = euiTheme.size.m;
+    paddingBlock = euiTheme.size.m;
   }
 
-  return { paddingInline, bleedMargin };
+  return { paddingInline, paddingBlock, bleedMargin };
 };
 
-const useHeaderStyles = (sticky: boolean, padding: AppHeaderPadding | undefined) => {
+const useHeaderStyles = (
+  sticky: boolean,
+  padding: AppHeaderPadding | undefined,
+  hasTabs: boolean
+) => {
   const { euiTheme } = useEuiTheme();
 
   return useMemo(() => {
-    const { paddingInline, bleedMargin } = resolveLayoutProps(sticky, padding, euiTheme);
+    const { paddingInline, paddingBlock, bleedMargin } = resolveLayoutProps(
+      sticky,
+      padding,
+      euiTheme
+    );
 
     const root = css`
       ${sticky &&
@@ -99,6 +114,11 @@ const useHeaderStyles = (sticky: boolean, padding: AppHeaderPadding | undefined)
       gap: ${euiTheme.size.m};
       min-width: 0;
       min-height: ${APPLICATION_TOP_BAR_MIN_HEIGHT_PX}px;
+      ${paddingBlock &&
+      css`
+        padding-block-start: ${paddingBlock};
+        padding-block-end: ${hasTabs ? euiTheme.size.xs : paddingBlock};
+      `}
     `;
 
     const titleCluster = css`
@@ -146,12 +166,12 @@ const useHeaderStyles = (sticky: boolean, padding: AppHeaderPadding | undefined)
       titleActionsReveal,
       tabsRow,
     };
-  }, [euiTheme, sticky, padding]);
+  }, [euiTheme, sticky, padding, hasTabs]);
 };
 
 export const AppHeaderShell = React.memo<AppHeaderShellProps>(
   ({ title, badges, titleActions, trailing, tabs, sticky = true, padding }) => {
-    const styles = useHeaderStyles(sticky, padding);
+    const styles = useHeaderStyles(sticky, padding, !!tabs);
 
     return (
       <div css={styles.root} data-test-subj="appHeader">
diff --git a/src/core/packages/chrome/app-header/src/app_header/title_area.tsx b/src/core/packages/chrome/app-header/src/app_header/title_area.tsx
index 744ff3210995f..4450276c10fa3 100644
--- a/src/core/packages/chrome/app-header/src/app_header/title_area.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/title_area.tsx
@@ -49,7 +49,7 @@ export const TitleArea = React.memo<TitleAreaProps>(({ title, back }) => {
     <div css={styles.wrapper}>
       {hasBack && <BackButton targets={backTargets} />}
       {title && (
-        <EuiTitle size="xs" css={!hasBack ? styles.titleOffset : undefined}>
+        <EuiTitle size="s" css={!hasBack ? styles.titleOffset : undefined}>
           <h1 className="eui-textTruncate">{title}</h1>
         </EuiTitle>
       )}

From 6c0e45b74fe7ed27755aa1402c62a30d9b4f8e90 Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Fri, 8 May 2026 12:05:20 +0200
Subject: [PATCH 61/77] Revert: Override chrome next feature flag for testing
 purposes

---
 src/core/packages/chrome/feature-flags/index.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/core/packages/chrome/feature-flags/index.ts b/src/core/packages/chrome/feature-flags/index.ts
index f3c46b69a1e69..fe4fbb3f5dc36 100644
--- a/src/core/packages/chrome/feature-flags/index.ts
+++ b/src/core/packages/chrome/feature-flags/index.ts
@@ -25,9 +25,7 @@ export const isNextChrome = (featureFlags: FeatureFlagsBooleanReader): boolean =
   } catch {
     // sessionStorage may be unavailable
   }
-  // return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
-  // TODO: Remove this after integration branch manual testing is done
-  return true;
+  return featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
 };
 
 export const toggleNextChrome = (featureFlags: FeatureFlagsBooleanReader): void => {

From dd89c65aa0285d93b42b943cbc088e82293f82f4 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 11 May 2026 12:21:09 +0200
Subject: [PATCH 62/77] fix merge - remove delay=long

---
 .../packages/chrome/app-header/src/app_header/back_button.tsx | 4 ++--
 .../chrome/app-header/src/app_header/title_actions.tsx        | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/back_button.tsx b/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
index 85f1498e15c88..cfc60933ae0af 100644
--- a/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
@@ -82,7 +82,7 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
       <EuiPopover
         aria-label={tooltip}
         button={
-          <EuiToolTip content={tooltip} delay="long">
+          <EuiToolTip content={tooltip}>
             {buttonIcon}
           </EuiToolTip>
         }
@@ -109,7 +109,7 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
   }
 
   return (
-    <EuiToolTip content={tooltip} delay="long">
+    <EuiToolTip content={tooltip}>
       {buttonIcon}
     </EuiToolTip>
   );
diff --git a/src/core/packages/chrome/app-header/src/app_header/title_actions.tsx b/src/core/packages/chrome/app-header/src/app_header/title_actions.tsx
index 4215f0ef0aafc..52ae127d83eb0 100644
--- a/src/core/packages/chrome/app-header/src/app_header/title_actions.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/title_actions.tsx
@@ -70,7 +70,6 @@ export const TitleActions = React.memo<TitleActionsProps>(({ shareAction, favori
         <EuiToolTip
           content={shareTooltipContent}
           title={shareAction.tooltipTitle}
-          delay="long"
           {...(!hasCustomTooltip && { disableScreenReaderOutput: true })}
         >
           <EuiButtonIcon

From 10a8bb8199df29d25ee172d571e968d789faf9b1 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 12 May 2026 10:59:30 +0200
Subject: [PATCH 63/77] keep increased limit

---
 packages/kbn-optimizer/limits.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index 4e66bfe8dde43..6b956334a4988 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -44,7 +44,7 @@ pageLoadAssetSize:
   dataViewManagement: 6250
   dataViews: 66000
   dataVisualizer: 32727
-  developerToolbar: 5000
+  developerToolbar: 15000
   devTools: 8109
   discover: 30501
   discoverEnhanced: 5353

From 6c07ac5f38c2571977ba3a2d127b2b17c472ff8e Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 12 May 2026 11:03:04 +0200
Subject: [PATCH 64/77] temp disable tests

---
 .buildkite/pipelines/pull_request/base.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.buildkite/pipelines/pull_request/base.yml b/.buildkite/pipelines/pull_request/base.yml
index 4c7cb250cb796..f652b1cd61501 100644
--- a/.buildkite/pipelines/pull_request/base.yml
+++ b/.buildkite/pipelines/pull_request/base.yml
@@ -166,6 +166,8 @@ steps:
 
   - command: .buildkite/scripts/steps/test/pick_test_group_run_order.sh
     label: 'Pick Test Group Run Order'
+    # Temporary: disable CI test fanout on this branch.
+    if: "false"
     key: pick_test_group_run_order
     agents:
       machineType: n2-standard-2
@@ -183,6 +185,8 @@ steps:
 
   - command: .buildkite/scripts/steps/test/scout/test_run_builder.sh
     label: 'Scout Test Run Builder'
+    # Temporary: disable CI test fanout on this branch.
+    if: "false"
     agents:
       machineType: n2d-standard-8
     key: build_scout_tests

From 9db97225212b8dbaf8957f9786d3f6c05a052849 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 12 May 2026 11:13:58 +0200
Subject: [PATCH 65/77] enable chrome next by default

---
 src/core/packages/chrome/feature-flags/index.ts                 | 2 +-
 src/platform/plugins/shared/developer_toolbar/public/plugin.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/packages/chrome/feature-flags/index.ts b/src/core/packages/chrome/feature-flags/index.ts
index 1692876d53d4c..e4063f5bc4dd6 100644
--- a/src/core/packages/chrome/feature-flags/index.ts
+++ b/src/core/packages/chrome/feature-flags/index.ts
@@ -15,7 +15,7 @@ export const NEXT_CHROME_SESSION_STORAGE_KEY = 'dev.core.chrome.next';
 type FeatureFlagsBooleanReader = Pick<FeatureFlagsStart, 'getBooleanValue'>;
 
 const isNextChromeFeatureFlagEnabled = (featureFlags: FeatureFlagsBooleanReader): boolean =>
-  featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false);
+  featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, true);
 
 export const isNextChrome = (featureFlags: FeatureFlagsBooleanReader): boolean => {
   if (!isNextChromeFeatureFlagEnabled(featureFlags)) {
diff --git a/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx b/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx
index 79c611ca97699..2756a7e36c61e 100755
--- a/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx
+++ b/src/platform/plugins/shared/developer_toolbar/public/plugin.tsx
@@ -60,7 +60,7 @@ export class DeveloperToolbarPlugin
       ),
     });
 
-    if (core.featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, false)) {
+    if (core.featureFlags.getBooleanValue(NEXT_CHROME_FEATURE_FLAG_KEY, true)) {
       import('@kbn/core-chrome-feature-flags/chrome_next_toggle').then(({ ChromeNextToggle }) => {
         this.registerItem({
           id: 'Chrome Next',

From 71d43cc228ba37c9cc2f2a25b55af9555eb39303 Mon Sep 17 00:00:00 2001
From: angeles-mb <angeles.martinezbarrio@elastic.co>
Date: Fri, 22 May 2026 15:34:57 +0200
Subject: [PATCH 66/77] Fix type failures

---
 .../app-header/src/app_header/back_button.tsx | 20 +++----------------
 .../chrome/browser-internal-types/index.ts    |  4 ++--
 src/core/packages/chrome/browser/index.ts     |  1 -
 src/core/packages/chrome/browser/src/index.ts |  1 -
 .../src/components/context_row.tsx            |  1 -
 .../src/components/links_list.tsx             |  3 +--
 .../src/components/views/context_menu.tsx     |  2 +-
 7 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/back_button.tsx b/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
index cfc60933ae0af..e73ab2c8151dd 100644
--- a/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/back_button.tsx
@@ -81,11 +81,7 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
     return (
       <EuiPopover
         aria-label={tooltip}
-        button={
-          <EuiToolTip content={tooltip}>
-            {buttonIcon}
-          </EuiToolTip>
-        }
+        button={<EuiToolTip content={tooltip}>{buttonIcon}</EuiToolTip>}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         panelPaddingSize="none"
@@ -93,26 +89,16 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
       >
         <EuiContextMenuPanel
           items={targets.map((target, idx) => (
-            <EuiContextMenuItem
-              key={idx}
-              href={target.backHref}
-              onClick={target.backOnClick}
-              size="s"
-            >
+            <EuiContextMenuItem key={idx} href={target.backHref} onClick={target.backOnClick}>
               {target.backDestinationLabel ?? target.backHref}
             </EuiContextMenuItem>
           ))}
-          size="s"
         />
       </EuiPopover>
     );
   }
 
-  return (
-    <EuiToolTip content={tooltip}>
-      {buttonIcon}
-    </EuiToolTip>
-  );
+  return <EuiToolTip content={tooltip}>{buttonIcon}</EuiToolTip>;
 });
 
 BackButton.displayName = 'BackButton';
diff --git a/src/core/packages/chrome/browser-internal-types/index.ts b/src/core/packages/chrome/browser-internal-types/index.ts
index a06bbcff38fb3..b49b144121ff3 100644
--- a/src/core/packages/chrome/browser-internal-types/index.ts
+++ b/src/core/packages/chrome/browser-internal-types/index.ts
@@ -20,7 +20,7 @@ import type {
   ChromeBreadcrumbsBadge,
   ChromeNext,
   ChromeNextAiButton,
-  ChromeNextGlobalSearchConfig,
+  GlobalSearchConfig,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeUserBanner,
@@ -132,7 +132,7 @@ export interface InternalChromeNext extends ChromeNext {
     get$(): Observable<ChromeNextAiButton[]>;
   };
   globalSearch: ChromeNext['globalSearch'] & {
-    get$(): Observable<ChromeNextGlobalSearchConfig | undefined>;
+    get$(): Observable<GlobalSearchConfig | undefined>;
   };
   userMenu: ChromeNext['userMenu'] & {
     get$(): Observable<ReactNode>;
diff --git a/src/core/packages/chrome/browser/index.ts b/src/core/packages/chrome/browser/index.ts
index f0f529f3c399a..1b20cb1cbe01b 100644
--- a/src/core/packages/chrome/browser/index.ts
+++ b/src/core/packages/chrome/browser/index.ts
@@ -34,7 +34,6 @@ export type {
   ChromeNavLink,
   ChromeNavLinks,
   ChromeNextAiButton,
-  ChromeNextGlobalSearchConfig,
   ChromeRecentlyAccessed,
   ChromeRecentlyAccessedHistoryItem,
   ChromeSetup,
diff --git a/src/core/packages/chrome/browser/src/index.ts b/src/core/packages/chrome/browser/src/index.ts
index 00a05cb41609c..52c5c4f0c44b7 100644
--- a/src/core/packages/chrome/browser/src/index.ts
+++ b/src/core/packages/chrome/browser/src/index.ts
@@ -37,7 +37,6 @@ export type {
   AppHeaderTab,
   ChromeNext,
   ChromeNextAiButton,
-  ChromeNextGlobalSearchConfig,
 } from './chrome_next';
 
 export type {
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx b/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx
index 99ff378d2dcf8..458b186041920 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/context_row.tsx
@@ -71,7 +71,6 @@ export const ContextRow = ({ row, onClick }: ContextRowProps) => {
       isDisabled={row.disabled}
       aria-label={row.ariaLabel}
       data-test-subj={row['data-test-subj']}
-      size="s"
       color="text"
     />
   );
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx b/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx
index 66be2b6b93689..de274966ca7cc 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/links_list.tsx
@@ -30,7 +30,7 @@ export const LinksList = ({ items }: LinksListProps) => {
   `;
 
   return (
-    <EuiListGroup gutterSize="none" flush>
+    <EuiListGroup>
       {items.map((item) => (
         <EuiListGroupItem
           css={itemCss}
@@ -41,7 +41,6 @@ export const LinksList = ({ items }: LinksListProps) => {
           external={item.external}
           isDisabled={item.disabled}
           iconType={item.iconType}
-          size="s"
           color="text"
           data-test-subj={item['data-test-subj']}
         />
diff --git a/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx b/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx
index c8b577b8cc2f4..be7fb27a7ed20 100644
--- a/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx
+++ b/src/platform/packages/shared/context-switcher-components/src/components/views/context_menu.tsx
@@ -36,7 +36,7 @@ export const ContextMenuView = ({
 }: ContextMenuViewProps) => {
   return (
     <>
-      <EuiListGroup gutterSize="none" flush>
+      <EuiListGroup>
         <ContextRow row={environmentRow} onClick={onClickEnvironmentRow} />
         <ContextRow row={spacesRow} onClick={onClickSpacesRow} />
       </EuiListGroup>

From a06c2b7dd2645912fa899380da0f11baaf3bdcef Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Tue, 26 May 2026 11:38:34 +0200
Subject: [PATCH 67/77] [Do Not Review] [Chrome Next] Update badges overflow
 (#270740)

## Summary

This PR updates the badges overflow logic to match the design.

**3 badges:**
<img width="470" height="77" alt="Screenshot 2026-05-22 at 19 12 41"
src="https://github.com/user-attachments/assets/0bf554d9-bab3-4158-b86c-81a437f0c5fe"
/>

**4 or more badges:**
<img width="424" height="82" alt="Screenshot 2026-05-22 at 19 12 45"
src="https://github.com/user-attachments/assets/2dc2087c-5feb-4a79-9a87-e233ef932a01"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../src/app_header/app_badge.stories.tsx      | 27 +++++++++++++++++--
 .../app-header/src/app_header/app_badges.tsx  |  6 +++--
 .../app-header/src/app_header/app_header.tsx  |  2 +-
 .../src/chrome_next/index.ts                  |  6 ++++-
 .../shared/management/public/plugin.tsx       |  4 +--
 5 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx b/src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx
index a91f137718e41..9ed436dde6534 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx
@@ -24,6 +24,7 @@ import type { AppHeaderBadge } from '../types';
 import { AppBadge } from './app_badge';
 
 const MAX_VISIBLE_BADGES = 2;
+const OVERFLOW_THRESHOLD = 3;
 
 interface AppBadgeStoryProps {
   title: string;
@@ -32,8 +33,9 @@ interface AppBadgeStoryProps {
 
 const HeaderWithBadges = ({ title, badges }: AppBadgeStoryProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const visibleBadges = badges.slice(0, MAX_VISIBLE_BADGES);
-  const overflowBadges = badges.slice(MAX_VISIBLE_BADGES);
+  const shouldOverflow = badges.length > OVERFLOW_THRESHOLD;
+  const visibleBadges = shouldOverflow ? badges.slice(0, MAX_VISIBLE_BADGES) : badges;
+  const overflowBadges = shouldOverflow ? badges.slice(MAX_VISIBLE_BADGES) : [];
 
   return (
     <EuiHeader>
@@ -157,3 +159,24 @@ export const Badges: Story = {
     ],
   },
 };
+
+export const ThreeBadges: Story = {
+  name: 'Three badges',
+  args: {
+    title: '[Logs] Web Traffic',
+    badges: [
+      { label: 'Beta' },
+      {
+        label: 'Tech Preview',
+        color: 'warning',
+        tooltip: 'This feature is in tech preview and may change.',
+      },
+      {
+        label: 'Managed',
+        color: 'primary',
+        onClick: action('managed-clicked'),
+        onClickAriaLabel: 'Click to view managed details',
+      },
+    ],
+  },
+};
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_badges.tsx b/src/core/packages/chrome/app-header/src/app_header/app_badges.tsx
index 84019a9d49de1..a4cad450e77fa 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_badges.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_badges.tsx
@@ -16,6 +16,7 @@ import { AppBadge } from './app_badge';
 import { useResolvedBadges } from './hooks';
 
 const MAX_VISIBLE_BADGES = 2;
+const OVERFLOW_THRESHOLD = 3;
 
 const useBadgesStyle = () => {
   const { euiTheme } = useEuiTheme();
@@ -46,8 +47,9 @@ export const AppBadges = memo<AppBadgesProps>(({ badges: propBadges }) => {
     return null;
   }
 
-  const visibleBadges = badges.slice(0, MAX_VISIBLE_BADGES);
-  const overflowBadges = badges.slice(MAX_VISIBLE_BADGES);
+  const shouldOverflow = badges.length > OVERFLOW_THRESHOLD;
+  const visibleBadges = shouldOverflow ? badges.slice(0, MAX_VISIBLE_BADGES) : badges;
+  const overflowBadges = shouldOverflow ? badges.slice(MAX_VISIBLE_BADGES) : [];
 
   const handleClosePopover = () => {
     setIsPopoverOpen(false);
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
index c9181d00575cf..75f5de90ab9cc 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
@@ -56,7 +56,7 @@ export const AppHeaderView = React.memo<AppHeaderViewProps>(
         badges={<AppBadges badges={badges} />}
         titleActions={<TitleActions shareAction={shareAction} favorite={favorite} />}
         trailing={<AppMenu menu={menu} hasExplicitShare={!!onShare} docLink={docLink} />}
-        tabs={tabs?.length ? <AppTabs tabs={tabs} /> : undefined} 
+        tabs={tabs?.length ? <AppTabs tabs={tabs} /> : undefined}
         sticky={sticky}
         padding={padding}
       />
diff --git a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
index 1beb87c64a076..453b39daa3b08 100644
--- a/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
+++ b/src/core/packages/chrome/browser-components/src/chrome_next/index.ts
@@ -7,5 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ChromeNextGlobalHeader, ChromeNextGlobalHeaderShell, HeaderActionButton } from './global_header';
+export {
+  ChromeNextGlobalHeader,
+  ChromeNextGlobalHeaderShell,
+  HeaderActionButton,
+} from './global_header';
 export type { ChromeNextGlobalHeaderShellProps, HeaderActionButtonProps } from './global_header';
diff --git a/src/platform/plugins/shared/management/public/plugin.tsx b/src/platform/plugins/shared/management/public/plugin.tsx
index d8792b9cce8a7..d9fd1fdece15b 100644
--- a/src/platform/plugins/shared/management/public/plugin.tsx
+++ b/src/platform/plugins/shared/management/public/plugin.tsx
@@ -174,9 +174,9 @@ export class ManagementPlugin
                 // Project chrome (solution spaces): the navigation tree provides "Stack Management > App".
                 // Management apps provide breadcrumbs as [Stack Management, App, ...details].
                 // We drop the first two and append the rest to the nav tree path.
-                const [, , ...trailingBreadcrumbs] = newBreadcrumbs;
+                const [, , ...projectTrailingBreadcrumbs] = newBreadcrumbs;
                 coreStart.chrome.setBreadcrumbs([], {
-                  project: { value: trailingBreadcrumbs },
+                  project: { value: projectTrailingBreadcrumbs },
                 });
               } else {
                 // Classic chrome: use full breadcrumb trail as-is

From 8fabc4620856ec0ccaeb4768a08829396e8e545b Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Tue, 26 May 2026 14:05:25 +0200
Subject: [PATCH 68/77] [Do Not Review] [Chrome Next] Migrate workflows
 (#270882)

## Summary

This PR:
- adds "Add integrations" static item to app menu
- migrates workflows and workflows details page to chrome next page
header

Workflows:
<img width="1407" height="431" alt="Screenshot 2026-05-24 at 00 39 51"
src="https://github.com/user-attachments/assets/6977e794-3b2d-4363-915b-88033178a7c9"
/>

Workflows details:
<img width="1411" height="497" alt="Screenshot 2026-05-24 at 00 40 21"
src="https://github.com/user-attachments/assets/57adcd07-9137-4eaf-b782-81f22af3038b"
/>

Closes: https://github.com/elastic/kibana-team/issues/3427

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../app-header/src/app_header/app_header.tsx  |  24 +-
 .../app-header/src/app_header/app_menu.tsx    |  38 +-
 .../app_header/hooks/use_app_header_menu.ts   |  39 +-
 .../src/app_header_with_fallback.tsx          |  10 +
 .../packages/chrome/browser-hooks/index.ts    |   1 +
 .../browser-hooks/use_is_next_chrome.ts       |  18 +
 .../shared/workflows_management/moon.yml      |   7 +-
 .../public/application.tsx                    |   7 +-
 .../ui/workflow_detail_header.tsx             | 480 ++++++++++++------
 .../public/pages/workflows/index.tsx          | 116 +++--
 .../ui/workflow_yaml_editor.tsx               |  13 +-
 .../shared/workflows_management/tsconfig.json |   9 +-
 12 files changed, 523 insertions(+), 239 deletions(-)
 create mode 100644 src/core/packages/chrome/browser-hooks/use_is_next_chrome.ts

diff --git a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
index 75f5de90ab9cc..bb20080cd6794 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_header.tsx
@@ -32,10 +32,23 @@ export interface AppHeaderViewProps {
   sticky?: boolean;
   padding?: AppHeaderPadding;
   docLink?: string;
+  showAddIntegrations?: boolean;
 }
 
 export const AppHeaderView = React.memo<AppHeaderViewProps>(
-  ({ title, back, tabs, badges, menu, onShare, favorite, sticky, padding, docLink }) => {
+  ({
+    title,
+    back,
+    tabs,
+    badges,
+    menu,
+    onShare,
+    favorite,
+    sticky,
+    padding,
+    docLink,
+    showAddIntegrations,
+  }) => {
     const hasLegacyActionMenu = useHasLegacyActionMenu();
     const shareAction = useShareAction(menu, onShare);
     const show =
@@ -55,7 +68,14 @@ export const AppHeaderView = React.memo<AppHeaderViewProps>(
         title={<TitleArea title={title} back={back} />}
         badges={<AppBadges badges={badges} />}
         titleActions={<TitleActions shareAction={shareAction} favorite={favorite} />}
-        trailing={<AppMenu menu={menu} hasExplicitShare={!!onShare} docLink={docLink} />}
+        trailing={
+          <AppMenu
+            menu={menu}
+            hasExplicitShare={!!onShare}
+            docLink={docLink}
+            showAddIntegrations={showAddIntegrations}
+          />
+        }
         tabs={tabs?.length ? <AppTabs tabs={tabs} /> : undefined}
         sticky={sticky}
         padding={padding}
diff --git a/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
index 9ae663ec0e9e3..e0dfc777eab07 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
@@ -22,25 +22,33 @@ export interface AppMenuProps {
   menu?: AppMenuConfig;
   hasExplicitShare?: boolean;
   docLink?: string;
+  showAddIntegrations?: boolean;
 }
 
-export const AppMenu = React.memo<AppMenuProps>(({ menu, hasExplicitShare, docLink }) => {
-  const { config, staticItems } = useAppHeaderMenu(menu, !!hasExplicitShare, docLink);
-  const hasLegacyActionMenu = useHasLegacyActionMenu();
-
-  if (config || staticItems?.length) {
-    return (
-      <Suspense>
-        <AppMenuComponent config={config} staticItems={staticItems} />
-      </Suspense>
+export const AppMenu = React.memo<AppMenuProps>(
+  ({ menu, hasExplicitShare, docLink, showAddIntegrations }) => {
+    const { config, staticItems } = useAppHeaderMenu(
+      menu,
+      !!hasExplicitShare,
+      docLink,
+      showAddIntegrations
     );
-  }
+    const hasLegacyActionMenu = useHasLegacyActionMenu();
 
-  if (hasLegacyActionMenu) {
-    return <LegacyHeaderActionMenu />;
-  }
+    if (config || staticItems?.length) {
+      return (
+        <Suspense>
+          <AppMenuComponent config={config} staticItems={staticItems} />
+        </Suspense>
+      );
+    }
 
-  return null;
-});
+    if (hasLegacyActionMenu) {
+      return <LegacyHeaderActionMenu />;
+    }
+
+    return null;
+  }
+);
 
 AppMenu.displayName = 'AppMenu';
diff --git a/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
index a4540fe4336b8..35916331ec1bd 100644
--- a/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
+++ b/src/core/packages/chrome/app-header/src/app_header/hooks/use_app_header_menu.ts
@@ -18,6 +18,18 @@ import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { useObservable } from '@kbn/use-observable';
 import { i18n } from '@kbn/i18n';
 
+import { useBasePath } from './chrome';
+
+const createIntegrationsMenuItem = (href: string): AppMenuStaticItem => ({
+  label: i18n.translate('core.chrome.appHeader.addIntegrationsMenuItemLabel', {
+    defaultMessage: 'Add integrations',
+  }),
+  id: 'addIntegrations',
+  iconType: 'indexOpen',
+  order: 0,
+  href,
+});
+
 const createFeedbackMenuItem = (feedbackHandler: () => void): AppMenuStaticItem => ({
   label: i18n.translate('core.chrome.appHeader.feedbackMenuItemLabel', {
     defaultMessage: 'Feedback',
@@ -45,8 +57,15 @@ interface ResolvedAppMenu {
   shareItem: AppMenuItemType | undefined;
 }
 
-const useStaticItems = (explicitDocLink?: string) => {
+const useStaticItems = ({
+  docLink: explicitDocLink,
+  showAddIntegrations,
+}: {
+  docLink?: string;
+  showAddIntegrations?: boolean;
+}) => {
   const chrome = useChromeService();
+  const basePath = useBasePath();
   const feedbackHandler = useObservable(chrome.getFeedbackHandler$(), undefined);
   const documentationLink = useObservable(chrome.getAppDocumentationLink$(), undefined);
   const helpExtension = useObservable(chrome.getHelpExtension$(), undefined);
@@ -70,8 +89,19 @@ const useStaticItems = (explicitDocLink?: string) => {
       staticItems.push(createDocumentationMenuItem(docLink));
     }
 
+    if (showAddIntegrations) {
+      staticItems.push(createIntegrationsMenuItem(basePath.prepend('/app/integrations/browse')));
+    }
+
     return staticItems;
-  }, [feedbackHandler, explicitDocLink, documentationLink, helpExtension]);
+  }, [
+    feedbackHandler,
+    basePath,
+    explicitDocLink,
+    documentationLink,
+    helpExtension,
+    showAddIntegrations,
+  ]);
 };
 
 const useResolvedAppMenu = (
@@ -97,13 +127,14 @@ const useResolvedAppMenu = (
 export function useAppHeaderMenu(
   pageAppMenu: AppMenuConfig | undefined,
   hasExplicitShare: boolean,
-  docLink?: string
+  docLink?: string,
+  showAddIntegrations?: boolean
 ): {
   config: AppMenuConfig | undefined;
   staticItems: AppMenuStaticItem[];
 } {
   const { menu } = useResolvedAppMenu(pageAppMenu, hasExplicitShare);
-  const staticItems = useStaticItems(docLink);
+  const staticItems = useStaticItems({ docLink, showAddIntegrations });
 
   return {
     config: menu,
diff --git a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
index 2990ca857ff08..90c719030c14a 100644
--- a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
@@ -43,12 +43,21 @@ export const AppHeaderWithFallback: FC<AppHeaderWithFallbackProps> = ({
   sticky,
   padding,
   docLink,
+  showAddIntegrations,
 }) => {
   const chrome = useChromeService();
 
   if (!chrome.next.isEnabled) {
     if (fallback === null) return null;
     const { pageTitle: classicPageTitle, tabs: classicTabs, ...classicRest } = fallback ?? {};
+
+    // When pageTitle is explicitly null, skip the automatic title fallback.
+    // This enables "children mode" where EuiPageHeaderSection components
+    // can be passed as children for custom multi-section layouts.
+    if (classicPageTitle === null) {
+      return <EuiPageHeader {...classicRest} tabs={classicTabs ?? mapTabsForClassic(tabs)} />;
+    }
+
     return (
       <EuiPageHeader
         {...classicRest}
@@ -74,6 +83,7 @@ export const AppHeaderWithFallback: FC<AppHeaderWithFallbackProps> = ({
       sticky={sticky}
       padding={padding}
       docLink={docLink}
+      showAddIntegrations={showAddIntegrations}
     />
   );
 };
diff --git a/src/core/packages/chrome/browser-hooks/index.ts b/src/core/packages/chrome/browser-hooks/index.ts
index d5c0f8f242d87..c2e977998b815 100644
--- a/src/core/packages/chrome/browser-hooks/index.ts
+++ b/src/core/packages/chrome/browser-hooks/index.ts
@@ -10,6 +10,7 @@
 export { useChromeStyle } from './use_chrome_style';
 export { useActiveSolutionNavId } from './use_active_solution_nav_id';
 export { useIsChromeVisible } from './use_is_chrome_visible';
+export { useIsNextChrome } from './use_is_next_chrome';
 export { useSidebarWidth } from './use_sidebar_width';
 export { useSideNavCollapsed } from './use_side_nav_collapsed';
 export { useSideNavWidth } from './use_side_nav_width';
diff --git a/src/core/packages/chrome/browser-hooks/use_is_next_chrome.ts b/src/core/packages/chrome/browser-hooks/use_is_next_chrome.ts
new file mode 100644
index 0000000000000..d826fc94b693c
--- /dev/null
+++ b/src/core/packages/chrome/browser-hooks/use_is_next_chrome.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useChromeService } from '@kbn/core-chrome-browser-context';
+
+/**
+ * Returns `true` when Chrome Next is enabled.
+ */
+export function useIsNextChrome(): boolean {
+  const chrome = useChromeService();
+  return chrome.next.isEnabled;
+}
diff --git a/src/platform/plugins/shared/workflows_management/moon.yml b/src/platform/plugins/shared/workflows_management/moon.yml
index ba6baabdae779..79a24e986574f 100644
--- a/src/platform/plugins/shared/workflows_management/moon.yml
+++ b/src/platform/plugins/shared/workflows_management/moon.yml
@@ -52,9 +52,6 @@ dependsOn:
   - '@kbn/cell-actions'
   - '@kbn/ui-actions-plugin'
   - '@kbn/storybook'
-  - '@kbn/react-kibana-context-theme'
-  - '@kbn/ui-chrome-layout'
-  - '@kbn/react-kibana-context-theme'
   - '@kbn/react-field'
   - '@kbn/storage-adapter'
   - '@kbn/core-i18n-browser-mocks'
@@ -109,6 +106,10 @@ dependsOn:
   - '@kbn/inbox-common'
   - '@kbn/core-saved-objects-common'
   - '@kbn/inbox-plugin'
+  - '@kbn/app-header'
+  - '@kbn/core-chrome-app-menu-components'
+  - '@kbn/core-chrome-browser-hooks'
+  - '@kbn/ui-chrome-layout'
 tags:
   - plugin
   - prod
diff --git a/src/platform/plugins/shared/workflows_management/public/application.tsx b/src/platform/plugins/shared/workflows_management/public/application.tsx
index 4f980e042ab55..5b7eaea46bb3f 100644
--- a/src/platform/plugins/shared/workflows_management/public/application.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/application.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import type { AppMountParameters } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { QueryClientProvider } from '@kbn/react-query';
 import { WorkflowsContextProvider } from './common/context';
 import { WorkflowsRoutes } from './routes';
@@ -22,10 +21,8 @@ export const renderApp = (
   services: WorkflowsServices,
   { history, element }: AppMountParameters
 ) => {
-  const { theme } = services;
-
   ReactDOM.render(
-    <KibanaThemeProvider theme={theme}>
+    services.rendering.addContext(
       <KibanaContextProvider services={services}>
         <QueryClientProvider client={queryClient}>
           <WorkflowsContextProvider>
@@ -33,7 +30,7 @@ export const renderApp = (
           </WorkflowsContextProvider>
         </QueryClientProvider>
       </KibanaContextProvider>
-    </KibanaThemeProvider>,
+    ),
     element
   );
 
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
index 4e3f892e70a77..efc1669f94aa8 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
@@ -32,14 +32,18 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { useCallback, useMemo, useState } from 'react';
+import { selectUnit } from '@formatjs/intl-utils';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
+import type { AppHeaderBadge } from '@kbn/app-header';
+import { AppHeader as PageHeader } from '@kbn/app-header';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useWorkflowsCapabilities } from '@kbn/workflows-ui';
-import { PLUGIN_ID } from '../../../../common';
+import { PLUGIN_ID, WORKFLOWS_DOCUMENTATION_URL } from '../../../../common';
 import { useSaveYaml } from '../../../entities/workflows/model/use_save_yaml';
 import { useUpdateWorkflow } from '../../../entities/workflows/model/use_update_workflow';
 import {
@@ -72,7 +76,7 @@ export const SkipUnsavedRunConfirmationStorageKey = 'workflows:skipUnsavedRunCon
 
 const Translations = {
   runWorkflow: i18n.translate('workflows.workflowDetailHeader.runWorkflow', {
-    defaultMessage: 'Run workflow',
+    defaultMessage: 'Run',
   }),
   runWithUnsavedChangesQuestion: i18n.translate(
     'workflows.workflowDetailHeader.runWithUnsavedChangesQuestion',
@@ -172,6 +176,41 @@ export const WorkflowDetailHeader = React.memo(
 
     const [showRunConfirmation, setShowRunConfirmation] = useState(false);
     const [dontAskAgain, setDontAskAgain] = useState(false);
+    const [savedLabel, setSavedLabel] = useState<string>('');
+
+    useEffect(() => {
+      if (hasUnsavedChanges || !workflowId || !lastUpdatedAt) {
+        return;
+      }
+
+      const formatter = new Intl.RelativeTimeFormat(i18n.getLocale(), {
+        numeric: 'auto',
+        style: 'short',
+      });
+
+      const updateLabel = () => {
+        const { value, unit } = selectUnit(lastUpdatedAt);
+        if (unit === 'second') {
+          setSavedLabel(
+            i18n.translate('workflows.savedJustNow', {
+              defaultMessage: 'Saved just now',
+            })
+          );
+        } else {
+          setSavedLabel(
+            i18n.translate('workflows.savedAgo', {
+              defaultMessage: 'Saved {relativeTime}',
+              values: { relativeTime: formatter.format(value, unit) },
+            })
+          );
+        }
+      };
+
+      updateLabel();
+      const interval = setInterval(updateLabel, 30_000);
+
+      return () => clearInterval(interval);
+    }, [hasUnsavedChanges, workflowId, lastUpdatedAt]);
 
     // Combined validity: syntax must parse AND no strict validation errors AND server considers it valid.
     // workflow?.valid !== false covers the initial page load before Monaco validates.
@@ -225,164 +264,293 @@ export const WorkflowDetailHeader = React.memo(
       setShowRunConfirmation(false);
     }, []);
 
+    const badges = useMemo<AppHeaderBadge[]>(() => {
+      if (hasUnsavedChanges) {
+        return [
+          {
+            label: i18n.translate('workflows.unsavedChangesBadge', {
+              defaultMessage: 'Unsaved changes',
+            }),
+            color: 'primary',
+            'data-test-subj': 'workflowUnsavedChangesBadge',
+          },
+        ];
+      }
+      if (workflowId && savedLabel) {
+        return [
+          {
+            label: savedLabel,
+            color: 'primary',
+            'data-test-subj': 'workflowSavedChangesBadge',
+          },
+        ];
+      }
+      return [];
+    }, [hasUnsavedChanges, workflowId, savedLabel]);
+
+    const appMenu = useMemo<AppMenuConfig>(
+      () => ({
+        primaryActionItem: {
+          id: 'saveWorkflow',
+          label: i18n.translate('keepWorkflows.buttonText', {
+            defaultMessage: 'Save',
+          }),
+          iconType: 'save',
+          run: handleSaveWorkflow,
+          disableButton:
+            isExecutionsTab || !canSaveWorkflow || isLoading || isSaving || !isYamlSynced,
+          isLoading: isSaving,
+          tooltipContent: saveWorkflowTooltipContent ?? undefined,
+          testId: 'saveWorkflowHeaderButton',
+        },
+        switch: workflowId
+          ? {
+              id: 'enabledSwitch',
+              label: i18n.translate('workflows.workflowDetailHeader.enabled', {
+                defaultMessage: 'Enabled',
+              }),
+              labelProps: {},
+              checked: isEnabled,
+              onChange: (checked: boolean) => {
+                updateWorkflow({ workflow: { enabled: checked } });
+              },
+              disabled:
+                !workflowId ||
+                isLoading ||
+                !canUpdateWorkflow ||
+                !isSchemaValid ||
+                hasUnsavedChanges,
+              'data-test-subj': 'workflowEnabledSwitch',
+            }
+          : undefined,
+        items: [
+          ...(workflowId
+            ? [
+                {
+                  id: 'executions',
+                  order: 1,
+                  label: i18n.translate('workflows.workflowDetailHeader.executions', {
+                    defaultMessage: 'Executions',
+                  }),
+                  iconType: 'videoPlayer' as const,
+                  run: () => setActiveTab('executions' as WorkflowUrlStateTabType),
+                  disableButton: !canReadWorkflowExecution,
+                  tooltipContent: !canReadWorkflowExecution
+                    ? executionsTabReadExecutionDisabledTooltip
+                    : undefined,
+                  testId: 'executionsTabButton',
+                },
+              ]
+            : []),
+          {
+            id: 'runWorkflow',
+            order: 2,
+            label: Translations.runWorkflow,
+            iconType: 'play' as const,
+            overflow: true,
+            run: handleRunClickWithUnsavedCheck,
+            disableButton: isExecutionsTab || !canExecuteWorkflow || isLoading || !isSyntaxValid,
+            tooltipContent: runWorkflowTooltipContent ?? undefined,
+            testId: 'runWorkflowHeaderButton',
+          },
+        ],
+      }),
+      [
+        handleSaveWorkflow,
+        isExecutionsTab,
+        canSaveWorkflow,
+        isLoading,
+        isSaving,
+        isYamlSynced,
+        saveWorkflowTooltipContent,
+        workflowId,
+        isEnabled,
+        updateWorkflow,
+        canUpdateWorkflow,
+        isSchemaValid,
+        hasUnsavedChanges,
+        canReadWorkflowExecution,
+        setActiveTab,
+        handleRunClickWithUnsavedCheck,
+        canExecuteWorkflow,
+        isSyntaxValid,
+        runWorkflowTooltipContent,
+      ]
+    );
+
     return (
       <>
         <EuiPageTemplate offset={0} minHeight={0} grow={false} css={styles.pageTemplate}>
-          <EuiPageTemplate.Header
-            css={styles.header}
-            restrictWidth={false}
-            bottomBorder={false}
-            paddingSize="m"
-            alignItems="bottom"
-          >
-            <EuiPageHeaderSection css={styles.headerSection} data-test-subj="workflowDetailHeader">
-              <EuiButtonEmpty
-                iconType="sortLeft"
-                size="xs"
-                flush="left"
-                onClick={() => {
-                  application.navigateToApp(PLUGIN_ID);
-                }}
-                aria-label={Translations.backLink}
-              >
-                {Translations.backLink}
-              </EuiButtonEmpty>
-              <EuiFlexGroup
-                alignItems="center"
-                responsive={false}
-                gutterSize="m"
-                css={styles.titleGroup}
-              >
-                <EuiFlexItem grow={false} css={styles.titleItem}>
-                  <EuiSkeletonTitle
-                    size="m"
-                    isLoading={isLoading}
-                    contentAriaLabel={name}
-                    css={styles.skeletonTitle}
+          <PageHeader
+            title={name}
+            back={{
+              href: `/app/${PLUGIN_ID}`,
+              label: i18n.translate('workflows.workflowDetailHeader.backLink', {
+                defaultMessage: 'Back to Workflows',
+              }),
+            }}
+            badges={badges}
+            menu={appMenu}
+            docLink={WORKFLOWS_DOCUMENTATION_URL}
+            showAddIntegrations
+            fallback={{
+              pageTitle: null,
+              css: styles.header,
+              restrictWidth: false,
+              bottomBorder: false,
+              paddingSize: 'm' as const,
+              alignItems: 'bottom' as const,
+              children: (
+                <>
+                  <EuiPageHeaderSection
+                    css={styles.headerSection}
+                    data-test-subj="workflowDetailHeader"
                   >
-                    <EuiTitle size="m" css={styles.title}>
-                      <h2>{name}</h2>
-                    </EuiTitle>
-                  </EuiSkeletonTitle>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiSkeletonLoading
-                    isLoading={isLoading}
-                    loadingContent={<EuiSkeletonRectangle width="80px" height="20px" />}
-                    loadedContent={
-                      <WorkflowUnsavedChangesBadge
-                        hasChanges={hasUnsavedChanges}
-                        highlightDiff={highlightDiff}
-                        setHighlightDiff={setHighlightDiff}
-                        lastUpdatedAt={lastUpdatedAt}
-                      />
-                    }
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageHeaderSection>
-            {workflowId && (
-              <EuiPageHeaderSection
-                css={{
-                  flexBasis: '15%',
-                }}
-              >
-                <EuiFlexGroup justifyContent="center">
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonGroup
-                      buttonSize="compressed"
-                      color="primary"
-                      options={workflowDetailTabButtonOptions}
-                      idSelected={activeTab}
-                      legend="Switch between workflow and executions"
-                      type="single"
-                      hasAriaDisabled={!canReadWorkflowExecution}
-                      onChange={(id) => setActiveTab(id as WorkflowUrlStateTabType)}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiPageHeaderSection>
-            )}
-            <EuiPageHeaderSection
-              css={{
-                flexBasis: '40%',
-              }}
-            >
-              <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="m">
-                <EuiToolTip
-                  content={
-                    hasUnsavedChanges
-                      ? i18n.translate('workflows.workflowDetailHeader.unsaved', {
-                          defaultMessage: 'Save changes to enable/disable workflow',
-                        })
-                      : !isSchemaValid
-                      ? i18n.translate('workflows.workflowDetailHeader.invalid', {
-                          defaultMessage: 'Fix validation errors to enable workflow',
-                        })
-                      : undefined
-                  }
-                >
-                  <EuiSwitch
-                    disabled={
-                      !workflowId ||
-                      isLoading ||
-                      !canUpdateWorkflow ||
-                      !isSchemaValid ||
-                      hasUnsavedChanges
-                    }
-                    checked={isEnabled}
-                    onChange={handleToggleWorkflow}
-                    label={i18n.translate('workflows.workflowDetailHeader.enabled', {
-                      defaultMessage: 'Enabled',
-                    })}
-                  />
-                </EuiToolTip>
-                <EuiFlexItem grow={false} css={styles.separator} />
-                <EuiToolTip content={runWorkflowTooltipContent}>
-                  <EuiButtonIcon
-                    color="success"
-                    display="base"
-                    iconType="play"
-                    size="s"
-                    onClick={handleRunClickWithUnsavedCheck}
-                    disabled={
-                      isExecutionsTab ||
-                      !canExecuteWorkflow ||
-                      isLoading ||
-                      isSaving ||
-                      !isSyntaxValid
-                    }
-                    aria-label={Translations.runWorkflow}
-                    data-test-subj="runWorkflowHeaderButton"
-                  />
-                </EuiToolTip>
-                <EuiToolTip content={saveWorkflowTooltipContent}>
-                  <EuiButton
-                    fill
-                    color="primary"
-                    size="s"
-                    onClick={handleSaveWorkflow}
-                    disabled={
-                      isExecutionsTab ||
-                      !canSaveWorkflow ||
-                      isLoading ||
-                      isSaving ||
-                      !isYamlSynced ||
-                      !hasUnsavedChanges
-                    }
-                    isLoading={isSaving}
-                    data-test-subj="saveWorkflowHeaderButton"
+                    <EuiButtonEmpty
+                      iconType="sortLeft"
+                      size="xs"
+                      flush="left"
+                      onClick={() => {
+                        application.navigateToApp(PLUGIN_ID);
+                      }}
+                      aria-label={Translations.backLink}
+                    >
+                      {Translations.backLink}
+                    </EuiButtonEmpty>
+                    <EuiFlexGroup
+                      alignItems="center"
+                      responsive={false}
+                      gutterSize="m"
+                      css={styles.titleGroup}
+                    >
+                      <EuiFlexItem grow={false} css={styles.titleItem}>
+                        <EuiSkeletonTitle
+                          size="m"
+                          isLoading={isLoading}
+                          contentAriaLabel={name}
+                          css={styles.skeletonTitle}
+                        >
+                          <EuiTitle size="m" css={styles.title}>
+                            <h2>{name}</h2>
+                          </EuiTitle>
+                        </EuiSkeletonTitle>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiSkeletonLoading
+                          isLoading={isLoading}
+                          loadingContent={<EuiSkeletonRectangle width="80px" height="20px" />}
+                          loadedContent={
+                            <WorkflowUnsavedChangesBadge
+                              hasChanges={hasUnsavedChanges}
+                              highlightDiff={highlightDiff}
+                              setHighlightDiff={setHighlightDiff}
+                              lastUpdatedAt={lastUpdatedAt}
+                            />
+                          }
+                        />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiPageHeaderSection>
+                  {workflowId && (
+                    <EuiPageHeaderSection
+                      css={{
+                        flexBasis: '15%',
+                      }}
+                    >
+                      <EuiFlexGroup justifyContent="center">
+                        <EuiFlexItem grow={false}>
+                          <EuiButtonGroup
+                            buttonSize="compressed"
+                            color="primary"
+                            options={workflowDetailTabButtonOptions}
+                            idSelected={activeTab}
+                            legend="Switch between workflow and executions"
+                            type="single"
+                            hasAriaDisabled={!canReadWorkflowExecution}
+                            onChange={(id) => setActiveTab(id as WorkflowUrlStateTabType)}
+                          />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiPageHeaderSection>
+                  )}
+                  <EuiPageHeaderSection
+                    css={{
+                      flexBasis: '40%',
+                    }}
                   >
-                    <FormattedMessage
-                      id="keepWorkflows.buttonText"
-                      defaultMessage="Save"
-                      ignoreTag
-                    />
-                  </EuiButton>
-                </EuiToolTip>
-              </EuiFlexGroup>
-            </EuiPageHeaderSection>
-          </EuiPageTemplate.Header>
+                    <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="m">
+                      <EuiToolTip
+                        content={
+                          hasUnsavedChanges
+                            ? i18n.translate('workflows.workflowDetailHeader.unsaved', {
+                                defaultMessage: 'Save changes to enable/disable workflow',
+                              })
+                            : !isSchemaValid
+                            ? i18n.translate('workflows.workflowDetailHeader.invalid', {
+                                defaultMessage: 'Fix validation errors to enable workflow',
+                              })
+                            : undefined
+                        }
+                      >
+                        <EuiSwitch
+                          disabled={
+                            !workflowId ||
+                            isLoading ||
+                            !canUpdateWorkflow ||
+                            !isSchemaValid ||
+                            hasUnsavedChanges
+                          }
+                          checked={isEnabled}
+                          onChange={handleToggleWorkflow}
+                          label={i18n.translate('workflows.workflowDetailHeader.enabled', {
+                            defaultMessage: 'Enabled',
+                          })}
+                        />
+                      </EuiToolTip>
+                      <EuiFlexItem grow={false} css={styles.separator} />
+                      <EuiToolTip content={runWorkflowTooltipContent}>
+                        <EuiButtonIcon
+                          color="success"
+                          display="base"
+                          iconType="play"
+                          size="s"
+                          onClick={handleRunClickWithUnsavedCheck}
+                          disabled={
+                            isExecutionsTab || !canExecuteWorkflow || isLoading || !isSyntaxValid
+                          }
+                          aria-label={Translations.runWorkflow}
+                          data-test-subj="runWorkflowHeaderButton"
+                        />
+                      </EuiToolTip>
+                      <EuiToolTip content={saveWorkflowTooltipContent}>
+                        <EuiButton
+                          fill
+                          color="primary"
+                          size="s"
+                          onClick={handleSaveWorkflow}
+                          disabled={
+                            isExecutionsTab ||
+                            !canSaveWorkflow ||
+                            isLoading ||
+                            isSaving ||
+                            !isYamlSynced
+                          }
+                          isLoading={isSaving}
+                          data-test-subj="saveWorkflowHeaderButton"
+                        >
+                          <FormattedMessage
+                            id="keepWorkflows.buttonText"
+                            defaultMessage="Save"
+                            ignoreTag
+                          />
+                        </EuiButton>
+                      </EuiToolTip>
+                    </EuiFlexGroup>
+                  </EuiPageHeaderSection>
+                </>
+              ),
+            }}
+          />
         </EuiPageTemplate>
         {showRunConfirmation && (
           <EuiModal
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
index b3bb3db61b31b..b7e0640e6d621 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
@@ -13,17 +13,19 @@ import {
   EuiFilterGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageHeader,
   EuiPageTemplate,
   useEuiTheme,
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import { AppHeader as PageHeader } from '@kbn/app-header';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { WorkflowsSearchParams } from '@kbn/workflows';
 import { WORKFLOW_EXECUTION_STATS_BAR_SETTING_ID } from '@kbn/workflows/common/constants';
 import { useWorkflows, useWorkflowsCapabilities } from '@kbn/workflows-ui';
-import { PLUGIN_ID } from '../../../common';
+import { PLUGIN_ID, WORKFLOWS_DOCUMENTATION_URL } from '../../../common';
 import { useWorkflowFiltersOptions } from '../../entities/workflows/model/use_workflow_stats';
 import { ImportWorkflowsFlyout } from '../../features/import_workflows/ui/import_workflows_flyout';
 import { WorkflowExecutionStatsBar } from '../../features/workflow_executions_stats/ui';
@@ -104,6 +106,38 @@ export function WorkflowsPage() {
     false
   );
 
+  const appMenu = useMemo<AppMenuConfig>(
+    () => ({
+      primaryActionItem: canCreateWorkflow
+        ? {
+            id: 'createWorkflow',
+            label: i18n.translate('workflows.createWorkflowButton', {
+              defaultMessage: 'Create workflow',
+            }),
+            iconType: 'plus',
+            run: navigateToCreateWorkflow,
+            testId: 'createWorkflowButton',
+          }
+        : undefined,
+      items: canImportWorkflows
+        ? [
+            {
+              id: 'importWorkflows',
+              order: 1,
+              label: i18n.translate('workflows.importWorkflowsButton', {
+                defaultMessage: 'Import',
+              }),
+              iconType: 'download',
+              overflow: true,
+              run: () => setShowImportFlyout(true),
+              testId: 'importWorkflowsButton',
+            },
+          ]
+        : [],
+    }),
+    [canCreateWorkflow, canImportWorkflows, navigateToCreateWorkflow]
+  );
+
   // Check if we should show empty state
   const shouldShowEmptyState = shouldShowWorkflowsEmptyState(workflows, search);
 
@@ -113,40 +147,19 @@ export function WorkflowsPage() {
       css={{ backgroundColor: euiTheme.colors.backgroundBasePlain }}
       data-test-subj="workflowsPage"
     >
-      {/* negative margin to compensate for header's bottom padding and reduce space between header and content */}
-      <EuiPageTemplate.Header
-        bottomBorder={false}
-        css={{ marginBottom: `-${euiTheme.size.l}` }}
-        restrictWidth={false}
-      >
-        <EuiFlexGroup justifyContent={'spaceBetween'}>
-          <EuiFlexItem>
-            <EuiPageHeader
-              pageTitle={
-                <FormattedMessage id="workflows.pageTitle" defaultMessage="Workflows" ignoreTag />
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="s">
-              {canImportWorkflows ? (
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty
-                    iconType="importAction"
-                    size="m"
-                    onClick={() => setShowImportFlyout(true)}
-                    data-test-subj="importWorkflowsButton"
-                  >
-                    <FormattedMessage
-                      id="workflows.importWorkflowsButton"
-                      defaultMessage="Import"
-                      ignoreTag
-                    />
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-              ) : null}
-              {canCreateWorkflow ? (
-                <EuiFlexItem grow={false}>
+      <PageHeader
+        title={i18n.translate('workflows.pageTitle', { defaultMessage: 'Workflows' })}
+        menu={appMenu}
+        docLink={WORKFLOWS_DOCUMENTATION_URL}
+        showAddIntegrations
+        fallback={{
+          paddingSize: 'l',
+          pageTitle: (
+            <FormattedMessage id="workflows.pageTitle" defaultMessage="Workflows" ignoreTag />
+          ),
+          rightSideItems: [
+            ...(canCreateWorkflow
+              ? [
                   <EuiButton
                     iconType="plusInCircle"
                     color="primary"
@@ -157,16 +170,31 @@ export function WorkflowsPage() {
                   >
                     <FormattedMessage
                       id="workflows.createWorkflowButton"
-                      defaultMessage="Create a new workflow"
+                      defaultMessage="Create workflow"
                       ignoreTag
                     />
-                  </EuiButton>
-                </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageTemplate.Header>
+                  </EuiButton>,
+                ]
+              : []),
+            ...(canImportWorkflows
+              ? [
+                  <EuiButtonEmpty
+                    iconType="importAction"
+                    size="m"
+                    onClick={() => setShowImportFlyout(true)}
+                    data-test-subj="importWorkflowsButton"
+                  >
+                    <FormattedMessage
+                      id="workflows.importWorkflowsButton"
+                      defaultMessage="Import"
+                      ignoreTag
+                    />
+                  </EuiButtonEmpty>,
+                ]
+              : []),
+          ],
+        }}
+      />
       <EuiPageTemplate.Section restrictWidth={false}>
         {!shouldShowEmptyState && (
           <>
diff --git a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx
index 237b26156b301..1e8b86596550b 100644
--- a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx
@@ -15,6 +15,7 @@ import type { SchemasSettings } from 'monaco-yaml';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import type YAML from 'yaml';
+import { useIsNextChrome } from '@kbn/core-chrome-browser-hooks';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { monaco, YAML_LANG_ID } from '@kbn/monaco';
@@ -742,13 +743,13 @@ export const WorkflowYAMLEditor = ({
     }
   }, [workflowJsonSchemaStrict, notifications]);
 
+  const isNextChrome = useIsNextChrome();
+
   const extraActions = useMemo<ExtraAction[]>(
     () => [
-      {
-        id: 'documentation',
-        content: <DocumentationLink />,
-        showInReadOnly: true,
-      },
+      ...(!isNextChrome
+        ? [{ id: 'documentation', content: <DocumentationLink />, showInReadOnly: true }]
+        : []),
       {
         id: 'actions-menu',
         content: <ActionsMenuButton onClick={openActionsPopover} />,
@@ -765,7 +766,7 @@ export const WorkflowYAMLEditor = ({
         showInReadOnly: true,
       },
     ],
-    [openActionsPopover, editorRef]
+    [openActionsPopover, editorRef, isNextChrome]
   );
 
   // These were triggering rerendering of the actions containers on every scroll, because they were
diff --git a/src/platform/plugins/shared/workflows_management/tsconfig.json b/src/platform/plugins/shared/workflows_management/tsconfig.json
index eec41d09f5e47..c59d6c18fbf14 100644
--- a/src/platform/plugins/shared/workflows_management/tsconfig.json
+++ b/src/platform/plugins/shared/workflows_management/tsconfig.json
@@ -50,9 +50,6 @@
     "@kbn/cell-actions",
     "@kbn/ui-actions-plugin",
     "@kbn/storybook",
-    "@kbn/react-kibana-context-theme",
-    "@kbn/ui-chrome-layout",
-    "@kbn/react-kibana-context-theme",
     "@kbn/react-field",
     "@kbn/storage-adapter",
     "@kbn/core-i18n-browser-mocks",
@@ -106,7 +103,11 @@
     "@kbn/datemath",
     "@kbn/inbox-common",
     "@kbn/core-saved-objects-common",
-    "@kbn/inbox-plugin"
+    "@kbn/inbox-plugin",
+    "@kbn/app-header",
+    "@kbn/core-chrome-app-menu-components",
+    "@kbn/core-chrome-browser-hooks",
+    "@kbn/ui-chrome-layout",
   ],
   "exclude": ["target/**/*"]
 }

From 074c282a7fcfbd43330e961dfafc80e70a615d4d Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 26 May 2026 15:04:36 +0200
Subject: [PATCH 69/77] [FeatureBranch/DoNotReview] Migrate Streams headers to
 Chrome Next (#270633)

Part of elastic/kibana-team#3346
Related: elastic/kibana#267691

## Summary

Migrates the Streams listing page and the main classic/wired stream
detail header to the Chrome Next app header while keeping classic
fallback rendering in place. The migration uses semantic app menu
primary actions for the visually primary buttons, preserves the existing
classic fallback layout with `rightSideItems`, and keeps
Streams-specific header defaults centralized in `StreamsAppHeader`.

During the migration we had to work through a few header API
differences: EUI fallback actions need explicit `rightSideItems`
ordering, Chrome Next tabs only support string labels, and several
Streams detail badges are richer React components rather than plain
badge config. The final implementation keeps those richer badges through
`renderCustomBadge` and keeps tab tooltip/tour wrappers in fallback
only.

Left for follow-up: query stream detail headers,
missing/no-privilege/pending detail-state headers, Chrome Next parity
for tab tooltips/tour anchors if the app-header API grows support for
richer tab labels, and listing-page description parity if product wants
that text visible in Chrome Next.

### Streams List

#### before

<img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 04 59"
src="https://github.com/user-attachments/assets/7f9924d4-1f5c-44c2-b4d1-74090f00b5ff"
/>


#### after

<img width="1962" height="1119" alt="Screenshot 2026-05-22 at 16 58 45"
src="https://github.com/user-attachments/assets/b825e037-d447-4496-b002-9139991a1b27"
/>

### Stream Details

#### before

<img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 08"
src="https://github.com/user-attachments/assets/43db98d3-14be-4f35-883a-46cb5dd96ad6"
/>


#### after

<img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 16"
src="https://github.com/user-attachments/assets/1e351ef4-7264-41cc-ab7d-a015f60554ec"
/>



### Not migrated:


<img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 26"
src="https://github.com/user-attachments/assets/3b1354e1-321e-44c2-8fc0-3e9fda0d655c"
/>

<img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 32"
src="https://github.com/user-attachments/assets/098eb510-6ca1-4d20-8f00-32af3007bc87"
/>
---
 .../create_query_stream_flyout.tsx            |   2 +-
 .../public/components/stream_badges/index.tsx |  44 +--
 .../components/stream_list_view/index.tsx     | 259 ++++++++++++------
 .../stream_detail_management/classic.tsx      |  32 ++-
 .../stream_detail_management/query.tsx        |  16 +-
 .../stream_detail_management/wired.tsx        |  21 +-
 .../stream_detail_management/wrapper.tsx      | 208 +++++++++-----
 .../streams_app_page_template/index.tsx       |  29 +-
 .../plugins/shared/streams_app/tsconfig.json  |   1 +
 9 files changed, 411 insertions(+), 201 deletions(-)

diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/query_streams/create_query_stream_flyout.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/query_streams/create_query_stream_flyout.tsx
index 8e5a22a9003d5..73550acaebc95 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/query_streams/create_query_stream_flyout.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/query_streams/create_query_stream_flyout.tsx
@@ -41,7 +41,7 @@ export function CreateQueryStreamFlyout({ onQueryStreamCreated }: CreateQueryStr
   );
 }
 
-const CreateQueryStreamFlyoutContent = ({
+export const CreateQueryStreamFlyoutContent = ({
   onClose,
   onQueryStreamCreated,
 }: {
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx
index 7d5fcfe34e360..384be38e0f602 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx
@@ -233,7 +233,6 @@ export function LifecycleBadge({
 
 interface DiscoverBadgeButtonBaseProps {
   hasDataStream?: boolean;
-  spellOut?: boolean;
 }
 
 interface DiscoverBadgeButtonIngestProps extends DiscoverBadgeButtonBaseProps {
@@ -246,27 +245,29 @@ interface DiscoverBadgeButtonQueryProps extends DiscoverBadgeButtonBaseProps {
   indexMode?: never;
 }
 
-type DiscoverBadgeButtonProps = DiscoverBadgeButtonIngestProps | DiscoverBadgeButtonQueryProps;
+type DiscoverLinkProps = DiscoverBadgeButtonIngestProps | DiscoverBadgeButtonQueryProps;
+
+type DiscoverBadgeButtonProps = DiscoverLinkProps & {
+  spellOut?: boolean;
+};
 
-export function DiscoverBadgeButton({
-  stream,
-  hasDataStream = false,
-  spellOut = false,
-  indexMode,
-}: DiscoverBadgeButtonProps) {
+export function useDiscoverLink(props?: DiscoverLinkProps) {
   const {
     dependencies: {
       start: { share },
     },
   } = useKibana();
-  const isIngestStream = !Streams.QueryStream.Definition.is(stream);
   const { features } = useStreamsPrivileges();
-  const esqlQuery = getDiscoverEsqlQuery({
-    definition: stream,
-    indexMode: isIngestStream ? indexMode : undefined,
-    includeMetadata: Streams.WiredStream.Definition.is(stream),
-    useViews: features.wiredStreamViews.enabled,
-  });
+  const stream = props?.stream;
+  const isIngestStream = stream ? !Streams.QueryStream.Definition.is(stream) : false;
+  const esqlQuery = stream
+    ? getDiscoverEsqlQuery({
+        definition: stream,
+        indexMode: isIngestStream ? props.indexMode : undefined,
+        includeMetadata: Streams.WiredStream.Definition.is(stream),
+        useViews: features.wiredStreamViews.enabled,
+      })
+    : undefined;
   const useUrl = share.url.locators.useUrl;
 
   const discoverLink = useUrl<DiscoverAppLocatorParams>(
@@ -279,7 +280,18 @@ export function DiscoverBadgeButton({
     [esqlQuery]
   );
 
-  if (!discoverLink || !hasDataStream || !esqlQuery) {
+  if (!discoverLink || !props?.hasDataStream || !esqlQuery) {
+    return undefined;
+  }
+
+  return discoverLink;
+}
+
+export function DiscoverBadgeButton({ spellOut = false, ...linkProps }: DiscoverBadgeButtonProps) {
+  const { stream } = linkProps;
+  const discoverLink = useDiscoverLink(linkProps);
+
+  if (!discoverLink) {
     return null;
   }
 
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx
index c25ec3718a268..549f73a46472e 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx
@@ -9,13 +9,10 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiEmptyPrompt,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiLink,
   EuiLoadingElastic,
-  useEuiTheme,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
+import type { AppHeaderMenu } from '@kbn/app-header';
 import { usePerformanceContext } from '@kbn/ebt-tools';
 import { i18n } from '@kbn/i18n';
 import { Streams } from '@kbn/streams-schema';
@@ -27,18 +24,20 @@ import { useStreamsAppFetch } from '../../hooks/use_streams_app_fetch';
 import { useStreamsAppRouter } from '../../hooks/use_streams_app_router';
 import { useStreamsPrivileges } from '../../hooks/use_streams_privileges';
 import { useTimefilter } from '../../hooks/use_timefilter';
-import { StreamsAppPageTemplate } from '../streams_app_page_template';
+import { StreamsAppHeader, StreamsAppPageTemplate } from '../streams_app_page_template';
 import { WelcomeTourCallout } from '../streams_tour';
 import { ClassicStreamCreationFlyout } from './classic_stream_creation_flyout';
 import { StreamsListEmptyPrompt } from './streams_list_empty_prompt';
 import { StreamsSettingsFlyout } from './streams_settings_flyout';
 import { StreamsTreeTable } from './tree_table';
 import { LegacyLogsDeprecationCallout } from './legacy_logs_deprecation_callout';
-import { CreateQueryStreamFlyout } from '../query_streams/create_query_stream_flyout';
+import {
+  CreateQueryStreamFlyout,
+  CreateQueryStreamFlyoutContent,
+} from '../query_streams/create_query_stream_flyout';
 import { getFormattedError } from '../../util/errors';
 
 export function StreamListView() {
-  const { euiTheme } = useEuiTheme();
   const context = useKibana();
   const {
     dependencies: {
@@ -147,87 +146,171 @@ export function StreamListView() {
   const [isSettingsFlyoutOpen, setIsSettingsFlyoutOpen] = React.useState(false);
   const [isClassicStreamCreationFlyoutOpen, setIsClassicStreamCreationFlyoutOpen] =
     React.useState(false);
+  const [isQueryStreamCreationFlyoutOpen, setIsQueryStreamCreationFlyoutOpen] =
+    React.useState(false);
+
+  const pageTitle = i18n.translate('xpack.streams.streamsListView.pageHeaderTitle', {
+    defaultMessage: 'Streams',
+  });
+  const settingsLabel = i18n.translate('xpack.streams.streamsListView.settingsButtonLabel', {
+    defaultMessage: 'Settings',
+  });
+  const createClassicStreamLabel = i18n.translate(
+    'xpack.streams.streamsListView.createClassicStreamButtonLabel',
+    {
+      defaultMessage: 'Create classic stream',
+    }
+  );
+  const significantEventsLabel = i18n.translate(
+    'xpack.streams.streamsListView.sigEventsDiscoveryButtonLabel',
+    {
+      defaultMessage: 'Significant Events',
+    }
+  );
+  const createQueryStreamLabel = i18n.translate(
+    'xpack.streams.streamsListView.createQueryStreamButtonLabel',
+    {
+      defaultMessage: 'Create Query stream',
+    }
+  );
+  const pageDescription = i18n.translate('xpack.streams.streamsListView.pageHeaderDescription', {
+    defaultMessage:
+      'Manage how your data is ingested, structured, and retained across all your streams.',
+  });
+  const learnMoreLabel = i18n.translate(
+    'xpack.streams.streamsListView.pageHeaderDescriptionLearnMoreLink',
+    {
+      defaultMessage: 'Learn more',
+    }
+  );
+  const showSignificantEventsDiscovery =
+    significantEventsDiscovery?.available && significantEventsDiscovery.enabled;
+  const showQueryStreams = queryStreams?.enabled;
+  const significantEventsDiscoveryHref = router.link('/_discovery');
+
+  const menu = useMemo<AppHeaderMenu>(() => {
+    const items: NonNullable<AppHeaderMenu['items']> = [
+      {
+        id: 'settings',
+        order: 1,
+        label: settingsLabel,
+        iconType: 'gear',
+        run: () => setIsSettingsFlyoutOpen(true),
+      },
+    ];
+
+    if (showSignificantEventsDiscovery) {
+      items.push({
+        id: 'significantEventsDiscovery',
+        order: 2,
+        label: significantEventsLabel,
+        iconType: 'crosshairs',
+        href: significantEventsDiscoveryHref,
+        testId: 'streamsSignificantEventsDiscoveryButton',
+      });
+    }
+
+    if (showQueryStreams) {
+      items.push({
+        id: 'createClassicStream',
+        order: 3,
+        label: createClassicStreamLabel,
+        iconType: 'plus',
+        run: () => setIsClassicStreamCreationFlyoutOpen(true),
+        disableButton: !(canManageStreamsKibana && canManageClassicElasticsearch),
+      });
+    }
+
+    return {
+      primaryActionItem: showQueryStreams
+        ? {
+            id: 'createQueryStream',
+            label: createQueryStreamLabel,
+            iconType: 'plus',
+            run: () => setIsQueryStreamCreationFlyoutOpen(true),
+            testId: 'streamsAppCreateQueryStreamButton',
+          }
+        : {
+            id: 'createClassicStream',
+            label: createClassicStreamLabel,
+            iconType: 'plus',
+            run: () => setIsClassicStreamCreationFlyoutOpen(true),
+            disableButton: !(canManageStreamsKibana && canManageClassicElasticsearch),
+          },
+      items,
+    };
+  }, [
+    canManageClassicElasticsearch,
+    canManageStreamsKibana,
+    createClassicStreamLabel,
+    createQueryStreamLabel,
+    settingsLabel,
+    showQueryStreams,
+    showSignificantEventsDiscovery,
+    significantEventsDiscoveryHref,
+    significantEventsLabel,
+  ]);
+
+  const classicHeaderActions = [
+    <EuiButtonEmpty
+      key="settings"
+      iconType="gear"
+      size="s"
+      onClick={() => setIsSettingsFlyoutOpen(true)}
+      aria-label={settingsLabel}
+    >
+      {settingsLabel}
+    </EuiButtonEmpty>,
+    <EuiButton
+      key="createClassicStream"
+      onClick={() => setIsClassicStreamCreationFlyoutOpen(true)}
+      size="s"
+      disabled={!(canManageStreamsKibana && canManageClassicElasticsearch)}
+    >
+      {createClassicStreamLabel}
+    </EuiButton>,
+    ...(showSignificantEventsDiscovery
+      ? [
+          <EuiButton
+            key="significantEventsDiscovery"
+            href={significantEventsDiscoveryHref}
+            iconType="crosshairs"
+            size="s"
+            data-test-subj="streamsSignificantEventsDiscoveryButton"
+          >
+            {significantEventsLabel}
+          </EuiButton>,
+        ]
+      : []),
+    ...(showQueryStreams
+      ? [
+          <CreateQueryStreamFlyout
+            key="createQueryStream"
+            onQueryStreamCreated={streamsListFetch.refresh}
+          />,
+        ]
+      : []),
+  ];
+  const fallbackRightSideItems = [...classicHeaderActions].reverse();
 
   return (
     <>
-      <StreamsAppPageTemplate.Header
-        bottomBorder="extended"
-        css={css`
-          background: ${euiTheme.colors.backgroundBasePlain};
-        `}
-        pageTitle={
-          <EuiFlexGroup
-            justifyContent="spaceBetween"
-            gutterSize="s"
-            responsive={false}
-            alignItems="center"
-          >
-            <EuiFlexItem>
-              <EuiFlexGroup alignItems="center" gutterSize="m">
-                {i18n.translate('xpack.streams.streamsListView.pageHeaderTitle', {
-                  defaultMessage: 'Streams',
-                })}
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                iconType="gear"
-                size="s"
-                onClick={() => setIsSettingsFlyoutOpen(true)}
-                aria-label={i18n.translate('xpack.streams.streamsListView.settingsButtonLabel', {
-                  defaultMessage: 'Settings',
-                })}
-              >
-                {i18n.translate('xpack.streams.streamsListView.settingsButtonLabel', {
-                  defaultMessage: 'Settings',
-                })}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                onClick={() => setIsClassicStreamCreationFlyoutOpen(true)}
-                size="s"
-                disabled={!(canManageStreamsKibana && canManageClassicElasticsearch)}
-              >
-                {i18n.translate('xpack.streams.streamsListView.createClassicStreamButtonLabel', {
-                  defaultMessage: 'Create classic stream',
-                })}
-              </EuiButton>
-            </EuiFlexItem>
-            {significantEventsDiscovery?.available && significantEventsDiscovery.enabled && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  href={router.link('/_discovery')}
-                  iconType="crosshairs"
-                  size="s"
-                  data-test-subj="streamsSignificantEventsDiscoveryButton"
-                >
-                  {i18n.translate('xpack.streams.streamsListView.sigEventsDiscoveryButtonLabel', {
-                    defaultMessage: 'Significant Events',
-                  })}
-                </EuiButton>
-              </EuiFlexItem>
-            )}
-            {queryStreams?.enabled && (
-              <EuiFlexItem grow={false}>
-                <CreateQueryStreamFlyout onQueryStreamCreated={streamsListFetch.refresh} />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        }
-        description={
-          <>
-            {i18n.translate('xpack.streams.streamsListView.pageHeaderDescription', {
-              defaultMessage:
-                'Manage how your data is ingested, structured, and retained across all your streams.',
-            })}{' '}
-            <EuiLink href={streamsDocsLink} target="_blank">
-              {i18n.translate('xpack.streams.streamsListView.pageHeaderDescriptionLearnMoreLink', {
-                defaultMessage: 'Learn more',
-              })}
-            </EuiLink>
-          </>
-        }
+      <StreamsAppHeader
+        title={pageTitle}
+        menu={menu}
+        docLink={streamsDocsLink}
+        fallback={{
+          pageTitle,
+          rightSideItems: fallbackRightSideItems,
+          description: (
+            <>
+              {pageDescription}{' '}
+              <EuiLink href={streamsDocsLink} target="_blank">
+                {learnMoreLabel}
+              </EuiLink>
+            </>
+          ),
+        }}
       />
       <StreamsAppPageTemplate.Body grow>
         {streamsListFetch.loading && streamsListFetch.value === undefined ? (
@@ -273,6 +356,12 @@ export function StreamListView() {
       {isClassicStreamCreationFlyoutOpen && (
         <ClassicStreamCreationFlyout onClose={() => setIsClassicStreamCreationFlyoutOpen(false)} />
       )}
+      {isQueryStreamCreationFlyoutOpen && (
+        <CreateQueryStreamFlyoutContent
+          onClose={() => setIsQueryStreamCreationFlyoutOpen(false)}
+          onQueryStreamCreated={streamsListFetch.refresh}
+        />
+      )}
     </>
   );
 }
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx
index bfd450a08de5e..a9f5e3436e59e 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx
@@ -106,11 +106,15 @@ export function ClassicStreamDetailManagement({
     }),
   };
 
+  const lifecycleTabLabel = i18n.translate('xpack.streams.streamDetailView.lifecycleTab', {
+    defaultMessage: 'Data lifecycle',
+  });
   tabs.lifecycle = {
     content: (
       <StreamDetailLifecycle definition={definition} refreshDefinition={refreshDefinition} />
     ),
-    label: (
+    label: lifecycleTabLabel,
+    fallbackLabel: (
       <EuiToolTip
         content={i18n.translate('xpack.streams.managementTab.lifecycle.tooltip', {
           defaultMessage:
@@ -118,9 +122,7 @@ export function ClassicStreamDetailManagement({
         })}
       >
         <span data-test-subj="retentionTab" tabIndex={0}>
-          {i18n.translate('xpack.streams.streamDetailView.lifecycleTab', {
-            defaultMessage: 'Data lifecycle',
-          })}
+          {lifecycleTabLabel}
         </span>
       </EuiToolTip>
     ),
@@ -150,20 +152,22 @@ export function ClassicStreamDetailManagement({
     }),
   };
 
+  const dataQualityTabLabel = i18n.translate('xpack.streams.streamDetailView.qualityTab', {
+    defaultMessage: 'Data quality',
+  });
   tabs.dataQuality = {
     content: (
       <StreamDetailDataQuality definition={definition} refreshDefinition={refreshDefinition} />
     ),
-    label: (
+    label: dataQualityTabLabel,
+    fallbackLabel: (
       <EuiToolTip
         content={i18n.translate('xpack.streams.managementTab.dataQuality.tooltip', {
           defaultMessage: 'View details about this classic stream’s data quality',
         })}
       >
         <span data-test-subj="dataQualityTab" tabIndex={0}>
-          {i18n.translate('xpack.streams.streamDetailView.qualityTab', {
-            defaultMessage: 'Data quality',
-          })}
+          {dataQualityTabLabel}
         </span>
       </EuiToolTip>
     ),
@@ -181,22 +185,22 @@ export function ClassicStreamDetailManagement({
   }
 
   if (definition.privileges.manage || definition.replicated) {
+    const advancedTabLabel = i18n.translate('xpack.streams.streamDetailView.advancedTab', {
+      defaultMessage: 'Advanced',
+    });
     tabs.advanced = {
       content: (
         <ClassicAdvancedView definition={definition} refreshDefinition={refreshDefinition} />
       ),
-      label: (
+      label: advancedTabLabel,
+      fallbackLabel: (
         <EuiToolTip
           content={i18n.translate('xpack.streams.managementTab.advanced.tooltip', {
             defaultMessage:
               'View technical details about this classic stream’s underlying index setup',
           })}
         >
-          <span tabIndex={0}>
-            {i18n.translate('xpack.streams.streamDetailView.advancedTab', {
-              defaultMessage: 'Advanced',
-            })}
-          </span>
+          <span tabIndex={0}>{advancedTabLabel}</span>
         </EuiToolTip>
       ),
     };
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx
index 6fa43b8307dba..b3aaa62d49e1c 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx
@@ -96,21 +96,21 @@ export function QueryStreamDetailManagement({
     tabs.significantEvents = significantEvents;
   }
 
+  const advancedTabLabel = i18n.translate('xpack.streams.queryStreamDetailManagement.advancedTab', {
+    defaultMessage: 'Advanced',
+  });
   tabs.advanced = {
     content: (
       <QueryStreamsAdvancedView definition={definition} refreshDefinition={refreshDefinition} />
     ),
-    label: (
+    label: advancedTabLabel,
+    fallbackLabel: (
       <EuiToolTip
         content={i18n.translate('xpack.streams.queryStreamDetailManagement.advanced.tooltip', {
           defaultMessage: 'View technical details about this query stream’s underlying setup',
         })}
       >
-        <span tabIndex={0}>
-          {i18n.translate('xpack.streams.queryStreamDetailManagement.advancedTab', {
-            defaultMessage: 'Advanced',
-          })}
-        </span>
+        <span tabIndex={0}>{advancedTabLabel}</span>
       </EuiToolTip>
     ),
   };
@@ -138,8 +138,8 @@ export function QueryStreamDetailManagement({
             <DiscoverBadgeButton stream={definition.stream} hasDataStream spellOut />
           </EuiFlexGroup>
         }
-        tabs={Object.entries(tabs).map(([tabKey, { label }]) => ({
-          label,
+        tabs={Object.entries(tabs).map(([tabKey, { label, fallbackLabel }]) => ({
+          label: fallbackLabel ?? label,
           href: router.link('/{key}/management/{tab}', {
             path: { key, tab: tabKey },
             query: { rangeFrom, rangeTo },
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx
index c01a90e2afa0b..5bb2305f0bc6d 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx
@@ -157,6 +157,13 @@ export function WiredStreamDetailManagement({
     );
   }
 
+  const lifecycleTabLabel = i18n.translate('xpack.streams.streamDetailView.lifecycleTab', {
+    defaultMessage: 'Data lifecycle',
+  });
+  const dataQualityTabLabel = i18n.translate('xpack.streams.streamDetailView.qualityTab', {
+    defaultMessage: 'Data quality',
+  });
+
   const tabs = {
     overview: {
       content: <StreamOverview />,
@@ -173,7 +180,8 @@ export function WiredStreamDetailManagement({
                 refreshDefinition={refreshDefinition}
               />
             ),
-            label: (
+            label: lifecycleTabLabel,
+            fallbackLabel: (
               <EuiToolTip
                 position="top"
                 content={i18n.translate('xpack.streams.managementTab.lifecycle.tooltip', {
@@ -182,9 +190,7 @@ export function WiredStreamDetailManagement({
                 })}
               >
                 <span data-test-subj="retentionTab" tabIndex={0}>
-                  {i18n.translate('xpack.streams.streamDetailView.lifecycleTab', {
-                    defaultMessage: 'Data lifecycle',
-                  })}
+                  {lifecycleTabLabel}
                 </span>
               </EuiToolTip>
             ),
@@ -217,16 +223,15 @@ export function WiredStreamDetailManagement({
                 refreshDefinition={refreshDefinition}
               />
             ),
-            label: (
+            label: dataQualityTabLabel,
+            fallbackLabel: (
               <EuiToolTip
                 content={i18n.translate('xpack.streams.managementTab.dataQuality.wired.tooltip', {
                   defaultMessage: "View details about this stream's data quality",
                 })}
               >
                 <span data-test-subj="dataQualityTab" tabIndex={0}>
-                  {i18n.translate('xpack.streams.streamDetailView.qualityTab', {
-                    defaultMessage: 'Data quality',
-                  })}
+                  {dataQualityTabLabel}
                 </span>
               </EuiToolTip>
             ),
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
index 0ad6a374f9bbf..0d48104c1f11a 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
@@ -10,12 +10,10 @@ import {
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageHeader,
   EuiSpacer,
   EuiTourStep,
-  useEuiTheme,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
+import type { AppHeaderBadge, AppHeaderMenu, AppHeaderTab } from '@kbn/app-header';
 import { i18n } from '@kbn/i18n';
 import { DatasetQualityIndicator } from '@kbn/dataset-quality-plugin/public';
 import {
@@ -43,15 +41,17 @@ import {
   LifecycleBadge,
   TimeSeriesBadge,
   WiredStreamBadge,
+  useDiscoverLink,
 } from '../../../stream_badges';
-import { StreamsAppPageTemplate } from '../../../streams_app_page_template';
+import { StreamsAppHeader, StreamsAppPageTemplate } from '../../../streams_app_page_template';
 import { TAB_TO_TOUR_STEP_ID, useStreamsTour } from '../../../streams_tour';
 
 export type ManagementTabs = Record<
   string,
   {
     content: JSX.Element;
-    label: ReactNode;
+    label: string;
+    fallbackLabel?: ReactNode;
   }
 >;
 
@@ -108,6 +108,7 @@ export function Wrapper({
             query: { rangeFrom, rangeTo },
           }),
           label: currentTab.label,
+          fallbackLabel: currentTab.fallbackLabel,
           content: currentTab.content,
         },
       ];
@@ -155,25 +156,47 @@ export function Wrapper({
   const isQualityLoading =
     countResult?.loading || failedDocsResult?.loading || degradedDocsResult.loading;
 
-  const { euiTheme } = useEuiTheme();
+  const discoverLink = useDiscoverLink(
+    Streams.ingest.all.GetResponse.is(definition)
+      ? {
+          stream: definition.stream,
+          hasDataStream: definition.data_stream_exists || isDraft,
+          indexMode: definition.index_mode ?? 'standard',
+        }
+      : undefined
+  );
+  const viewInDiscoverLabel = i18n.translate(
+    'xpack.streams.entityDetailViewWithoutParams.openInDiscoverBadgeLabel',
+    {
+      defaultMessage: 'Open in Discover',
+    }
+  );
 
-  const streamBadges: Array<{ key: string; node: ReactNode }> = [];
+  const streamBadges: Array<{ key: string; label: string; node: ReactNode }> = [];
   if (Streams.ClassicStream.GetResponse.is(definition)) {
-    streamBadges.push({ key: 'classic', node: <ClassicStreamBadge /> });
+    streamBadges.push({
+      key: 'classic',
+      label: i18n.translate('xpack.streams.streamDetailHeader.classicBadgeLabel', {
+        defaultMessage: 'Classic',
+      }),
+      node: <ClassicStreamBadge />,
+    });
   }
 
   if (Streams.WiredStream.GetResponse.is(definition)) {
     if (ROOT_STREAM_NAMES.includes(definition.stream.name as RootStreamName)) {
+      const technicalPreviewLabel = i18n.translate('xpack.streams.technicalPreviewLabel', {
+        defaultMessage: 'Technical preview',
+      });
       streamBadges.push({
         key: 'technicalPreview',
+        label: technicalPreviewLabel,
         node: (
           <EuiBetaBadge
             tooltipContent={i18n.translate('xpack.streams.technicalPreviewTooltip', {
               defaultMessage: 'This feature is in technical preview. We are working on it...',
             })}
-            label={i18n.translate('xpack.streams.technicalPreviewLabel', {
-              defaultMessage: 'Technical preview',
-            })}
+            label={technicalPreviewLabel}
             iconType="flask"
             size="s"
             css={{ display: 'block' }}
@@ -181,17 +204,38 @@ export function Wrapper({
         ),
       });
     }
-    streamBadges.push({ key: 'wired', node: <WiredStreamBadge /> });
+    streamBadges.push({
+      key: 'wired',
+      label: i18n.translate('xpack.streams.streamDetailHeader.wiredBadgeLabel', {
+        defaultMessage: 'Wired',
+      }),
+      node: <WiredStreamBadge />,
+    });
     if (isDraft) {
-      streamBadges.push({ key: 'draft', node: <DraftStreamBadge /> });
+      streamBadges.push({
+        key: 'draft',
+        label: i18n.translate('xpack.streams.streamDetailHeader.draftBadgeLabel', {
+          defaultMessage: 'Draft',
+        }),
+        node: <DraftStreamBadge />,
+      });
     }
   }
   if (Streams.ingest.all.GetResponse.is(definition) && !isDraft) {
     if (definition.index_mode === 'time_series') {
-      streamBadges.push({ key: 'timeSeries', node: <TimeSeriesBadge /> });
+      streamBadges.push({
+        key: 'timeSeries',
+        label: i18n.translate('xpack.streams.streamDetailHeader.timeSeriesBadgeLabel', {
+          defaultMessage: 'Time series',
+        }),
+        node: <TimeSeriesBadge />,
+      });
     }
     streamBadges.push({
       key: 'lifecycle',
+      label: i18n.translate('xpack.streams.streamDetailHeader.lifecycleBadgeLabel', {
+        defaultMessage: 'Lifecycle',
+      }),
       node: (
         <LifecycleBadge
           lifecycle={definition.effective_lifecycle}
@@ -203,6 +247,9 @@ export function Wrapper({
   if (!isDraft) {
     streamBadges.push({
       key: 'quality',
+      label: i18n.translate('xpack.streams.streamDetailHeader.qualityBadgeLabel', {
+        defaultMessage: 'Quality',
+      }),
       node: (
         <DatasetQualityIndicator
           quality={quality}
@@ -214,22 +261,83 @@ export function Wrapper({
     });
   }
 
+  const appHeaderBadges: AppHeaderBadge[] = streamBadges.map(({ label, node }) => ({
+    label,
+    renderCustomBadge: () => <>{node}</>,
+  }));
+  const appHeaderTabs: AppHeaderTab[] = Object.entries(tabMap).map(([tabKey, { label, href }]) => ({
+    id: tabKey,
+    label,
+    href,
+    isSelected: tab === tabKey,
+  }));
+  const appHeaderMenu: AppHeaderMenu | undefined = discoverLink
+    ? {
+        primaryActionItem: {
+          id: 'viewInDiscover',
+          label: viewInDiscoverLabel,
+          iconType: 'discoverApp',
+          href: discoverLink,
+          testId: `streamsDiscoverActionButton-${definition.stream.name}`,
+        },
+      }
+    : undefined;
+  const fallbackRightSideItems =
+    discoverLink && Streams.ingest.all.GetResponse.is(definition)
+      ? [
+          <DiscoverBadgeButton
+            key="viewInDiscover"
+            stream={definition.stream}
+            hasDataStream={definition.data_stream_exists || isDraft}
+            indexMode={definition.index_mode ?? 'standard'}
+            spellOut
+          />,
+        ]
+      : undefined;
+  const fallbackTabs = Object.entries(tabMap).map(([tabKey, { label, fallbackLabel, href }]) => {
+    const tourStepId = TAB_TO_TOUR_STEP_ID[tabKey];
+    const stepProps = tourStepId ? getStepPropsByStepId(tourStepId) : undefined;
+
+    const wrappedLabel = stepProps ? (
+      <EuiTourStep
+        step={stepProps.step}
+        stepsTotal={stepProps.stepsTotal}
+        title={stepProps.title}
+        subtitle={stepProps.subtitle}
+        content={stepProps.content}
+        anchorPosition={stepProps.anchorPosition}
+        offset={stepProps.offset}
+        maxWidth={stepProps.maxWidth}
+        isStepOpen={stepProps.isStepOpen}
+        footerAction={stepProps.footerAction}
+        onFinish={stepProps.onFinish}
+      >
+        <span>{fallbackLabel ?? label}</span>
+      </EuiTourStep>
+    ) : (
+      fallbackLabel ?? label
+    );
+
+    return {
+      label: wrappedLabel,
+      href,
+      isSelected: tab === tabKey,
+    };
+  });
+  const streamsBackLabel = i18n.translate('xpack.streams.streamDetailHeader.backToStreamsLabel', {
+    defaultMessage: 'Streams',
+  });
+
   return (
     <>
-      <EuiPageHeader
-        paddingSize="l"
-        bottomBorder="extended"
-        css={css`
-          background: ${euiTheme.colors.backgroundBasePlain};
-        `}
-        pageTitle={
-          <EuiFlexGroup
-            direction="row"
-            gutterSize="s"
-            alignItems="center"
-            justifyContent="spaceBetween"
-            wrap
-          >
+      <StreamsAppHeader
+        title={streamId}
+        back={{ href: router.link('/'), label: streamsBackLabel }}
+        badges={appHeaderBadges}
+        tabs={appHeaderTabs}
+        menu={appHeaderMenu}
+        fallback={{
+          pageTitle: (
             <EuiFlexGroup direction="row" gutterSize="s" alignItems="center" wrap>
               <EuiFlexItem grow={false}>{streamId}</EuiFlexItem>
               <EuiFlexGroup alignItems="center" gutterSize="s" wrap responsive={false}>
@@ -240,46 +348,10 @@ export function Wrapper({
                 ))}
               </EuiFlexGroup>
             </EuiFlexGroup>
-            {Streams.ingest.all.GetResponse.is(definition) && (
-              <DiscoverBadgeButton
-                stream={definition.stream}
-                hasDataStream={definition.data_stream_exists || isDraft}
-                indexMode={definition.index_mode ?? 'standard'}
-                spellOut
-              />
-            )}
-          </EuiFlexGroup>
-        }
-        tabs={Object.entries(tabMap).map(([tabKey, { label, href }]) => {
-          const tourStepId = TAB_TO_TOUR_STEP_ID[tabKey];
-          const stepProps = tourStepId ? getStepPropsByStepId(tourStepId) : undefined;
-
-          const wrappedLabel = stepProps ? (
-            <EuiTourStep
-              step={stepProps.step}
-              stepsTotal={stepProps.stepsTotal}
-              title={stepProps.title}
-              subtitle={stepProps.subtitle}
-              content={stepProps.content}
-              anchorPosition={stepProps.anchorPosition}
-              offset={stepProps.offset}
-              maxWidth={stepProps.maxWidth}
-              isStepOpen={stepProps.isStepOpen}
-              footerAction={stepProps.footerAction}
-              onFinish={stepProps.onFinish}
-            >
-              <span>{label}</span>
-            </EuiTourStep>
-          ) : (
-            label
-          );
-
-          return {
-            label: wrappedLabel,
-            href,
-            isSelected: tab === tabKey,
-          };
-        })}
+          ),
+          rightSideItems: fallbackRightSideItems,
+          tabs: fallbackTabs,
+        }}
       />
       <StreamsAppPageTemplate.Body noPadding={tab === 'partitioning' || tab === 'processing'}>
         {topContent}
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
index 156b6624370d6..753bf4e987269 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
@@ -7,8 +7,11 @@
 
 import React from 'react';
 import type { EuiPageSectionProps } from '@elastic/eui';
-import { EuiPageTemplate } from '@elastic/eui';
+import { EuiPageTemplate, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
+import { css as emotionCss } from '@emotion/react';
+import type { AppHeaderProps } from '@kbn/app-header';
+import { AppHeader } from '@kbn/app-header';
 
 export function StreamsAppPageTemplate({ children }: { children: React.ReactNode }) {
   return (
@@ -25,6 +28,30 @@ export function StreamsAppPageTemplate({ children }: { children: React.ReactNode
   );
 }
 
+export const StreamsAppHeader = ({ fallback, ...props }: AppHeaderProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <AppHeader
+      fallback={
+        fallback === null
+          ? null
+          : {
+              paddingSize: 'l',
+              restrictWidth: false,
+              bottomBorder: 'extended',
+              color: 'plain',
+              css: emotionCss`
+                background: ${euiTheme.colors.backgroundBasePlain};
+              `,
+              ...fallback,
+            }
+      }
+      {...props}
+    />
+  );
+};
+
 StreamsAppPageTemplate.Header = EuiPageTemplate.Header;
 StreamsAppPageTemplate.EmptyPrompt = EuiPageTemplate.EmptyPrompt;
 StreamsAppPageTemplate.Body = ({
diff --git a/x-pack/platform/plugins/shared/streams_app/tsconfig.json b/x-pack/platform/plugins/shared/streams_app/tsconfig.json
index f315c7644f6ac..9f96b9f845813 100644
--- a/x-pack/platform/plugins/shared/streams_app/tsconfig.json
+++ b/x-pack/platform/plugins/shared/streams_app/tsconfig.json
@@ -15,6 +15,7 @@
   ],
   "exclude": ["target/**/*", ".storybook/**/*.js"],
   "kbn_references": [
+    "@kbn/app-header",
     "@kbn/core",
     "@kbn/data-plugin",
     "@kbn/dataset-quality-plugin",

From f3a296cf22841c9b768622d65a7049ccc5ed5a3e Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 27 May 2026 16:12:44 +0200
Subject: [PATCH 70/77] fix moon

---
 x-pack/platform/plugins/shared/streams_app/moon.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/platform/plugins/shared/streams_app/moon.yml b/x-pack/platform/plugins/shared/streams_app/moon.yml
index 61fa270910b46..2b7e9ffb7f735 100644
--- a/x-pack/platform/plugins/shared/streams_app/moon.yml
+++ b/x-pack/platform/plugins/shared/streams_app/moon.yml
@@ -17,6 +17,7 @@ project:
   owner: '@elastic/obs-onboarding-team @elastic/obs-sig-events-team'
   sourceRoot: x-pack/platform/plugins/shared/streams_app
 dependsOn:
+  - '@kbn/app-header'
   - '@kbn/core'
   - '@kbn/data-plugin'
   - '@kbn/dataset-quality-plugin'

From 3b93ef103bd7dc45abe3212d23f7356f6a272412 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 27 May 2026 16:23:18 +0200
Subject: [PATCH 71/77] fix

---
 .../layout/core-chrome-layout/layouts/grid/grid_layout.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index f500b992745af..5c52e1dfbf443 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -101,6 +101,7 @@ export class GridLayout implements LayoutService {
       http,
       docLinks,
       customBranding,
+      featureFlags,
     };
 
     const GridLayoutContent = React.memo(() => {

From 8a6bfd86c5cd9428f202437e493eeae310e06a7d Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 27 May 2026 17:30:41 +0200
Subject: [PATCH 72/77] [Chrome Next] Avoid empty fallback AppHeader due to
 empty menu (#271525)

Part of https://github.com/elastic/kibana-team/issues/3115

## Summary

Prevents Chrome Next app headers from rendering an empty menu row when
the only static app-menu item is global. The app-header wrapper now
reuses the app-menu component visibility rule, allowing legacy header
action menu content to render instead of being hidden behind a
global-only static item.
---
 .../chrome/app-header/src/app_header/app_menu.tsx         | 5 +++--
 .../app-menu/core-chrome-app-menu-components/index.ts     | 1 +
 .../src/components/app_menu.tsx                           | 8 ++++----
 .../app-menu/core-chrome-app-menu-components/src/index.ts | 1 +
 .../core-chrome-app-menu-components/src/utils.tsx         | 3 +++
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
index f9ffd11f878ef..4a3739fd4f294 100644
--- a/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
+++ b/src/core/packages/chrome/app-header/src/app_header/app_menu.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { hasNonGlobalStaticItems, type AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useHasLegacyActionMenu } from './hooks/chrome';
 import { LegacyHeaderActionMenu } from './legacy_action_menu';
 import { useAppHeaderMenu } from './hooks';
@@ -27,8 +27,9 @@ export interface AppMenuProps {
 export const AppMenu = React.memo<AppMenuProps>(({ menu, docLink, showAddIntegrations }) => {
   const { config, staticItems } = useAppHeaderMenu(menu, docLink, showAddIntegrations);
   const hasLegacyActionMenu = useHasLegacyActionMenu();
+  const hasStaticItems = hasNonGlobalStaticItems(staticItems);
 
-  if (config || staticItems?.length) {
+  if (config || hasStaticItems) {
     return (
       <Suspense>
         <AppMenuComponent config={config} staticItems={staticItems} />
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
index f3be85043b781..020bda4a6f8ca 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts
@@ -37,4 +37,5 @@ export {
   getPopoverPanels,
   getPopoverActionItems,
   getIsSelectedColor,
+  hasNonGlobalStaticItems,
 } from './src';
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx
index 50b0ef0427b30..d007a715adcf8 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx
@@ -9,7 +9,7 @@
 
 import React, { useState } from 'react';
 import { EuiHeaderLinks, useIsWithinBreakpoints } from '@elastic/eui';
-import { getAppMenuItems, processStaticItems } from '../utils';
+import { getAppMenuItems, hasNonGlobalStaticItems, processStaticItems } from '../utils';
 import { AppMenuActionButton } from './app_menu_action_button';
 import { AppMenuItem } from './app_menu_item';
 import { AppMenuOverflowButton } from './app_menu_overflow_button';
@@ -51,9 +51,9 @@ export const AppMenuComponent = ({
    * If only global static items are present, we don't want to render
    * the app menu.
    */
-  const hasNonGlobalStaticItems = !!staticItems?.length && staticItems.some((item) => !item.global);
+  const hasVisibleStaticItems = hasNonGlobalStaticItems(staticItems);
 
-  if ((!config || hasNoItems(config)) && !hasNonGlobalStaticItems) {
+  if ((!config || hasNoItems(config)) && !hasVisibleStaticItems) {
     return null;
   }
 
@@ -78,7 +78,7 @@ export const AppMenuComponent = ({
     shouldOverflow: shouldOverflowBase,
   } = getAppMenuItems({
     config,
-    hasStaticItems: hasNonGlobalStaticItems,
+    hasStaticItems: hasVisibleStaticItems,
   });
 
   const processedStaticItems = processStaticItems(staticItems);
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
index a83bc4d40e811..91a1058675ad8 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts
@@ -40,4 +40,5 @@ export {
   getPopoverActionItems,
   getPopoverSwitchItems,
   getIsSelectedColor,
+  hasNonGlobalStaticItems,
 } from './utils';
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx
index 9a2debe9d694a..436b7b9019da7 100644
--- a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx
+++ b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx
@@ -126,6 +126,9 @@ export const processStaticItems = (staticItems?: AppMenuItemType[]): AppMenuItem
     overflow: true,
   }));
 
+export const hasNonGlobalStaticItems = (staticItems?: Array<{ global?: boolean }>): boolean =>
+  !!staticItems?.some((item) => !item.global);
+
 export const isDisabled = (disableButton: AppMenuItemCommon['disableButton']) =>
   Boolean(isFunction(disableButton) ? disableButton() : disableButton);
 

From 1709668da0327fccdfcb1afefd94f6b8ad853307 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 27 May 2026 17:43:55 +0200
Subject: [PATCH 73/77] post merge fixes

---
 .../pages/workflow_detail/ui/workflow_detail_header.tsx   | 2 +-
 .../workflows_management/public/pages/workflows/index.tsx | 2 +-
 .../public/application/components/page_header.tsx         | 2 +-
 .../streams_app/public/components/stream_badges/index.tsx | 2 +-
 .../data_management/stream_detail_management/wrapper.tsx  | 2 +-
 .../public/components/streams_app_page_template/index.tsx | 8 ++++----
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
index efc1669f94aa8..209504925eda7 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
@@ -37,7 +37,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import type { AppHeaderBadge } from '@kbn/app-header';
-import { AppHeader as PageHeader } from '@kbn/app-header';
+import { AppHeaderWithFallback as PageHeader } from '@kbn/app-header';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { i18n } from '@kbn/i18n';
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
index b7e0640e6d621..5235e336a4b6a 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
@@ -18,7 +18,7 @@ import {
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { AppHeader as PageHeader } from '@kbn/app-header';
+import { AppHeaderWithFallback as PageHeader } from '@kbn/app-header';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
index a237e2e962b38..01eb13d4c43cf 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { AppHeader as PageHeader } from '@kbn/app-header';
+export { AppHeaderWithFallback as PageHeader } from '@kbn/app-header';
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx
index 384be38e0f602..fd20cc7c8d1a0 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_badges/index.tsx
@@ -297,7 +297,7 @@ export function DiscoverBadgeButton({ spellOut = false, ...linkProps }: Discover
 
   const ariaLabel = i18n.translate(
     'xpack.streams.entityDetailViewWithoutParams.openInDiscoverBadgeLabel',
-    { defaultMessage: 'Open in Discover' }
+    { defaultMessage: 'View in Discover' }
   );
 
   return spellOut ? (
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
index 0d48104c1f11a..3a3a3910d1317 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
@@ -168,7 +168,7 @@ export function Wrapper({
   const viewInDiscoverLabel = i18n.translate(
     'xpack.streams.entityDetailViewWithoutParams.openInDiscoverBadgeLabel',
     {
-      defaultMessage: 'Open in Discover',
+      defaultMessage: 'View in Discover',
     }
   );
 
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
index 753bf4e987269..46f54dd5cd830 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
@@ -10,8 +10,8 @@ import type { EuiPageSectionProps } from '@elastic/eui';
 import { EuiPageTemplate, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { css as emotionCss } from '@emotion/react';
-import type { AppHeaderProps } from '@kbn/app-header';
-import { AppHeader } from '@kbn/app-header';
+import type { AppHeaderWithFallbackProps } from '@kbn/app-header';
+import { AppHeaderWithFallback } from '@kbn/app-header';
 
 export function StreamsAppPageTemplate({ children }: { children: React.ReactNode }) {
   return (
@@ -28,11 +28,11 @@ export function StreamsAppPageTemplate({ children }: { children: React.ReactNode
   );
 }
 
-export const StreamsAppHeader = ({ fallback, ...props }: AppHeaderProps) => {
+export const StreamsAppHeader = ({ fallback, ...props }: AppHeaderWithFallbackProps) => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <AppHeader
+    <AppHeaderWithFallback
       fallback={
         fallback === null
           ? null

From ac4dc29388d6d5a3d0dd8e7624406d68080d8f6c Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 28 May 2026 14:58:10 +0200
Subject: [PATCH 74/77] clean up useIsNextChrome private hook

---
 .../packages/chrome/browser-components/index.ts  |  2 +-
 .../packages/chrome/browser-components/moon.yml  |  3 ---
 .../chrome/browser-components/src/context.tsx    |  2 --
 .../project/sidenav/navigation/navigation.tsx    |  3 ++-
 .../src/shared/chrome_hooks.ts                   |  7 -------
 .../src/shared/header_action_menu.test.tsx       | 16 +++++++++++++++-
 .../src/shared/help_links_hooks.tsx              |  4 ++--
 .../browser-components/src/test_helpers.tsx      |  2 --
 .../chrome/browser-components/tsconfig.json      |  3 ---
 .../browser-internal/src/chrome_service.test.tsx |  1 -
 .../layouts/grid/grid_layout.tsx                 |  1 -
 11 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/core/packages/chrome/browser-components/index.ts b/src/core/packages/chrome/browser-components/index.ts
index 9be554a3fd6ae..8a566f5b050c8 100644
--- a/src/core/packages/chrome/browser-components/index.ts
+++ b/src/core/packages/chrome/browser-components/index.ts
@@ -26,4 +26,4 @@ export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_side
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
 export { HeaderBreadcrumbsBadges, HeaderTopBanner, ChromelessHeader } from './src/shared';
-export { useHasAppMenu, useHasInlineAppHeader, useIsNextChrome } from './src/shared/chrome_hooks';
+export { useHasAppMenu, useHasInlineAppHeader } from './src/shared/chrome_hooks';
diff --git a/src/core/packages/chrome/browser-components/moon.yml b/src/core/packages/chrome/browser-components/moon.yml
index c3849cbca278b..60a04f430f775 100644
--- a/src/core/packages/chrome/browser-components/moon.yml
+++ b/src/core/packages/chrome/browser-components/moon.yml
@@ -35,12 +35,9 @@ dependsOn:
   - '@kbn/core-chrome-layout-constants'
   - '@kbn/core-chrome-sidebar-components'
   - '@kbn/ui-side-navigation'
-  - '@kbn/core-chrome-feature-flags'
   - '@kbn/core-custom-branding-browser'
   - '@kbn/core-custom-branding-common'
   - '@kbn/core-doc-links-browser'
-  - '@kbn/core-feature-flags-browser'
-  - '@kbn/core-feature-flags-browser-mocks'
   - '@kbn/core-doc-links-browser-mocks'
   - '@kbn/core-http-browser'
   - '@kbn/core-http-browser-mocks'
diff --git a/src/core/packages/chrome/browser-components/src/context.tsx b/src/core/packages/chrome/browser-components/src/context.tsx
index f275a45bf6343..c9c584e400601 100644
--- a/src/core/packages/chrome/browser-components/src/context.tsx
+++ b/src/core/packages/chrome/browser-components/src/context.tsx
@@ -13,7 +13,6 @@ import type { InternalApplicationStart } from '@kbn/core-application-browser-int
 import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
-import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
 
 export interface ChromeComponentsDeps {
   application: Pick<
@@ -23,7 +22,6 @@ export interface ChromeComponentsDeps {
   http: Pick<HttpStart, 'basePath' | 'getLoadingCount$'>;
   docLinks: DocLinksStart;
   customBranding: Pick<CustomBrandingStart, 'customBranding$'>;
-  featureFlags: Pick<FeatureFlagsStart, 'getBooleanValue' | 'getBooleanValue$'>;
 }
 
 const ChromeComponentsContext = createContext<ChromeComponentsDeps | null>(null);
diff --git a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
index 260b123399d9a..3f14b2418cce4 100644
--- a/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
+++ b/src/core/packages/chrome/browser-components/src/project/sidenav/navigation/navigation.tsx
@@ -15,7 +15,8 @@ import type { SolutionId } from '@kbn/core-chrome-browser';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
 import { KibanaSectionErrorBoundary } from '@kbn/shared-ux-error-boundary';
-import { useBasePath, useIsNextChrome } from '../../../shared/chrome_hooks';
+import { useIsNextChrome } from '@kbn/core-chrome-browser-hooks';
+import { useBasePath } from '../../../shared/chrome_hooks';
 import type { NavigationItems } from './to_navigation_items';
 import { toNavigationItems } from './to_navigation_items';
 import { PanelStateManager } from './panel_state_manager';
diff --git a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
index a47d770baa31b..16a087e2a6cdc 100644
--- a/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
+++ b/src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts
@@ -27,7 +27,6 @@ import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
-import { isNextChrome } from '@kbn/core-chrome-feature-flags';
 import { useChromeComponentsDeps } from '../context';
 
 /**
@@ -310,12 +309,6 @@ export function useContextSwitcher(): ReactNode {
   return useObservable(content$, null);
 }
 
-/** Returns whether the next-chrome experience is enabled via feature flag. */
-export function useIsNextChrome(): boolean {
-  const { featureFlags } = useChromeComponentsDeps();
-  return isNextChrome(featureFlags);
-}
-
 /** Whether an inline `AppHeader` is currently mounted by the active app. */
 export function useHasInlineAppHeader(): boolean {
   const chrome = useChromeService();
diff --git a/src/core/packages/chrome/browser-components/src/shared/header_action_menu.test.tsx b/src/core/packages/chrome/browser-components/src/shared/header_action_menu.test.tsx
index 03e5ed5c2b495..63a2fe9367e60 100644
--- a/src/core/packages/chrome/browser-components/src/shared/header_action_menu.test.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/header_action_menu.test.tsx
@@ -13,6 +13,8 @@ import { mount } from 'enzyme';
 import { BehaviorSubject } from 'rxjs';
 import { act } from 'react-dom/test-utils';
 import type { MountPoint, UnmountCallback } from '@kbn/core-mount-utils-browser';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
 import { ChromeComponentsProvider } from '../context';
 import { createMockChromeComponentsDeps } from '../test_helpers';
 import { HeaderActionMenu } from './header_action_menu';
@@ -60,7 +62,19 @@ describe('HeaderActionMenu', () => {
   const renderWithProvider = (ui: React.ReactElement) => {
     const deps = createMockChromeComponentsDeps();
     deps.application = { ...deps.application, currentActionMenu$: menuMount$ };
-    return mount(<ChromeComponentsProvider value={deps}>{ui}</ChromeComponentsProvider>);
+    const chromeMock = chromeServiceMock.createStartContract();
+    const chrome = {
+      ...chromeMock,
+      componentDeps: {
+        ...chromeMock.componentDeps,
+        legacyActionMenu$: menuMount$,
+      },
+    };
+    return mount(
+      <ChromeServiceProvider value={{ chrome }}>
+        <ChromeComponentsProvider value={deps}>{ui}</ChromeComponentsProvider>
+      </ChromeServiceProvider>
+    );
   };
 
   it('mounts the current value of the provided observable', () => {
diff --git a/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx
index 900ea46eaa62c..e099ed7e90649 100644
--- a/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx
+++ b/src/core/packages/chrome/browser-components/src/shared/help_links_hooks.tsx
@@ -15,12 +15,12 @@ import { EuiContextMenuItem, EuiIcon, useEuiTheme } from '@elastic/eui';
 import type { EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
 import { useObservable } from '@kbn/use-observable';
 import { useChromeService } from '@kbn/core-chrome-browser-context';
-import { useChromeStyle } from '@kbn/core-chrome-browser-hooks';
+import { useChromeStyle, useIsNextChrome } from '@kbn/core-chrome-browser-hooks';
 import { useIsServerless } from '@kbn/react-env';
 import { css } from '@emotion/react';
 import type { HelpLinks, HelpMenuLinkItem } from './help_menu_links';
 import { buildHelpLinks, toContextMenuItem } from './help_menu_links';
-import { useNavigateToUrl, useIsNextChrome } from './chrome_hooks';
+import { useNavigateToUrl } from './chrome_hooks';
 import { useChromeComponentsDeps } from '../context';
 
 /**
diff --git a/src/core/packages/chrome/browser-components/src/test_helpers.tsx b/src/core/packages/chrome/browser-components/src/test_helpers.tsx
index 1159700428517..0753fff5b0e49 100644
--- a/src/core/packages/chrome/browser-components/src/test_helpers.tsx
+++ b/src/core/packages/chrome/browser-components/src/test_helpers.tsx
@@ -15,7 +15,6 @@ import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
 import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
 import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { coreContextMock } from '@kbn/core-base-browser-mocks';
-import { coreFeatureFlagsMock } from '@kbn/core-feature-flags-browser-mocks';
 import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
 import { CoreEnvContextProvider } from '@kbn/react-kibana-context-env';
 import type { InternalChromeStart } from '@kbn/core-chrome-browser-internal-types';
@@ -39,7 +38,6 @@ export const createMockChromeComponentsDeps = () => {
     customBranding: {
       customBranding$: new BehaviorSubject<CustomBranding>({}),
     },
-    featureFlags: coreFeatureFlagsMock.createStart(),
   } satisfies ChromeComponentsDeps;
 };
 
diff --git a/src/core/packages/chrome/browser-components/tsconfig.json b/src/core/packages/chrome/browser-components/tsconfig.json
index 5f131aeba3d1b..208e980641e75 100644
--- a/src/core/packages/chrome/browser-components/tsconfig.json
+++ b/src/core/packages/chrome/browser-components/tsconfig.json
@@ -35,12 +35,9 @@
     "@kbn/core-chrome-layout-constants",
     "@kbn/core-chrome-sidebar-components",
     "@kbn/ui-side-navigation",
-    "@kbn/core-chrome-feature-flags",
     "@kbn/core-custom-branding-browser",
     "@kbn/core-custom-branding-common",
     "@kbn/core-doc-links-browser",
-    "@kbn/core-feature-flags-browser",
-    "@kbn/core-feature-flags-browser-mocks",
     "@kbn/core-doc-links-browser-mocks",
     "@kbn/core-http-browser",
     "@kbn/core-http-browser-mocks",
diff --git a/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx b/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx
index a64dc00f2b696..35818450164d1 100644
--- a/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx
+++ b/src/core/packages/chrome/browser-internal/src/chrome_service.test.tsx
@@ -247,7 +247,6 @@ describe('start', () => {
       http: startDeps.http,
       docLinks: startDeps.docLinks,
       customBranding: startDeps.customBranding,
-      featureFlags: startDeps.featureFlags,
     });
 
     it('ClassicHeader renders within ChromeComponentsProvider', async () => {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index 5c52e1dfbf443..f500b992745af 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -101,7 +101,6 @@ export class GridLayout implements LayoutService {
       http,
       docLinks,
       customBranding,
-      featureFlags,
     };
 
     const GridLayoutContent = React.memo(() => {

From 9b57e77f7fd14b7153183b05d03391e1ae4119a5 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 28 May 2026 16:30:46 +0200
Subject: [PATCH 75/77] fix moon

---
 src/platform/plugins/shared/discover/moon.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/platform/plugins/shared/discover/moon.yml b/src/platform/plugins/shared/discover/moon.yml
index 70ff70c4ed661..e58f559ae6bca 100644
--- a/src/platform/plugins/shared/discover/moon.yml
+++ b/src/platform/plugins/shared/discover/moon.yml
@@ -150,6 +150,7 @@ dependsOn:
   - '@kbn/core-chrome-feature-flags'
   - '@kbn/logging'
   - '@kbn/logging-mocks'
+  - '@kbn/app-header'
 tags:
   - plugin
   - prod

From f7009e1182693f64596be23778842c7523c1289c Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 1 Jun 2026 10:45:37 +0200
Subject: [PATCH 76/77] [FeatureBranch/DoNotReview] Remove Fallback AppHeader
 path (#271712)

## Summary

There is no longer need for fallback code for the new rollout strategy
---
 src/core/packages/chrome/app-header/README.md |   5 +-
 src/core/packages/chrome/app-header/index.ts  |   3 +-
 .../src/app_header_with_fallback.tsx          |  87 --
 .../packages/chrome/app-header/src/index.ts   |   2 -
 .../shared/workflows_management/moon.yml      |   2 +
 .../ui/workflow_detail_header.stories.tsx     |  10 -
 .../ui/workflow_detail_header.test.tsx        |  10 +-
 .../ui/workflow_detail_header.tsx             | 829 ++++++------------
 .../ui/workflow_detail_page.tsx               |  13 +-
 .../public/pages/workflows/index.tsx          |  47 +-
 .../shared/workflows_management/tsconfig.json |   4 +-
 .../component_template_create.tsx             |   3 -
 .../component_template_edit.tsx               |   3 -
 .../application/components/page_header.tsx    |   2 +-
 .../template_form/template_form.tsx           |   3 -
 .../enrich_policy_create.tsx                  |  25 +-
 .../public/application/sections/home/home.tsx |  19 +-
 .../details_page/details_page_content.tsx     |  48 +-
 .../components/stream_list_view/index.tsx     |  83 +-
 .../stream_detail_management/classic.tsx      |  35 +-
 .../stream_detail_management/query.tsx        |  15 +-
 .../stream_detail_management/wired.tsx        |  26 +-
 .../stream_detail_management/wrapper.tsx      |  72 +-
 .../streams_app_page_template/index.tsx       |  31 +-
 24 files changed, 319 insertions(+), 1058 deletions(-)
 delete mode 100644 src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx

diff --git a/src/core/packages/chrome/app-header/README.md b/src/core/packages/chrome/app-header/README.md
index 9f5533e6c2c3d..ef60b58688b0a 100644
--- a/src/core/packages/chrome/app-header/README.md
+++ b/src/core/packages/chrome/app-header/README.md
@@ -16,9 +16,6 @@ the page cannot safely own the header placement yet.
 Use `AppHeader` when the page can render its header inline. This is the preferred model for pages
 that own their title, back target, tabs, badges, and app menu locally.
 
-Use `AppHeaderWithFallback` when the same page still needs a classic `EuiPageHeader` fallback while
-Chrome Next is disabled.
-
 Use `ChromeAppHeaderRegistration` when Chrome should own the top-bar slot. This keeps migration
 small for pages with sticky or shared top-nav constraints while still using the shared header view.
 
@@ -50,7 +47,7 @@ different buckets while the migration is in progress:
 
 | Bucket | Preferred API | When to use |
 |---|---|---|
-| Inline-ready | `AppHeader` or `AppHeaderWithFallback` | The page can colocate header state with its React tree. |
+| Inline-ready | `AppHeader` | The page can colocate header state with its React tree. |
 | Chrome-owned transitional | `ChromeAppHeaderRegistration` | Chrome should own the top-bar slot while the route keeps existing layout constraints. |
 | Fallback-only | Legacy Chrome state | Temporary safety net for routes that have not explicitly migrated. |
 
diff --git a/src/core/packages/chrome/app-header/index.ts b/src/core/packages/chrome/app-header/index.ts
index 008ff6961f186..6cdf4f38e7c32 100644
--- a/src/core/packages/chrome/app-header/index.ts
+++ b/src/core/packages/chrome/app-header/index.ts
@@ -7,11 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { AppHeaderWithFallback, AppHeader } from './src';
+export { AppHeader } from './src';
 export { AppHeaderView, ChromeAppHeaderRegistration, useChromeAppHeaderRegistration } from './src';
 export type { AppHeaderViewProps, AppHeaderConfig } from './src';
 export type {
-  AppHeaderWithFallbackProps,
   AppHeaderProps,
   AppHeaderBack,
   AppHeaderBadge,
diff --git a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx b/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
deleted file mode 100644
index 3a9785aa85344..0000000000000
--- a/src/core/packages/chrome/app-header/src/app_header_with_fallback.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import type { FC } from 'react';
-import React from 'react';
-import type { EuiPageHeaderProps } from '@elastic/eui';
-import { EuiPageHeader } from '@elastic/eui';
-import { useChromeService } from '@kbn/core-chrome-browser-context';
-import type { AppHeaderTab } from './types';
-import { AppHeader } from './app_header';
-import type { AppHeaderProps } from './app_header';
-
-export interface AppHeaderWithFallbackProps extends AppHeaderProps {
-  fallback?: EuiPageHeaderProps | null;
-}
-
-const mapTabsForClassic = (nextTabs: AppHeaderTab[] | undefined): EuiPageHeaderProps['tabs'] => {
-  if (!nextTabs?.length) return undefined;
-  return nextTabs.map((t) => ({
-    id: t.id,
-    label: t.label,
-    isSelected: t.isSelected,
-    onClick: t.onClick,
-    href: t.href,
-  }));
-};
-
-export const AppHeaderWithFallback: FC<AppHeaderWithFallbackProps> = ({
-  title,
-  back,
-  tabs,
-  badges,
-  menu,
-  favorite,
-  fallback,
-  sticky,
-  padding,
-  docLink,
-  showAddIntegrations,
-}) => {
-  const chrome = useChromeService();
-
-  if (!chrome.next.isEnabled) {
-    if (fallback === null) return null;
-    const { pageTitle: classicPageTitle, tabs: classicTabs, ...classicRest } = fallback ?? {};
-
-    // When pageTitle is explicitly null, skip the automatic title fallback.
-    // This enables "children mode" where EuiPageHeaderSection components
-    // can be passed as children for custom multi-section layouts.
-    if (classicPageTitle === null) {
-      return <EuiPageHeader {...classicRest} tabs={classicTabs ?? mapTabsForClassic(tabs)} />;
-    }
-
-    return (
-      <EuiPageHeader
-        {...classicRest}
-        pageTitle={classicPageTitle ?? title}
-        tabs={classicTabs ?? mapTabsForClassic(tabs)}
-      />
-    );
-  }
-
-  if (fallback === null && chrome.getChromeStyle() !== 'project') {
-    return null;
-  }
-
-  return (
-    <AppHeader
-      title={title}
-      back={back}
-      tabs={tabs}
-      badges={badges}
-      menu={menu}
-      favorite={favorite}
-      sticky={sticky}
-      padding={padding}
-      docLink={docLink}
-      showAddIntegrations={showAddIntegrations}
-    />
-  );
-};
diff --git a/src/core/packages/chrome/app-header/src/index.ts b/src/core/packages/chrome/app-header/src/index.ts
index 644f6db77f8f5..7f7793f3628ad 100644
--- a/src/core/packages/chrome/app-header/src/index.ts
+++ b/src/core/packages/chrome/app-header/src/index.ts
@@ -19,5 +19,3 @@ export type {
   AppHeaderPadding,
   AppHeaderConfig,
 } from './types';
-export type { AppHeaderWithFallbackProps } from './app_header_with_fallback';
-export { AppHeaderWithFallback } from './app_header_with_fallback';
diff --git a/src/platform/plugins/shared/workflows_management/moon.yml b/src/platform/plugins/shared/workflows_management/moon.yml
index d1f7085704ce2..90d70bd4ee9db 100644
--- a/src/platform/plugins/shared/workflows_management/moon.yml
+++ b/src/platform/plugins/shared/workflows_management/moon.yml
@@ -114,6 +114,8 @@ dependsOn:
   - '@kbn/core-chrome-app-menu-components'
   - '@kbn/core-chrome-browser-hooks'
   - '@kbn/ui-chrome-layout'
+  - '@kbn/core-chrome-browser-context'
+  - '@kbn/core-chrome-browser-mocks'
 tags:
   - plugin
   - prod
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.stories.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.stories.tsx
index 63a2b0c42491f..e2775c9f26cbf 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.stories.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.stories.tsx
@@ -93,16 +93,12 @@ type Story = StoryObj<typeof WorkflowDetailHeader>;
 export const Default: Story = {
   args: {
     isLoading: false,
-    highlightDiff: false,
-    setHighlightDiff: () => {},
   },
 };
 
 export const JustNow: Story = {
   args: {
     isLoading: false,
-    highlightDiff: false,
-    setHighlightDiff: () => {},
   },
   parameters: {
     initialDispatch: (dispatch: AppDispatch) => {
@@ -119,16 +115,12 @@ export const JustNow: Story = {
 export const Loading: Story = {
   args: {
     isLoading: true,
-    highlightDiff: false,
-    setHighlightDiff: () => {},
   },
 };
 
 export const LongTitle: Story = {
   args: {
     isLoading: false,
-    highlightDiff: false,
-    setHighlightDiff: () => {},
   },
   parameters: {
     initialDispatch: (dispatch: AppDispatch) => {
@@ -145,8 +137,6 @@ export const LongTitle: Story = {
 export const UnsavedChanges: Story = {
   args: {
     isLoading: false,
-    highlightDiff: false,
-    setHighlightDiff: () => {},
   },
   parameters: {
     initialDispatch: (dispatch: AppDispatch) => {
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx
index e7adbec5fd986..ff05335433787 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx
@@ -9,6 +9,8 @@
 
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { useWorkflowsCapabilities, type WorkflowsManagementCapabilities } from '@kbn/workflows-ui';
 import { createMockWorkflowsCapabilities } from '@kbn/workflows-ui/mocks';
 import {
@@ -66,8 +68,6 @@ jest.mock('@kbn/css-utils/public/use_memo_css', () => ({
 describe('WorkflowDetailHeader', () => {
   const defaultProps: WorkflowDetailHeaderProps = {
     isLoading: false,
-    highlightDiff: false,
-    setHighlightDiff: jest.fn(),
   };
 
   const mockWorkflow = {
@@ -120,7 +120,11 @@ describe('WorkflowDetailHeader', () => {
     }
 
     const wrapper = ({ children }: { children: React.ReactNode }) => {
-      return <TestWrapper store={store}>{children}</TestWrapper>;
+      return (
+        <ChromeServiceProvider value={{ chrome: chromeServiceMock.createStartContract() }}>
+          <TestWrapper store={store}>{children}</TestWrapper>
+        </ChromeServiceProvider>
+      );
     };
 
     return { ...render(component, { wrapper }), store };
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
index 209504925eda7..ca7fa1b31b5b8 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.tsx
@@ -7,12 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { EuiButtonGroupOptionProps, UseEuiTheme } from '@elastic/eui';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiButtonGroup,
-  EuiButtonIcon,
   EuiCheckbox,
   EuiFlexGroup,
   EuiFlexItem,
@@ -21,15 +18,8 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiPageHeaderSection,
   EuiPageTemplate,
-  EuiSkeletonLoading,
-  EuiSkeletonRectangle,
-  EuiSkeletonTitle,
-  EuiSwitch,
   EuiText,
-  EuiTitle,
-  EuiToolTip,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { selectUnit } from '@formatjs/intl-utils';
@@ -37,7 +27,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import type { AppHeaderBadge } from '@kbn/app-header';
-import { AppHeaderWithFallback as PageHeader } from '@kbn/app-header';
+import { AppHeader as PageHeader } from '@kbn/app-header';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { i18n } from '@kbn/i18n';
@@ -56,13 +46,11 @@ import {
   selectWorkflow,
 } from '../../../entities/workflows/store/workflow_detail/selectors';
 import { setIsTestModalOpen } from '../../../entities/workflows/store/workflow_detail/slice';
-import { useKibana } from '../../../hooks/use_kibana';
 import {
   useWorkflowUrlState,
   type WorkflowUrlStateTabType,
 } from '../../../hooks/use_workflow_url_state';
 import { getSaveWorkflowTooltipContent, getTestRunTooltipContent } from '../../../shared/ui';
-import { WorkflowUnsavedChangesBadge } from '../../../widgets/workflow_yaml_editor/ui/workflow_unsaved_changes_badge';
 
 const executionsTabReadExecutionDisabledTooltip = i18n.translate(
   'workflows.workflowDetailHeader.executionsTabReadExecutionDisabledTooltip',
@@ -93,575 +81,326 @@ const Translations = {
   }),
 };
 
-const ButtonGroupOptions: EuiButtonGroupOptionProps[] = [
-  {
-    id: 'workflow',
-    label: i18n.translate('workflows.workflowDetailHeader.workflow', {
-      defaultMessage: 'Workflow',
-    }),
-    iconType: 'grid',
-  },
-  {
-    id: 'executions',
-    label: i18n.translate('workflows.workflowDetailHeader.executions', {
-      defaultMessage: 'Executions',
-    }),
-    iconType: 'play',
-  },
-];
-
 export interface WorkflowDetailHeaderProps {
   isLoading: boolean;
-  // TODO: manage it in a workflow state context
-  highlightDiff: boolean;
-  setHighlightDiff: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export const WorkflowDetailHeader = React.memo(
-  ({ isLoading, highlightDiff, setHighlightDiff }: WorkflowDetailHeaderProps) => {
-    const { id: workflowId } = useParams<{ id?: string }>();
-    const { application } = useKibana().services;
-    const styles = useMemoCss(componentStyles);
-    const dispatch = useDispatch();
-    const { canCreateWorkflow, canUpdateWorkflow, canExecuteWorkflow, canReadWorkflowExecution } =
-      useWorkflowsCapabilities();
+export const WorkflowDetailHeader = React.memo(({ isLoading }: WorkflowDetailHeaderProps) => {
+  const { id: workflowId } = useParams<{ id?: string }>();
+  const styles = useMemoCss(componentStyles);
+  const dispatch = useDispatch();
+  const { canCreateWorkflow, canUpdateWorkflow, canExecuteWorkflow, canReadWorkflowExecution } =
+    useWorkflowsCapabilities();
 
-    const workflowDetailTabButtonOptions = useMemo(
-      () =>
-        ButtonGroupOptions.map((option) =>
-          option.id === 'executions' && !canReadWorkflowExecution
-            ? {
-                ...option,
-                isDisabled: true,
-                title: '',
-                toolTipContent: executionsTabReadExecutionDisabledTooltip,
-              }
-            : option
-        ),
-      [canReadWorkflowExecution]
-    );
+  const { setActiveTab } = useWorkflowUrlState();
 
-    const { activeTab, setActiveTab } = useWorkflowUrlState();
+  const workflow = useSelector(selectWorkflow);
+  const isSyntaxValid = useSelector(selectIsYamlSyntaxValid);
+  const hasYamlSchemaValidationErrors = useSelector(selectHasYamlSchemaValidationErrors);
+  const hasUnsavedChanges = useSelector(selectHasChanges);
+  const isExecutionsTab = useSelector(selectIsExecutionsTab);
+  const isYamlSynced = useSelector(selectIsYamlSynced);
 
-    const workflow = useSelector(selectWorkflow);
-    const isSyntaxValid = useSelector(selectIsYamlSyntaxValid);
-    const hasYamlSchemaValidationErrors = useSelector(selectHasYamlSchemaValidationErrors);
-    const hasUnsavedChanges = useSelector(selectHasChanges);
-    const isExecutionsTab = useSelector(selectIsExecutionsTab);
-    const isYamlSynced = useSelector(selectIsYamlSynced);
+  const { name, isEnabled, lastUpdatedAt } = useMemo(
+    () => ({
+      name: workflow?.name ?? 'New workflow',
+      isEnabled: workflow?.enabled ?? false,
+      lastUpdatedAt: workflow ? new Date(workflow.lastUpdatedAt) : null,
+    }),
+    [workflow]
+  );
 
-    const { name, isEnabled, lastUpdatedAt } = useMemo(
-      () => ({
-        name: workflow?.name ?? 'New workflow',
-        isEnabled: workflow?.enabled ?? false,
-        lastUpdatedAt: workflow ? new Date(workflow.lastUpdatedAt) : null,
-      }),
-      [workflow]
-    );
+  const saveYaml = useSaveYaml();
+  const isSaving = useSelector(selectIsSavingYaml);
+  const handleSaveWorkflow = useCallback(() => {
+    saveYaml();
+  }, [saveYaml]);
 
-    const saveYaml = useSaveYaml();
-    const isSaving = useSelector(selectIsSavingYaml);
-    const handleSaveWorkflow = useCallback(() => {
-      saveYaml();
-    }, [saveYaml]);
+  const updateWorkflow = useUpdateWorkflow();
+  const openTestModal = useCallback(() => {
+    dispatch(setIsTestModalOpen(true));
+  }, [dispatch]);
 
-    const updateWorkflow = useUpdateWorkflow();
-    const handleToggleWorkflow = useCallback(() => {
-      updateWorkflow({ workflow: { enabled: !isEnabled } });
-    }, [updateWorkflow, isEnabled]);
+  const [showRunConfirmation, setShowRunConfirmation] = useState(false);
+  const [dontAskAgain, setDontAskAgain] = useState(false);
+  const [savedLabel, setSavedLabel] = useState<string>('');
 
-    const openTestModal = useCallback(() => {
-      dispatch(setIsTestModalOpen(true));
-    }, [dispatch]);
+  useEffect(() => {
+    if (hasUnsavedChanges || !workflowId || !lastUpdatedAt) {
+      return;
+    }
 
-    const [showRunConfirmation, setShowRunConfirmation] = useState(false);
-    const [dontAskAgain, setDontAskAgain] = useState(false);
-    const [savedLabel, setSavedLabel] = useState<string>('');
+    const formatter = new Intl.RelativeTimeFormat(i18n.getLocale(), {
+      numeric: 'auto',
+      style: 'short',
+    });
 
-    useEffect(() => {
-      if (hasUnsavedChanges || !workflowId || !lastUpdatedAt) {
-        return;
+    const updateLabel = () => {
+      const { value, unit } = selectUnit(lastUpdatedAt);
+      if (unit === 'second') {
+        setSavedLabel(
+          i18n.translate('workflows.savedJustNow', {
+            defaultMessage: 'Saved just now',
+          })
+        );
+      } else {
+        setSavedLabel(
+          i18n.translate('workflows.savedAgo', {
+            defaultMessage: 'Saved {relativeTime}',
+            values: { relativeTime: formatter.format(value, unit) },
+          })
+        );
       }
+    };
 
-      const formatter = new Intl.RelativeTimeFormat(i18n.getLocale(), {
-        numeric: 'auto',
-        style: 'short',
-      });
-
-      const updateLabel = () => {
-        const { value, unit } = selectUnit(lastUpdatedAt);
-        if (unit === 'second') {
-          setSavedLabel(
-            i18n.translate('workflows.savedJustNow', {
-              defaultMessage: 'Saved just now',
-            })
-          );
-        } else {
-          setSavedLabel(
-            i18n.translate('workflows.savedAgo', {
-              defaultMessage: 'Saved {relativeTime}',
-              values: { relativeTime: formatter.format(value, unit) },
-            })
-          );
-        }
-      };
-
-      updateLabel();
-      const interval = setInterval(updateLabel, 30_000);
+    updateLabel();
+    const interval = setInterval(updateLabel, 30_000);
 
-      return () => clearInterval(interval);
-    }, [hasUnsavedChanges, workflowId, lastUpdatedAt]);
+    return () => clearInterval(interval);
+  }, [hasUnsavedChanges, workflowId, lastUpdatedAt]);
 
-    // Combined validity: syntax must parse AND no strict validation errors AND server considers it valid.
-    // workflow?.valid !== false covers the initial page load before Monaco validates.
-    const isSchemaValid =
-      isSyntaxValid && !hasYamlSchemaValidationErrors && workflow?.valid !== false;
+  // Combined validity: syntax must parse AND no strict validation errors AND server considers it valid.
+  // workflow?.valid !== false covers the initial page load before Monaco validates.
+  const isSchemaValid =
+    isSyntaxValid && !hasYamlSchemaValidationErrors && workflow?.valid !== false;
 
-    const runWorkflowTooltipContent = useMemo(() => {
-      return getTestRunTooltipContent({
-        isExecutionsTab,
-        isValid: isSyntaxValid,
-        canRunWorkflow: canExecuteWorkflow,
-        isSaving,
-      });
-    }, [isSyntaxValid, canExecuteWorkflow, isExecutionsTab, isSaving]);
+  const runWorkflowTooltipContent = useMemo(() => {
+    return getTestRunTooltipContent({
+      isExecutionsTab,
+      isValid: isSyntaxValid,
+      canRunWorkflow: canExecuteWorkflow,
+      isSaving,
+    });
+  }, [isSyntaxValid, canExecuteWorkflow, isExecutionsTab, isSaving]);
 
-    const saveWorkflowTooltipContent = useMemo(() => {
-      const isCreate = !workflowId;
-      return getSaveWorkflowTooltipContent({
-        isExecutionsTab,
-        canSaveWorkflow: isCreate ? canCreateWorkflow : canUpdateWorkflow,
-        isCreate,
-        hasUnsavedChanges,
-      });
-    }, [isExecutionsTab, workflowId, canCreateWorkflow, canUpdateWorkflow, hasUnsavedChanges]);
+  const saveWorkflowTooltipContent = useMemo(() => {
+    const isCreate = !workflowId;
+    return getSaveWorkflowTooltipContent({
+      isExecutionsTab,
+      canSaveWorkflow: isCreate ? canCreateWorkflow : canUpdateWorkflow,
+      isCreate,
+      hasUnsavedChanges,
+    });
+  }, [isExecutionsTab, workflowId, canCreateWorkflow, canUpdateWorkflow, hasUnsavedChanges]);
 
-    const canSaveWorkflow = useMemo(() => {
-      return workflowId ? canUpdateWorkflow : canCreateWorkflow;
-    }, [canUpdateWorkflow, canCreateWorkflow, workflowId]);
+  const canSaveWorkflow = useMemo(() => {
+    return workflowId ? canUpdateWorkflow : canCreateWorkflow;
+  }, [canUpdateWorkflow, canCreateWorkflow, workflowId]);
 
-    const handleRunClickWithUnsavedCheck = useCallback(() => {
-      const shouldSkipUnsavedRunConfirmation =
-        localStorage.getItem(SkipUnsavedRunConfirmationStorageKey) === 'true';
-      if (hasUnsavedChanges && !shouldSkipUnsavedRunConfirmation) {
-        setDontAskAgain(false);
-        setShowRunConfirmation(true);
-      } else {
-        openTestModal();
-      }
-    }, [hasUnsavedChanges, openTestModal]);
-
-    const handleConfirmRun = useCallback(() => {
-      if (dontAskAgain) {
-        localStorage.setItem(SkipUnsavedRunConfirmationStorageKey, 'true');
-      }
-      setShowRunConfirmation(false);
+  const handleRunClickWithUnsavedCheck = useCallback(() => {
+    const shouldSkipUnsavedRunConfirmation =
+      localStorage.getItem(SkipUnsavedRunConfirmationStorageKey) === 'true';
+    if (hasUnsavedChanges && !shouldSkipUnsavedRunConfirmation) {
+      setDontAskAgain(false);
+      setShowRunConfirmation(true);
+    } else {
       openTestModal();
-    }, [dontAskAgain, openTestModal]);
+    }
+  }, [hasUnsavedChanges, openTestModal]);
 
-    const handleCancelRun = useCallback(() => {
-      setDontAskAgain(false);
-      setShowRunConfirmation(false);
-    }, []);
+  const handleConfirmRun = useCallback(() => {
+    if (dontAskAgain) {
+      localStorage.setItem(SkipUnsavedRunConfirmationStorageKey, 'true');
+    }
+    setShowRunConfirmation(false);
+    openTestModal();
+  }, [dontAskAgain, openTestModal]);
 
-    const badges = useMemo<AppHeaderBadge[]>(() => {
-      if (hasUnsavedChanges) {
-        return [
-          {
-            label: i18n.translate('workflows.unsavedChangesBadge', {
-              defaultMessage: 'Unsaved changes',
-            }),
-            color: 'primary',
-            'data-test-subj': 'workflowUnsavedChangesBadge',
-          },
-        ];
-      }
-      if (workflowId && savedLabel) {
-        return [
-          {
-            label: savedLabel,
-            color: 'primary',
-            'data-test-subj': 'workflowSavedChangesBadge',
-          },
-        ];
-      }
-      return [];
-    }, [hasUnsavedChanges, workflowId, savedLabel]);
+  const handleCancelRun = useCallback(() => {
+    setDontAskAgain(false);
+    setShowRunConfirmation(false);
+  }, []);
 
-    const appMenu = useMemo<AppMenuConfig>(
-      () => ({
-        primaryActionItem: {
-          id: 'saveWorkflow',
-          label: i18n.translate('keepWorkflows.buttonText', {
-            defaultMessage: 'Save',
+  const badges = useMemo<AppHeaderBadge[]>(() => {
+    if (hasUnsavedChanges) {
+      return [
+        {
+          label: i18n.translate('workflows.unsavedChangesBadge', {
+            defaultMessage: 'Unsaved changes',
           }),
-          iconType: 'save',
-          run: handleSaveWorkflow,
-          disableButton:
-            isExecutionsTab || !canSaveWorkflow || isLoading || isSaving || !isYamlSynced,
-          isLoading: isSaving,
-          tooltipContent: saveWorkflowTooltipContent ?? undefined,
-          testId: 'saveWorkflowHeaderButton',
+          color: 'primary',
+          'data-test-subj': 'workflowUnsavedChangesBadge',
         },
-        switch: workflowId
-          ? {
-              id: 'enabledSwitch',
-              label: i18n.translate('workflows.workflowDetailHeader.enabled', {
-                defaultMessage: 'Enabled',
-              }),
-              labelProps: {},
-              checked: isEnabled,
-              onChange: (checked: boolean) => {
-                updateWorkflow({ workflow: { enabled: checked } });
+      ];
+    }
+    if (workflowId && savedLabel) {
+      return [
+        {
+          label: savedLabel,
+          color: 'primary',
+          'data-test-subj': 'workflowSavedChangesBadge',
+        },
+      ];
+    }
+    return [];
+  }, [hasUnsavedChanges, workflowId, savedLabel]);
+
+  const appMenu = useMemo<AppMenuConfig>(
+    () => ({
+      primaryActionItem: {
+        id: 'saveWorkflow',
+        label: i18n.translate('keepWorkflows.buttonText', {
+          defaultMessage: 'Save',
+        }),
+        iconType: 'save',
+        run: handleSaveWorkflow,
+        disableButton:
+          isExecutionsTab || !canSaveWorkflow || isLoading || isSaving || !isYamlSynced,
+        isLoading: isSaving,
+        tooltipContent: saveWorkflowTooltipContent ?? undefined,
+        testId: 'saveWorkflowHeaderButton',
+      },
+      switch: workflowId
+        ? {
+            id: 'enabledSwitch',
+            label: i18n.translate('workflows.workflowDetailHeader.enabled', {
+              defaultMessage: 'Enabled',
+            }),
+            labelProps: {},
+            checked: isEnabled,
+            onChange: (checked: boolean) => {
+              updateWorkflow({ workflow: { enabled: checked } });
+            },
+            disabled:
+              !workflowId || isLoading || !canUpdateWorkflow || !isSchemaValid || hasUnsavedChanges,
+            'data-test-subj': 'workflowEnabledSwitch',
+          }
+        : undefined,
+      items: [
+        ...(workflowId
+          ? [
+              {
+                id: 'executions',
+                order: 1,
+                label: i18n.translate('workflows.workflowDetailHeader.executions', {
+                  defaultMessage: 'Executions',
+                }),
+                iconType: 'videoPlayer' as const,
+                run: () => setActiveTab('executions' as WorkflowUrlStateTabType),
+                disableButton: !canReadWorkflowExecution,
+                tooltipContent: !canReadWorkflowExecution
+                  ? executionsTabReadExecutionDisabledTooltip
+                  : undefined,
+                testId: 'executionsTabButton',
               },
-              disabled:
-                !workflowId ||
-                isLoading ||
-                !canUpdateWorkflow ||
-                !isSchemaValid ||
-                hasUnsavedChanges,
-              'data-test-subj': 'workflowEnabledSwitch',
-            }
-          : undefined,
-        items: [
-          ...(workflowId
-            ? [
-                {
-                  id: 'executions',
-                  order: 1,
-                  label: i18n.translate('workflows.workflowDetailHeader.executions', {
-                    defaultMessage: 'Executions',
-                  }),
-                  iconType: 'videoPlayer' as const,
-                  run: () => setActiveTab('executions' as WorkflowUrlStateTabType),
-                  disableButton: !canReadWorkflowExecution,
-                  tooltipContent: !canReadWorkflowExecution
-                    ? executionsTabReadExecutionDisabledTooltip
-                    : undefined,
-                  testId: 'executionsTabButton',
-                },
-              ]
-            : []),
-          {
-            id: 'runWorkflow',
-            order: 2,
-            label: Translations.runWorkflow,
-            iconType: 'play' as const,
-            overflow: true,
-            run: handleRunClickWithUnsavedCheck,
-            disableButton: isExecutionsTab || !canExecuteWorkflow || isLoading || !isSyntaxValid,
-            tooltipContent: runWorkflowTooltipContent ?? undefined,
-            testId: 'runWorkflowHeaderButton',
-          },
-        ],
-      }),
-      [
-        handleSaveWorkflow,
-        isExecutionsTab,
-        canSaveWorkflow,
-        isLoading,
-        isSaving,
-        isYamlSynced,
-        saveWorkflowTooltipContent,
-        workflowId,
-        isEnabled,
-        updateWorkflow,
-        canUpdateWorkflow,
-        isSchemaValid,
-        hasUnsavedChanges,
-        canReadWorkflowExecution,
-        setActiveTab,
-        handleRunClickWithUnsavedCheck,
-        canExecuteWorkflow,
-        isSyntaxValid,
-        runWorkflowTooltipContent,
-      ]
-    );
+            ]
+          : []),
+        {
+          id: 'runWorkflow',
+          order: 2,
+          label: Translations.runWorkflow,
+          iconType: 'play' as const,
+          overflow: true,
+          run: handleRunClickWithUnsavedCheck,
+          disableButton: isExecutionsTab || !canExecuteWorkflow || isLoading || !isSyntaxValid,
+          tooltipContent: runWorkflowTooltipContent ?? undefined,
+          testId: 'runWorkflowHeaderButton',
+        },
+      ],
+    }),
+    [
+      handleSaveWorkflow,
+      isExecutionsTab,
+      canSaveWorkflow,
+      isLoading,
+      isSaving,
+      isYamlSynced,
+      saveWorkflowTooltipContent,
+      workflowId,
+      isEnabled,
+      updateWorkflow,
+      canUpdateWorkflow,
+      isSchemaValid,
+      hasUnsavedChanges,
+      canReadWorkflowExecution,
+      setActiveTab,
+      handleRunClickWithUnsavedCheck,
+      canExecuteWorkflow,
+      isSyntaxValid,
+      runWorkflowTooltipContent,
+    ]
+  );
 
-    return (
-      <>
-        <EuiPageTemplate offset={0} minHeight={0} grow={false} css={styles.pageTemplate}>
-          <PageHeader
-            title={name}
-            back={{
-              href: `/app/${PLUGIN_ID}`,
-              label: i18n.translate('workflows.workflowDetailHeader.backLink', {
-                defaultMessage: 'Back to Workflows',
-              }),
-            }}
-            badges={badges}
-            menu={appMenu}
-            docLink={WORKFLOWS_DOCUMENTATION_URL}
-            showAddIntegrations
-            fallback={{
-              pageTitle: null,
-              css: styles.header,
-              restrictWidth: false,
-              bottomBorder: false,
-              paddingSize: 'm' as const,
-              alignItems: 'bottom' as const,
-              children: (
-                <>
-                  <EuiPageHeaderSection
-                    css={styles.headerSection}
-                    data-test-subj="workflowDetailHeader"
-                  >
-                    <EuiButtonEmpty
-                      iconType="sortLeft"
-                      size="xs"
-                      flush="left"
-                      onClick={() => {
-                        application.navigateToApp(PLUGIN_ID);
-                      }}
-                      aria-label={Translations.backLink}
-                    >
-                      {Translations.backLink}
-                    </EuiButtonEmpty>
-                    <EuiFlexGroup
-                      alignItems="center"
-                      responsive={false}
-                      gutterSize="m"
-                      css={styles.titleGroup}
-                    >
-                      <EuiFlexItem grow={false} css={styles.titleItem}>
-                        <EuiSkeletonTitle
-                          size="m"
-                          isLoading={isLoading}
-                          contentAriaLabel={name}
-                          css={styles.skeletonTitle}
-                        >
-                          <EuiTitle size="m" css={styles.title}>
-                            <h2>{name}</h2>
-                          </EuiTitle>
-                        </EuiSkeletonTitle>
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <EuiSkeletonLoading
-                          isLoading={isLoading}
-                          loadingContent={<EuiSkeletonRectangle width="80px" height="20px" />}
-                          loadedContent={
-                            <WorkflowUnsavedChangesBadge
-                              hasChanges={hasUnsavedChanges}
-                              highlightDiff={highlightDiff}
-                              setHighlightDiff={setHighlightDiff}
-                              lastUpdatedAt={lastUpdatedAt}
-                            />
-                          }
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiPageHeaderSection>
-                  {workflowId && (
-                    <EuiPageHeaderSection
-                      css={{
-                        flexBasis: '15%',
-                      }}
-                    >
-                      <EuiFlexGroup justifyContent="center">
-                        <EuiFlexItem grow={false}>
-                          <EuiButtonGroup
-                            buttonSize="compressed"
-                            color="primary"
-                            options={workflowDetailTabButtonOptions}
-                            idSelected={activeTab}
-                            legend="Switch between workflow and executions"
-                            type="single"
-                            hasAriaDisabled={!canReadWorkflowExecution}
-                            onChange={(id) => setActiveTab(id as WorkflowUrlStateTabType)}
-                          />
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </EuiPageHeaderSection>
-                  )}
-                  <EuiPageHeaderSection
-                    css={{
-                      flexBasis: '40%',
-                    }}
-                  >
-                    <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="m">
-                      <EuiToolTip
-                        content={
-                          hasUnsavedChanges
-                            ? i18n.translate('workflows.workflowDetailHeader.unsaved', {
-                                defaultMessage: 'Save changes to enable/disable workflow',
-                              })
-                            : !isSchemaValid
-                            ? i18n.translate('workflows.workflowDetailHeader.invalid', {
-                                defaultMessage: 'Fix validation errors to enable workflow',
-                              })
-                            : undefined
-                        }
-                      >
-                        <EuiSwitch
-                          disabled={
-                            !workflowId ||
-                            isLoading ||
-                            !canUpdateWorkflow ||
-                            !isSchemaValid ||
-                            hasUnsavedChanges
-                          }
-                          checked={isEnabled}
-                          onChange={handleToggleWorkflow}
-                          label={i18n.translate('workflows.workflowDetailHeader.enabled', {
-                            defaultMessage: 'Enabled',
-                          })}
-                        />
-                      </EuiToolTip>
-                      <EuiFlexItem grow={false} css={styles.separator} />
-                      <EuiToolTip content={runWorkflowTooltipContent}>
-                        <EuiButtonIcon
-                          color="success"
-                          display="base"
-                          iconType="play"
-                          size="s"
-                          onClick={handleRunClickWithUnsavedCheck}
-                          disabled={
-                            isExecutionsTab || !canExecuteWorkflow || isLoading || !isSyntaxValid
-                          }
-                          aria-label={Translations.runWorkflow}
-                          data-test-subj="runWorkflowHeaderButton"
-                        />
-                      </EuiToolTip>
-                      <EuiToolTip content={saveWorkflowTooltipContent}>
-                        <EuiButton
-                          fill
-                          color="primary"
-                          size="s"
-                          onClick={handleSaveWorkflow}
-                          disabled={
-                            isExecutionsTab ||
-                            !canSaveWorkflow ||
-                            isLoading ||
-                            isSaving ||
-                            !isYamlSynced
-                          }
-                          isLoading={isSaving}
-                          data-test-subj="saveWorkflowHeaderButton"
-                        >
-                          <FormattedMessage
-                            id="keepWorkflows.buttonText"
-                            defaultMessage="Save"
-                            ignoreTag
-                          />
-                        </EuiButton>
-                      </EuiToolTip>
-                    </EuiFlexGroup>
-                  </EuiPageHeaderSection>
-                </>
-              ),
-            }}
-          />
-        </EuiPageTemplate>
-        {showRunConfirmation && (
-          <EuiModal
-            className="euiModal--confirmation"
-            data-test-subj="runWorkflowWithUnsavedChangesConfirmationModal"
-            onClose={handleCancelRun}
-            role="alertdialog"
-            initialFocus="[data-test-subj='confirmModalConfirmButton']"
-            aria-label={Translations.runWithUnsavedChangesQuestion}
-          >
-            <EuiModalHeader>
-              <EuiModalHeaderTitle data-test-subj="confirmModalTitleText">
-                {Translations.runWithUnsavedChangesQuestion}
-              </EuiModalHeaderTitle>
-            </EuiModalHeader>
-            <EuiModalBody>
-              <EuiText data-test-subj="confirmModalBodyText">
-                <p>
-                  <FormattedMessage
-                    id="workflows.workflowDetailHeader.runWithUnsavedChanges.message"
-                    defaultMessage="You have unsaved changes. Running the workflow will not save your changes. Are you sure you want to continue?"
-                  />
-                </p>
-              </EuiText>
-            </EuiModalBody>
-            <EuiModalFooter css={styles.runConfirmationFooter}>
-              <EuiCheckbox
-                id="workflowsRunWithUnsavedChangesDontAskAgain"
-                data-test-subj="runWorkflowWithUnsavedChangesDontAskAgain"
-                label={Translations.dontAskAgain}
-                checked={dontAskAgain}
-                onChange={(event) => setDontAskAgain(event.target.checked)}
-              />
-              <EuiFlexGroup gutterSize="m" justifyContent="flexEnd" responsive={false}>
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty
-                    data-test-subj="confirmModalCancelButton"
-                    onClick={handleCancelRun}
-                  >
-                    {Translations.runWorkflowCancel}
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    data-test-subj="confirmModalConfirmButton"
-                    onClick={handleConfirmRun}
-                    fill
-                    color="success"
-                  >
-                    {Translations.runWorkflow}
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiModalFooter>
-          </EuiModal>
-        )}
-      </>
-    );
-  }
-);
+  return (
+    <>
+      <EuiPageTemplate offset={0} minHeight={0} grow={false} css={styles.pageTemplate}>
+        <PageHeader
+          title={name}
+          back={{
+            href: `/app/${PLUGIN_ID}`,
+            label: i18n.translate('workflows.workflowDetailHeader.backLink', {
+              defaultMessage: 'Back to Workflows',
+            }),
+          }}
+          badges={badges}
+          menu={appMenu}
+          docLink={WORKFLOWS_DOCUMENTATION_URL}
+          showAddIntegrations
+        />
+      </EuiPageTemplate>
+      {showRunConfirmation && (
+        <EuiModal
+          className="euiModal--confirmation"
+          data-test-subj="runWorkflowWithUnsavedChangesConfirmationModal"
+          onClose={handleCancelRun}
+          role="alertdialog"
+          initialFocus="[data-test-subj='confirmModalConfirmButton']"
+          aria-label={Translations.runWithUnsavedChangesQuestion}
+        >
+          <EuiModalHeader>
+            <EuiModalHeaderTitle data-test-subj="confirmModalTitleText">
+              {Translations.runWithUnsavedChangesQuestion}
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiText data-test-subj="confirmModalBodyText">
+              <p>
+                <FormattedMessage
+                  id="workflows.workflowDetailHeader.runWithUnsavedChanges.message"
+                  defaultMessage="You have unsaved changes. Running the workflow will not save your changes. Are you sure you want to continue?"
+                />
+              </p>
+            </EuiText>
+          </EuiModalBody>
+          <EuiModalFooter css={styles.runConfirmationFooter}>
+            <EuiCheckbox
+              id="workflowsRunWithUnsavedChangesDontAskAgain"
+              data-test-subj="runWorkflowWithUnsavedChangesDontAskAgain"
+              label={Translations.dontAskAgain}
+              checked={dontAskAgain}
+              onChange={(event) => setDontAskAgain(event.target.checked)}
+            />
+            <EuiFlexGroup gutterSize="m" justifyContent="flexEnd" responsive={false}>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty data-test-subj="confirmModalCancelButton" onClick={handleCancelRun}>
+                  {Translations.runWorkflowCancel}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="confirmModalConfirmButton"
+                  onClick={handleConfirmRun}
+                  fill
+                  color="success"
+                >
+                  {Translations.runWorkflow}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalFooter>
+        </EuiModal>
+      )}
+    </>
+  );
+});
 WorkflowDetailHeader.displayName = 'WorkflowDetailHeader';
 
 const componentStyles = {
   pageTemplate: css({
     flexGrow: 0,
   }),
-  header: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      backgroundColor: euiTheme.colors.backgroundBasePlain,
-      overflow: 'hidden',
-      borderBottom: `1px solid ${euiTheme.colors.borderBasePlain}`,
-      '@media (max-width: 1024px)': {
-        flexDirection: 'column',
-      },
-      '& > div > div': {
-        gap: '24px', // increase gap between title+badge and the "workflow/executions" toggle
-      },
-    }),
-  headerSection: css({
-    flexBasis: '40%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    width: '100%',
-  }),
-  separator: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      width: '1px',
-      margin: '4px 0',
-      backgroundColor: euiTheme.colors.borderBasePlain,
-      alignSelf: 'stretch',
-    }),
   runConfirmationFooter: css({
     alignItems: 'center',
     justifyContent: 'space-between',
   }),
-  skeletonTitle: css({
-    minWidth: '250px',
-    width: '100%',
-    display: 'inline-block',
-  }),
-  title: css({
-    width: '100%',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    display: 'inline-block',
-  }),
-  titleGroup: css({
-    overflow: 'hidden',
-  }),
-  titleItem: css({
-    minWidth: 0,
-    overflow: 'hidden',
-  }),
 };
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_page.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_page.tsx
index d61ed41560bfc..d8e382098ca8d 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_page.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_page.tsx
@@ -9,7 +9,7 @@
 
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isHttpFetchError } from '@kbn/core-http-browser';
 import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css';
@@ -127,9 +127,6 @@ export function WorkflowDetailPage({ id }: { id?: string }) {
     }
   }, [selectedExecutionId, dispatch]);
 
-  // TODO: manage it in a workflow state context
-  const [highlightDiff, setHighlightDiff] = useState(false);
-
   const onCloseExecutionDetail = useCallback(() => {
     setSelectedExecution(null);
   }, [setSelectedExecution]);
@@ -171,18 +168,14 @@ export function WorkflowDetailPage({ id }: { id?: string }) {
   return (
     <EuiFlexGroup direction="column" gutterSize="none" css={kbnFullBodyHeightCss()}>
       <EuiFlexItem grow={false}>
-        <WorkflowDetailHeader
-          isLoading={isLoadingWorkflow}
-          highlightDiff={highlightDiff}
-          setHighlightDiff={setHighlightDiff}
-        />
+        <WorkflowDetailHeader isLoading={isLoadingWorkflow} />
       </EuiFlexItem>
       <EuiFlexItem css={css({ overflow: 'hidden', minHeight: 0 })}>
         {!isReady ? (
           <WorkflowDetailLoadingState />
         ) : (
           <WorkflowEditorLayout
-            editor={<WorkflowDetailEditor highlightDiff={highlightDiff} />}
+            editor={<WorkflowDetailEditor />}
             executionList={
               id &&
               activeTab === 'executions' &&
diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
index 5235e336a4b6a..5f4c55e3260c7 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflows/index.tsx
@@ -8,8 +8,6 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
   EuiFilterGroup,
   EuiFlexGroup,
   EuiFlexItem,
@@ -18,10 +16,9 @@ import {
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { AppHeaderWithFallback as PageHeader } from '@kbn/app-header';
+import { AppHeader as PageHeader } from '@kbn/app-header';
 import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 import type { WorkflowsSearchParams } from '@kbn/workflows';
 import { WORKFLOW_EXECUTION_STATS_BAR_SETTING_ID } from '@kbn/workflows/common/constants';
 import { useWorkflows, useWorkflowsCapabilities } from '@kbn/workflows-ui';
@@ -152,48 +149,6 @@ export function WorkflowsPage() {
         menu={appMenu}
         docLink={WORKFLOWS_DOCUMENTATION_URL}
         showAddIntegrations
-        fallback={{
-          paddingSize: 'l',
-          pageTitle: (
-            <FormattedMessage id="workflows.pageTitle" defaultMessage="Workflows" ignoreTag />
-          ),
-          rightSideItems: [
-            ...(canCreateWorkflow
-              ? [
-                  <EuiButton
-                    iconType="plusInCircle"
-                    color="primary"
-                    size="m"
-                    fill
-                    onClick={navigateToCreateWorkflow}
-                    data-test-subj="createWorkflowButton"
-                  >
-                    <FormattedMessage
-                      id="workflows.createWorkflowButton"
-                      defaultMessage="Create workflow"
-                      ignoreTag
-                    />
-                  </EuiButton>,
-                ]
-              : []),
-            ...(canImportWorkflows
-              ? [
-                  <EuiButtonEmpty
-                    iconType="importAction"
-                    size="m"
-                    onClick={() => setShowImportFlyout(true)}
-                    data-test-subj="importWorkflowsButton"
-                  >
-                    <FormattedMessage
-                      id="workflows.importWorkflowsButton"
-                      defaultMessage="Import"
-                      ignoreTag
-                    />
-                  </EuiButtonEmpty>,
-                ]
-              : []),
-          ],
-        }}
       />
       <EuiPageTemplate.Section restrictWidth={false}>
         {!shouldShowEmptyState && (
diff --git a/src/platform/plugins/shared/workflows_management/tsconfig.json b/src/platform/plugins/shared/workflows_management/tsconfig.json
index 4531f455e642b..5490e637b2677 100644
--- a/src/platform/plugins/shared/workflows_management/tsconfig.json
+++ b/src/platform/plugins/shared/workflows_management/tsconfig.json
@@ -111,7 +111,9 @@
     "@kbn/app-header",
     "@kbn/core-chrome-app-menu-components",
     "@kbn/core-chrome-browser-hooks",
-    "@kbn/ui-chrome-layout"
+    "@kbn/ui-chrome-layout",
+    "@kbn/core-chrome-browser-context",
+    "@kbn/core-chrome-browser-mocks"
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx
index f3de534d9aac0..909c707d64f19 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx
@@ -137,9 +137,6 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
               })
         }
         back="/app/management/data/index_management/component_templates"
-        fallback={{
-          'data-test-subj': 'pageTitle',
-        }}
       />
       <EuiSpacer size="l" />
 
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx
index d48370e360f4d..2d4715013b906 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx
@@ -123,9 +123,6 @@ export const ComponentTemplateEdit: React.FunctionComponent<RouteComponentProps<
           values: { name: decodedName },
         })}
         back="/app/management/data/index_management/component_templates"
-        fallback={{
-          'data-test-subj': 'pageTitle',
-        }}
       />
       <EuiSpacer size="l" />
 
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
index 01eb13d4c43cf..a237e2e962b38 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/page_header.tsx
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { AppHeaderWithFallback as PageHeader } from '@kbn/app-header';
+export { AppHeader as PageHeader } from '@kbn/app-header';
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx
index 3fcd83a1a1342..d12cf8532a692 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/template_form/template_form.tsx
@@ -278,9 +278,6 @@ export const TemplateForm = ({
         title={title}
         back="/app/management/data/index_management/templates"
         padding={{ bleed: 'l' }}
-        fallback={{
-          'data-test-subj': 'pageTitle',
-        }}
       />
       <EuiSpacer size="m" />
 
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
index ea4f648f1fb0d..749bd1ab3614e 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/enrich_policy_create/enrich_policy_create.tsx
@@ -8,8 +8,7 @@
 import React, { useEffect } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import { documentationService } from '../../services/documentation';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../services/breadcrumbs';
 import { PageHeader } from '../../components/page_header';
@@ -30,28 +29,6 @@ export const EnrichPolicyCreate: React.FunctionComponent<RouteComponentProps> =
         back="/app/management/data/index_management/enrich_policies"
         padding={{ bleed: 'l' }}
         docLink={documentationService.getCreateEnrichPolicyLink()}
-        fallback={{
-          'data-test-subj': 'createEnrichPolicyHeaderContent',
-          description: (
-            <FormattedMessage
-              id="xpack.idxMgmt.enrichPolicyCreate.appDescription"
-              defaultMessage="Specify how to retrieve and enrich your incoming data."
-            />
-          ),
-          rightSideItems: [
-            <EuiButtonEmpty
-              href={documentationService.getCreateEnrichPolicyLink()}
-              target="_blank"
-              iconType="question"
-              data-test-subj="createEnrichPolicyDocumentationLink"
-            >
-              <FormattedMessage
-                id="xpack.idxMgmt.enrichPolicyCreate.titleDocsLinkText"
-                defaultMessage="Documentation"
-              />
-            </EuiButtonEmpty>,
-          ],
-        }}
       />
       <EuiSpacer size="l" />
 
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
index 86fe0df11e2e8..48a6506fb2aad 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/home.tsx
@@ -9,8 +9,7 @@ import React from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 
 import type { AppHeaderTab } from '@kbn/app-header';
 import { PageHeader } from '../../components/page_header';
@@ -110,22 +109,6 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
         tabs={tabs}
         padding={{ bleed: 'l' }}
         docLink={documentationService.getIdxMgmtDocumentationLink()}
-        fallback={{
-          'data-test-subj': 'indexManagementHeaderContent',
-          rightSideItems: [
-            <EuiButtonEmpty
-              href={documentationService.getIdxMgmtDocumentationLink()}
-              target="_blank"
-              iconType="question"
-              data-test-subj="documentationLink"
-            >
-              <FormattedMessage
-                id="xpack.idxMgmt.home.idxMgmtDocsLinkText"
-                defaultMessage="Index Management docs"
-              />
-            </EuiButtonEmpty>,
-          ],
-        }}
       />
       <EuiSpacer size="l" />
 
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
index fc6e65b4ecc75..a203ad2ebc128 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
@@ -7,9 +7,8 @@
 
 import type { FunctionComponent } from 'react';
 import React, { useCallback, useMemo } from 'react';
-import { EuiBadge, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
+import { EuiBadge, EuiSpacer } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import type { RouteComponentProps } from 'react-router-dom';
 import { openWiredConnectionDetails } from '@kbn/cloud/connection_details';
@@ -26,9 +25,6 @@ import type { IndexDetailsTab, IndexDetailsTabId } from '../../../../../../commo
 import { INDEX_OPEN, IndexDetailsSection, Section } from '../../../../../../common/constants';
 import { getIndexDetailsLink } from '../../../../services/routing';
 import { useAppContext } from '../../../../app_context';
-import { DiscoverLink } from '../../../../lib/discover_link';
-import { renderBadges } from '../../../../lib/render_badges';
-import { ManageIndexButton } from './manage_index_button';
 import { useManageIndexMenu } from './use_manage_index_menu';
 import { DetailsPageMappings } from './details_page_mappings';
 import { DetailsPageSettings } from './details_page_settings';
@@ -198,16 +194,6 @@ export const DetailsPageContent: FunctionComponent<Props> = ({
     return result;
   }, [extensionsService.badges, index]);
 
-  const fallbackPageTitle = useMemo(
-    () => (
-      <>
-        {index.name}
-        {renderBadges(index, extensionsService)}
-      </>
-    ),
-    [extensionsService, index]
-  );
-
   const appMenu = useMemo<AppMenuConfig>(
     () => ({
       primaryActionItem: discoverLocator
@@ -266,38 +252,6 @@ export const DetailsPageContent: FunctionComponent<Props> = ({
         badges={badges}
         menu={appMenu}
         padding={{ bleed: 'l' }}
-        fallback={{
-          'data-test-subj': 'indexDetailsHeader',
-          pageTitle: fallbackPageTitle,
-          rightSideItems: [
-            <ManageIndexButton
-              index={index}
-              reloadIndexDetails={fetchIndexDetails}
-              navigateToIndicesList={navigateToIndicesList}
-              onIndexRefresh={onIndexRefresh}
-              fill={true}
-            />,
-            <DiscoverLink indexName={index.name} asButton={true} fill={false} />,
-            <EuiButtonEmpty
-              onClick={() =>
-                openWiredConnectionDetails({
-                  props: { options: { defaultTabId: 'apiKeys' } },
-                }).catch((error) => {
-                  notificationService.showDangerToast(
-                    error?.body?.message ?? error?.message ?? 'An unexpected error occurred'
-                  );
-                })
-              }
-              iconType="plugs"
-              data-test-subj="openConnectionDetails"
-            >
-              <FormattedMessage
-                id="xpack.idxMgmt.indexDetails.connectionDetailsButtonLabel"
-                defaultMessage="Connection details"
-              />
-            </EuiButtonEmpty>,
-          ],
-        }}
       />
       <EuiSpacer size="l" />
       {indexErrors.length > 0 && <IndexErrorCallout errors={indexErrors} />}
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx
index 549f73a46472e..3fb91dd9364a8 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/index.tsx
@@ -5,13 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiEmptyPrompt,
-  EuiLink,
-  EuiLoadingElastic,
-} from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLoadingElastic } from '@elastic/eui';
 import type { AppHeaderMenu } from '@kbn/app-header';
 import { usePerformanceContext } from '@kbn/ebt-tools';
 import { i18n } from '@kbn/i18n';
@@ -31,10 +25,7 @@ import { StreamsListEmptyPrompt } from './streams_list_empty_prompt';
 import { StreamsSettingsFlyout } from './streams_settings_flyout';
 import { StreamsTreeTable } from './tree_table';
 import { LegacyLogsDeprecationCallout } from './legacy_logs_deprecation_callout';
-import {
-  CreateQueryStreamFlyout,
-  CreateQueryStreamFlyoutContent,
-} from '../query_streams/create_query_stream_flyout';
+import { CreateQueryStreamFlyoutContent } from '../query_streams/create_query_stream_flyout';
 import { getFormattedError } from '../../util/errors';
 
 export function StreamListView() {
@@ -173,16 +164,6 @@ export function StreamListView() {
       defaultMessage: 'Create Query stream',
     }
   );
-  const pageDescription = i18n.translate('xpack.streams.streamsListView.pageHeaderDescription', {
-    defaultMessage:
-      'Manage how your data is ingested, structured, and retained across all your streams.',
-  });
-  const learnMoreLabel = i18n.translate(
-    'xpack.streams.streamsListView.pageHeaderDescriptionLearnMoreLink',
-    {
-      defaultMessage: 'Learn more',
-    }
-  );
   const showSignificantEventsDiscovery =
     significantEventsDiscovery?.available && significantEventsDiscovery.enabled;
   const showQueryStreams = queryStreams?.enabled;
@@ -251,67 +232,9 @@ export function StreamListView() {
     significantEventsLabel,
   ]);
 
-  const classicHeaderActions = [
-    <EuiButtonEmpty
-      key="settings"
-      iconType="gear"
-      size="s"
-      onClick={() => setIsSettingsFlyoutOpen(true)}
-      aria-label={settingsLabel}
-    >
-      {settingsLabel}
-    </EuiButtonEmpty>,
-    <EuiButton
-      key="createClassicStream"
-      onClick={() => setIsClassicStreamCreationFlyoutOpen(true)}
-      size="s"
-      disabled={!(canManageStreamsKibana && canManageClassicElasticsearch)}
-    >
-      {createClassicStreamLabel}
-    </EuiButton>,
-    ...(showSignificantEventsDiscovery
-      ? [
-          <EuiButton
-            key="significantEventsDiscovery"
-            href={significantEventsDiscoveryHref}
-            iconType="crosshairs"
-            size="s"
-            data-test-subj="streamsSignificantEventsDiscoveryButton"
-          >
-            {significantEventsLabel}
-          </EuiButton>,
-        ]
-      : []),
-    ...(showQueryStreams
-      ? [
-          <CreateQueryStreamFlyout
-            key="createQueryStream"
-            onQueryStreamCreated={streamsListFetch.refresh}
-          />,
-        ]
-      : []),
-  ];
-  const fallbackRightSideItems = [...classicHeaderActions].reverse();
-
   return (
     <>
-      <StreamsAppHeader
-        title={pageTitle}
-        menu={menu}
-        docLink={streamsDocsLink}
-        fallback={{
-          pageTitle,
-          rightSideItems: fallbackRightSideItems,
-          description: (
-            <>
-              {pageDescription}{' '}
-              <EuiLink href={streamsDocsLink} target="_blank">
-                {learnMoreLabel}
-              </EuiLink>
-            </>
-          ),
-        }}
-      />
+      <StreamsAppHeader title={pageTitle} menu={menu} docLink={streamsDocsLink} />
       <StreamsAppPageTemplate.Body grow>
         {streamsListFetch.loading && streamsListFetch.value === undefined ? (
           <EuiEmptyPrompt
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx
index a9f5e3436e59e..3255d6b65f2d5 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/classic.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { Streams } from '@kbn/streams-schema';
-import { EuiBadgeGroup, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
+import { EuiBadgeGroup, EuiFlexGroup } from '@elastic/eui';
 import { useStreamsAppParams } from '../../../../hooks/use_streams_app_params';
 import { useStreamsPrivileges } from '../../../../hooks/use_streams_privileges';
 import { RedirectTo } from '../../../redirect_to';
@@ -114,18 +114,6 @@ export function ClassicStreamDetailManagement({
       <StreamDetailLifecycle definition={definition} refreshDefinition={refreshDefinition} />
     ),
     label: lifecycleTabLabel,
-    fallbackLabel: (
-      <EuiToolTip
-        content={i18n.translate('xpack.streams.managementTab.lifecycle.tooltip', {
-          defaultMessage:
-            'Control how long data stays in this stream. Set a custom duration or apply a shared policy.',
-        })}
-      >
-        <span data-test-subj="retentionTab" tabIndex={0}>
-          {lifecycleTabLabel}
-        </span>
-      </EuiToolTip>
-    ),
   };
 
   if (queryStreams.enabled) {
@@ -160,17 +148,6 @@ export function ClassicStreamDetailManagement({
       <StreamDetailDataQuality definition={definition} refreshDefinition={refreshDefinition} />
     ),
     label: dataQualityTabLabel,
-    fallbackLabel: (
-      <EuiToolTip
-        content={i18n.translate('xpack.streams.managementTab.dataQuality.tooltip', {
-          defaultMessage: 'View details about this classic stream’s data quality',
-        })}
-      >
-        <span data-test-subj="dataQualityTab" tabIndex={0}>
-          {dataQualityTabLabel}
-        </span>
-      </EuiToolTip>
-    ),
   };
 
   tabs.attachments = {
@@ -193,16 +170,6 @@ export function ClassicStreamDetailManagement({
         <ClassicAdvancedView definition={definition} refreshDefinition={refreshDefinition} />
       ),
       label: advancedTabLabel,
-      fallbackLabel: (
-        <EuiToolTip
-          content={i18n.translate('xpack.streams.managementTab.advanced.tooltip', {
-            defaultMessage:
-              'View technical details about this classic stream’s underlying index setup',
-          })}
-        >
-          <span tabIndex={0}>{advancedTabLabel}</span>
-        </EuiToolTip>
-      ),
     };
   }
 
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx
index b3aaa62d49e1c..c24558939cac7 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/query.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiPageHeader, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import { EuiFlexGroup, EuiPageHeader, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import type { Streams } from '@kbn/streams-schema';
@@ -104,15 +104,6 @@ export function QueryStreamDetailManagement({
       <QueryStreamsAdvancedView definition={definition} refreshDefinition={refreshDefinition} />
     ),
     label: advancedTabLabel,
-    fallbackLabel: (
-      <EuiToolTip
-        content={i18n.translate('xpack.streams.queryStreamDetailManagement.advanced.tooltip', {
-          defaultMessage: 'View technical details about this query stream’s underlying setup',
-        })}
-      >
-        <span tabIndex={0}>{advancedTabLabel}</span>
-      </EuiToolTip>
-    ),
   };
 
   if (!isValidManagementSubTab(tab) || !tabs[tab]?.content) {
@@ -138,8 +129,8 @@ export function QueryStreamDetailManagement({
             <DiscoverBadgeButton stream={definition.stream} hasDataStream spellOut />
           </EuiFlexGroup>
         }
-        tabs={Object.entries(tabs).map(([tabKey, { label, fallbackLabel }]) => ({
-          label: fallbackLabel ?? label,
+        tabs={Object.entries(tabs).map(([tabKey, { label }]) => ({
+          label,
           href: router.link('/{key}/management/{tab}', {
             path: { key, tab: tabKey },
             query: { rangeFrom, rangeTo },
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx
index 5bb2305f0bc6d..00ddd2df853b9 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wired.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { type Streams, isRoot, isDraftStream, LOGS_ROOT_STREAM_NAME } from '@kbn/streams-schema';
-import { EuiBadgeGroup, EuiCallOut, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
+import { EuiBadgeGroup, EuiCallOut, EuiFlexGroup } from '@elastic/eui';
 import { useStreamsAppParams } from '../../../../hooks/use_streams_app_params';
 import { RedirectTo } from '../../../redirect_to';
 import { StreamDetailRouting } from '../stream_detail_routing';
@@ -181,19 +181,6 @@ export function WiredStreamDetailManagement({
               />
             ),
             label: lifecycleTabLabel,
-            fallbackLabel: (
-              <EuiToolTip
-                position="top"
-                content={i18n.translate('xpack.streams.managementTab.lifecycle.tooltip', {
-                  defaultMessage:
-                    'Control how long data stays in this stream. Set a custom duration or apply a shared policy.',
-                })}
-              >
-                <span data-test-subj="retentionTab" tabIndex={0}>
-                  {lifecycleTabLabel}
-                </span>
-              </EuiToolTip>
-            ),
           },
         }
       : {}),
@@ -224,17 +211,6 @@ export function WiredStreamDetailManagement({
               />
             ),
             label: dataQualityTabLabel,
-            fallbackLabel: (
-              <EuiToolTip
-                content={i18n.translate('xpack.streams.managementTab.dataQuality.wired.tooltip', {
-                  defaultMessage: "View details about this stream's data quality",
-                })}
-              >
-                <span data-test-subj="dataQualityTab" tabIndex={0}>
-                  {dataQualityTabLabel}
-                </span>
-              </EuiToolTip>
-            ),
           },
         }
       : {}),
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
index 3a3a3910d1317..4859bcd6ac28d 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_management/wrapper.tsx
@@ -5,14 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiBetaBadge,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTourStep,
-} from '@elastic/eui';
+import { EuiBetaBadge, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import type { AppHeaderBadge, AppHeaderMenu, AppHeaderTab } from '@kbn/app-header';
 import { i18n } from '@kbn/i18n';
 import { DatasetQualityIndicator } from '@kbn/dataset-quality-plugin/public';
@@ -36,7 +29,6 @@ import { useTimeRange } from '../../../../hooks/use_time_range';
 import { calculateDataQuality } from '../../../../util/calculate_data_quality';
 import {
   ClassicStreamBadge,
-  DiscoverBadgeButton,
   DraftStreamBadge,
   LifecycleBadge,
   TimeSeriesBadge,
@@ -44,14 +36,12 @@ import {
   useDiscoverLink,
 } from '../../../stream_badges';
 import { StreamsAppHeader, StreamsAppPageTemplate } from '../../../streams_app_page_template';
-import { TAB_TO_TOUR_STEP_ID, useStreamsTour } from '../../../streams_tour';
 
 export type ManagementTabs = Record<
   string,
   {
     content: JSX.Element;
     label: string;
-    fallbackLabel?: ReactNode;
   }
 >;
 
@@ -69,7 +59,6 @@ export function Wrapper({
   const router = useStreamsAppRouter();
   const { definition } = useStreamDetail();
   const { services } = useKibana();
-  const { getStepPropsByStepId } = useStreamsTour();
   const { rangeFrom, rangeTo } = useTimeRange();
 
   const lastTrackedRef = useRef<string | null>(null);
@@ -108,7 +97,6 @@ export function Wrapper({
             query: { rangeFrom, rangeTo },
           }),
           label: currentTab.label,
-          fallbackLabel: currentTab.fallbackLabel,
           content: currentTab.content,
         },
       ];
@@ -282,48 +270,6 @@ export function Wrapper({
         },
       }
     : undefined;
-  const fallbackRightSideItems =
-    discoverLink && Streams.ingest.all.GetResponse.is(definition)
-      ? [
-          <DiscoverBadgeButton
-            key="viewInDiscover"
-            stream={definition.stream}
-            hasDataStream={definition.data_stream_exists || isDraft}
-            indexMode={definition.index_mode ?? 'standard'}
-            spellOut
-          />,
-        ]
-      : undefined;
-  const fallbackTabs = Object.entries(tabMap).map(([tabKey, { label, fallbackLabel, href }]) => {
-    const tourStepId = TAB_TO_TOUR_STEP_ID[tabKey];
-    const stepProps = tourStepId ? getStepPropsByStepId(tourStepId) : undefined;
-
-    const wrappedLabel = stepProps ? (
-      <EuiTourStep
-        step={stepProps.step}
-        stepsTotal={stepProps.stepsTotal}
-        title={stepProps.title}
-        subtitle={stepProps.subtitle}
-        content={stepProps.content}
-        anchorPosition={stepProps.anchorPosition}
-        offset={stepProps.offset}
-        maxWidth={stepProps.maxWidth}
-        isStepOpen={stepProps.isStepOpen}
-        footerAction={stepProps.footerAction}
-        onFinish={stepProps.onFinish}
-      >
-        <span>{fallbackLabel ?? label}</span>
-      </EuiTourStep>
-    ) : (
-      fallbackLabel ?? label
-    );
-
-    return {
-      label: wrappedLabel,
-      href,
-      isSelected: tab === tabKey,
-    };
-  });
   const streamsBackLabel = i18n.translate('xpack.streams.streamDetailHeader.backToStreamsLabel', {
     defaultMessage: 'Streams',
   });
@@ -336,22 +282,6 @@ export function Wrapper({
         badges={appHeaderBadges}
         tabs={appHeaderTabs}
         menu={appHeaderMenu}
-        fallback={{
-          pageTitle: (
-            <EuiFlexGroup direction="row" gutterSize="s" alignItems="center" wrap>
-              <EuiFlexItem grow={false}>{streamId}</EuiFlexItem>
-              <EuiFlexGroup alignItems="center" gutterSize="s" wrap responsive={false}>
-                {streamBadges.map(({ key, node }) => (
-                  <EuiFlexItem key={key} grow={false}>
-                    {node}
-                  </EuiFlexItem>
-                ))}
-              </EuiFlexGroup>
-            </EuiFlexGroup>
-          ),
-          rightSideItems: fallbackRightSideItems,
-          tabs: fallbackTabs,
-        }}
       />
       <StreamsAppPageTemplate.Body noPadding={tab === 'partitioning' || tab === 'processing'}>
         {topContent}
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
index 46f54dd5cd830..fdc59514a1c58 100644
--- a/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
+++ b/x-pack/platform/plugins/shared/streams_app/public/components/streams_app_page_template/index.tsx
@@ -7,11 +7,10 @@
 
 import React from 'react';
 import type { EuiPageSectionProps } from '@elastic/eui';
-import { EuiPageTemplate, useEuiTheme } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { css } from '@emotion/css';
-import { css as emotionCss } from '@emotion/react';
-import type { AppHeaderWithFallbackProps } from '@kbn/app-header';
-import { AppHeaderWithFallback } from '@kbn/app-header';
+import type { AppHeaderProps } from '@kbn/app-header';
+import { AppHeader } from '@kbn/app-header';
 
 export function StreamsAppPageTemplate({ children }: { children: React.ReactNode }) {
   return (
@@ -28,29 +27,7 @@ export function StreamsAppPageTemplate({ children }: { children: React.ReactNode
   );
 }
 
-export const StreamsAppHeader = ({ fallback, ...props }: AppHeaderWithFallbackProps) => {
-  const { euiTheme } = useEuiTheme();
-
-  return (
-    <AppHeaderWithFallback
-      fallback={
-        fallback === null
-          ? null
-          : {
-              paddingSize: 'l',
-              restrictWidth: false,
-              bottomBorder: 'extended',
-              color: 'plain',
-              css: emotionCss`
-                background: ${euiTheme.colors.backgroundBasePlain};
-              `,
-              ...fallback,
-            }
-      }
-      {...props}
-    />
-  );
-};
+export const StreamsAppHeader = (props: AppHeaderProps) => <AppHeader {...props} />;
 
 StreamsAppPageTemplate.Header = EuiPageTemplate.Header;
 StreamsAppPageTemplate.EmptyPrompt = EuiPageTemplate.EmptyPrompt;

From a12edb649a59c5a881190ebb651ba91f0534cbba Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 1 Jun 2026 11:00:22 +0200
Subject: [PATCH 77/77] merge fix

---
 .../pages/workflow_detail/ui/workflow_detail_header.test.tsx    | 2 ++
 x-pack/platform/plugins/shared/security/moon.yml                | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx
index 3e8b6e398afcd..1b949004ca065 100644
--- a/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx
+++ b/src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_header.test.tsx
@@ -68,6 +68,8 @@ jest.mock('@kbn/css-utils/public/use_memo_css', () => ({
 describe('WorkflowDetailHeader', () => {
   const defaultProps: WorkflowDetailHeaderProps = {
     isLoading: false,
+    highlightDiff: false,
+    setHighlightDiff: jest.fn(),
   };
 
   const mockWorkflow = {
diff --git a/x-pack/platform/plugins/shared/security/moon.yml b/x-pack/platform/plugins/shared/security/moon.yml
index b4c02b3ce8903..ca842b271c3ca 100644
--- a/x-pack/platform/plugins/shared/security/moon.yml
+++ b/x-pack/platform/plugins/shared/security/moon.yml
@@ -104,13 +104,13 @@ dependsOn:
   - '@kbn/mock-idp-utils'
   - '@kbn/core-user-activity-server'
   - '@kbn/core-user-activity-server-mocks'
-  - '@kbn/core-chrome-browser-components'
   - '@kbn/management-settings-ids'
   - '@kbn/deeplinks-agent-builder'
   - '@kbn/react-query'
   - '@kbn/agent-builder-common'
   - '@kbn/agent-builder-browser'
   - '@kbn/core-user-profile-common'
+  - '@kbn/core-chrome-browser-components'
 tags:
   - plugin
   - prod