diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs.vue b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs.vue
index 236a0e454ea7a596fe33e91b5779d546df5740d9..232cdc9e5a5bd306c1e1745ed2010679983a5e4a 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs.vue
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs.vue
@@ -5,6 +5,13 @@ export default {
   components: {
     GlBreadcrumb,
   },
+  props: {
+    staticBreadcrumbs: {
+      type: Object,
+      default: () => ({ items: [] }),
+      required: false,
+    },
+  },
   computed: {
     rootRoute() {
       return this.$router.options.routes.find((r) => r.meta.root);
@@ -38,7 +45,8 @@ export default {
         });
       }
 
-      return crumbs;
+      const staticCrumbs = this.staticBreadcrumbs.items;
+      return [...staticCrumbs, ...crumbs];
     },
   },
 };
diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/index.js b/ee/app/assets/javascripts/analytics/analytics_dashboards/index.js
index e9235e6ffc863a83a0358a346e5ba8cd9bcc0756..4fc0e248529e4efc61e70fd55076aac1f5e1f6fb 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/index.js
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/index.js
@@ -101,7 +101,16 @@ export default () => {
     canCreateNewDashboard,
   });
 
-  injectVueAppBreadcrumbs(router, AnalyticsDashboardsBreadcrumbs);
+  injectVueAppBreadcrumbs(
+    router,
+    AnalyticsDashboardsBreadcrumbs,
+    null,
+    {},
+    {
+      // Cf. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/186906
+      singleNavOptIn: true,
+    },
+  );
 
   return new Vue({
     el,
diff --git a/ee/spec/frontend/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs_spec.js b/ee/spec/frontend/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs_spec.js
index 865b0ac4f9f6df02ef1967870dfe094699dcbc4c..5df419efea5f0c7748f2e368e976b6222545061d 100644
--- a/ee/spec/frontend/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs_spec.js
+++ b/ee/spec/frontend/analytics/analytics_dashboards/components/analytics_dashboards_breadcrumbs_spec.js
@@ -24,10 +24,13 @@ describe('AnalyticsDashboardsBreadcrumbs', () => {
 
   const findBreadcrumbs = () => wrapper.findComponent(GlBreadcrumb);
 
-  const createWrapper = () => {
+  const createWrapper = (props = {}) => {
     router = createRouter(base, breadcrumbState);
 
-    wrapper = shallowMount(AnalyticsDashboardsBreadcrumbs, { router });
+    wrapper = shallowMount(AnalyticsDashboardsBreadcrumbs, {
+      router,
+      propsData: props,
+    });
   };
 
   describe('when mounted', () => {
@@ -99,4 +102,23 @@ describe('AnalyticsDashboardsBreadcrumbs', () => {
       expect(findBreadcrumbs().props('autoResize')).toEqual(false);
     });
   });
+
+  describe('when static breadcrumbs are provided', () => {
+    it('should render the static breadcrumbs', async () => {
+      const staticBreadcrumb = { text: 'Static breadcrumb', href: '/static' };
+      createWrapper({
+        staticBreadcrumbs: { items: [staticBreadcrumb] },
+      });
+      await router.push('/data-explorer');
+
+      expect(findBreadcrumbs().props('items')).toStrictEqual([
+        staticBreadcrumb,
+        rootBreadcrumb,
+        {
+          text: 'Data explorer',
+          to: undefined,
+        },
+      ]);
+    });
+  });
 });