diff --git a/x-pack/plugins/apm/public/components/routing/app_root.tsx b/x-pack/plugins/apm/public/components/routing/app_root.tsx
index 2bb387ae315ff7..8fc59a01eeca04 100644
--- a/x-pack/plugins/apm/public/components/routing/app_root.tsx
+++ b/x-pack/plugins/apm/public/components/routing/app_root.tsx
@@ -24,7 +24,7 @@ import {
 } from '../../context/apm_plugin/apm_plugin_context';
 import { LicenseProvider } from '../../context/license/license_context';
 import { UrlParamsProvider } from '../../context/url_params_context/url_params_context';
-import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
+import { useApmBreadcrumbs } from '../../hooks/use_apm_breadcrumbs';
 import { ApmPluginStartDeps } from '../../plugin';
 import { HeaderMenuPortal } from '../../../../observability/public';
 import { ApmHeaderActionMenu } from '../shared/apm_header_action_menu';
@@ -79,7 +79,7 @@ export function ApmAppRoot({
 }
 
 function MountApmHeaderActionMenu() {
-  useBreadcrumbs(apmRouteConfig);
+  useApmBreadcrumbs(apmRouteConfig);
   const { setHeaderActionMenu } = useApmPluginContext().appMountParameters;
 
   return (
diff --git a/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx b/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx
index a16f81826636ba..bcc1932dde7cbd 100644
--- a/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx
+++ b/x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx
@@ -44,6 +44,7 @@ const mockCore = {
       ml: {},
     },
     currentAppId$: new Observable(),
+    getUrlForApp: (appId: string) => '',
     navigateToUrl: (url: string) => {},
   },
   chrome: {
diff --git a/x-pack/plugins/apm/public/hooks/use_breadcrumbs.test.tsx b/x-pack/plugins/apm/public/hooks/use_apm_breadcrumbs.test.tsx
similarity index 79%
rename from x-pack/plugins/apm/public/hooks/use_breadcrumbs.test.tsx
rename to x-pack/plugins/apm/public/hooks/use_apm_breadcrumbs.test.tsx
index 64990651b52bbd..1cdb84c3247501 100644
--- a/x-pack/plugins/apm/public/hooks/use_breadcrumbs.test.tsx
+++ b/x-pack/plugins/apm/public/hooks/use_apm_breadcrumbs.test.tsx
@@ -15,14 +15,15 @@ import {
   mockApmPluginContextValue,
   MockApmPluginContextWrapper,
 } from '../context/apm_plugin/mock_apm_plugin_context';
-import { useBreadcrumbs } from './use_breadcrumbs';
+import { useApmBreadcrumbs } from './use_apm_breadcrumbs';
+import { useBreadcrumbs } from '../../../observability/public';
+
+jest.mock('../../../observability/public');
 
 function createWrapper(path: string) {
   return ({ children }: { children?: ReactNode }) => {
     const value = (produce(mockApmPluginContextValue, (draft) => {
       draft.core.application.navigateToUrl = (url: string) => Promise.resolve();
-      draft.core.chrome.docTitle.change = changeTitle;
-      draft.core.chrome.setBreadcrumbs = setBreadcrumbs;
     }) as unknown) as ApmPluginContextValue;
 
     return (
@@ -36,27 +37,18 @@ function createWrapper(path: string) {
 }
 
 function mountBreadcrumb(path: string) {
-  renderHook(() => useBreadcrumbs(apmRouteConfig), {
+  renderHook(() => useApmBreadcrumbs(apmRouteConfig), {
     wrapper: createWrapper(path),
   });
 }
 
-const changeTitle = jest.fn();
-const setBreadcrumbs = jest.fn();
-
-describe('useBreadcrumbs', () => {
-  it('changes the page title', () => {
-    mountBreadcrumb('/');
-
-    expect(changeTitle).toHaveBeenCalledWith(['APM']);
-  });
-
+describe('useApmBreadcrumbs', () => {
   test('/services/:serviceName/errors/:groupId', () => {
     mountBreadcrumb(
       '/services/opbeans-node/errors/myGroupId?kuery=myKuery&rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0'
     );
 
-    expect(setBreadcrumbs).toHaveBeenCalledWith(
+    expect(useBreadcrumbs).toHaveBeenCalledWith(
       expect.arrayContaining([
         expect.objectContaining({
           text: 'APM',
@@ -81,20 +73,12 @@ describe('useBreadcrumbs', () => {
         expect.objectContaining({ text: 'myGroupId', href: undefined }),
       ])
     );
-
-    expect(changeTitle).toHaveBeenCalledWith([
-      'myGroupId',
-      'Errors',
-      'opbeans-node',
-      'Services',
-      'APM',
-    ]);
   });
 
   test('/services/:serviceName/errors', () => {
     mountBreadcrumb('/services/opbeans-node/errors?kuery=myKuery');
 
-    expect(setBreadcrumbs).toHaveBeenCalledWith(
+    expect(useBreadcrumbs).toHaveBeenCalledWith(
       expect.arrayContaining([
         expect.objectContaining({
           text: 'APM',
@@ -111,19 +95,12 @@ describe('useBreadcrumbs', () => {
         expect.objectContaining({ text: 'Errors', href: undefined }),
       ])
     );
-
-    expect(changeTitle).toHaveBeenCalledWith([
-      'Errors',
-      'opbeans-node',
-      'Services',
-      'APM',
-    ]);
   });
 
   test('/services/:serviceName/transactions', () => {
     mountBreadcrumb('/services/opbeans-node/transactions?kuery=myKuery');
 
-    expect(setBreadcrumbs).toHaveBeenCalledWith(
+    expect(useBreadcrumbs).toHaveBeenCalledWith(
       expect.arrayContaining([
         expect.objectContaining({
           text: 'APM',
@@ -140,13 +117,6 @@ describe('useBreadcrumbs', () => {
         expect.objectContaining({ text: 'Transactions', href: undefined }),
       ])
     );
-
-    expect(changeTitle).toHaveBeenCalledWith([
-      'Transactions',
-      'opbeans-node',
-      'Services',
-      'APM',
-    ]);
   });
 
   test('/services/:serviceName/transactions/view?transactionName=my-transaction-name', () => {
@@ -154,7 +124,7 @@ describe('useBreadcrumbs', () => {
       '/services/opbeans-node/transactions/view?kuery=myKuery&transactionName=my-transaction-name'
     );
 
-    expect(setBreadcrumbs).toHaveBeenCalledWith(
+    expect(useBreadcrumbs).toHaveBeenCalledWith(
       expect.arrayContaining([
         expect.objectContaining({
           text: 'APM',
@@ -179,13 +149,5 @@ describe('useBreadcrumbs', () => {
         }),
       ])
     );
-
-    expect(changeTitle).toHaveBeenCalledWith([
-      'my-transaction-name',
-      'Transactions',
-      'opbeans-node',
-      'Services',
-      'APM',
-    ]);
   });
 });
diff --git a/x-pack/plugins/apm/public/hooks/use_breadcrumbs.ts b/x-pack/plugins/apm/public/hooks/use_apm_breadcrumbs.ts
similarity index 85%
rename from x-pack/plugins/apm/public/hooks/use_breadcrumbs.ts
rename to x-pack/plugins/apm/public/hooks/use_apm_breadcrumbs.ts
index d907c27319d260..d64bcadf795775 100644
--- a/x-pack/plugins/apm/public/hooks/use_breadcrumbs.ts
+++ b/x-pack/plugins/apm/public/hooks/use_apm_breadcrumbs.ts
@@ -7,14 +7,15 @@
 
 import { History, Location } from 'history';
 import { ChromeBreadcrumb } from 'kibana/public';
-import { MouseEvent, ReactNode, useEffect } from 'react';
+import { MouseEvent } from 'react';
 import {
+  match as Match,
   matchPath,
   RouteComponentProps,
   useHistory,
-  match as Match,
   useLocation,
 } from 'react-router-dom';
+import { useBreadcrumbs } from '../../../observability/public';
 import { APMRouteDefinition, BreadcrumbTitle } from '../application/routes';
 import { getAPMHref } from '../components/shared/Links/apm/APMLink';
 import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
@@ -164,33 +165,17 @@ function routeDefinitionsToBreadcrumbs({
   return breadcrumbs;
 }
 
-/**
- * Get an array for a page title from a list of breadcrumbs
- */
-function getTitleFromBreadcrumbs(breadcrumbs: ChromeBreadcrumb[]): string[] {
-  function removeNonStrings(item: ReactNode): item is string {
-    return typeof item === 'string';
-  }
-
-  return breadcrumbs
-    .map(({ text }) => text)
-    .reverse()
-    .filter(removeNonStrings);
-}
-
 /**
  * Determine the breadcrumbs from the routes, set them, and update the page
  * title when the route changes.
  */
-export function useBreadcrumbs(routes: APMRouteDefinition[]) {
+export function useApmBreadcrumbs(routes: APMRouteDefinition[]) {
   const history = useHistory();
   const location = useLocation();
   const { search } = location;
   const { core } = useApmPluginContext();
   const { basePath } = core.http;
   const { navigateToUrl } = core.application;
-  const { docTitle, setBreadcrumbs } = core.chrome;
-  const changeTitle = docTitle.change;
 
   function wrappedGetAPMHref(path: string) {
     return getAPMHref({ basePath, path, search });
@@ -206,10 +191,6 @@ export function useBreadcrumbs(routes: APMRouteDefinition[]) {
     wrappedGetAPMHref,
     navigateToUrl,
   });
-  const title = getTitleFromBreadcrumbs(breadcrumbs);
 
-  useEffect(() => {
-    changeTitle(title);
-    setBreadcrumbs(breadcrumbs);
-  }, [breadcrumbs, changeTitle, location, title, setBreadcrumbs]);
+  useBreadcrumbs(breadcrumbs);
 }