diff --git a/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js b/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js
index 548c350d8f51a181ddf3ee5b26ffc55688572927..585f91407f364a53a1f09c6cbee7dffabfccf7c1 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js
+++ b/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js
@@ -80,7 +80,13 @@ export default () => {
     defaultClient: createDefaultClient(),
   });
 
-  injectVueAppBreadcrumbs(router, ComplianceDashboardBreadcrumbs);
+  injectVueAppBreadcrumbs(
+    router,
+    ComplianceDashboardBreadcrumbs,
+    null,
+    {},
+    { singleNavOptIn: true },
+  );
 
   return new Vue({
     el,
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue b/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue
index 18f646e151ba0362b8bf4047e9c9af4bcf43d16e..f82d4cf613cad8c852d98166ea672b3bacb26ad2 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue
@@ -17,6 +17,13 @@ export default {
   components: {
     GlBreadcrumb,
   },
+  props: {
+    staticBreadcrumbs: {
+      type: Object,
+      default: () => ({ items: [] }),
+      required: false,
+    },
+  },
   computed: {
     rootRoute() {
       return {
@@ -77,7 +84,7 @@ export default {
       }
     },
     breadcrumbs() {
-      const breadCrumbs = [this.rootRoute];
+      const breadCrumbs = [...this.staticBreadcrumbs.items, this.rootRoute];
 
       if (this.activeTabRoute) breadCrumbs.push(this.activeTabRoute);
       if (this.actionRoute) breadCrumbs.push(this.actionRoute);
diff --git a/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js b/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js
index c0185ce273187eaa37d0d5cb5e25f80104e6455e..5a1b504ff1adbf6aa85671deb1e4074e3b9d0048 100644
--- a/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js
@@ -49,21 +49,31 @@ describe('ComplianceDashboardBreadcrumbs', () => {
     ],
   };
 
-  const createComponent = ($route) => {
+  const createComponent = ($route, props = {}) => {
     wrapper = shallowMountExtended(ComplianceDashboardBreadcrumbs, {
       mocks: {
         $route,
       },
+      propsData: props,
     });
   };
 
   const findGlBreadcrumb = () => wrapper.findComponent(GlBreadcrumb);
 
   describe.each(mockedRoutes)('when route path is $fullPath', ({ name, fullPath }) => {
-    it('passess the correct breadcrumbs items to GlBreadcrumb', () => {
-      createComponent({ name, fullPath });
+    it('passes the correct breadcrumbs items to GlBreadcrumb', () => {
+      const staticBreadcrumb = { text: 'Static breadcrumb', href: '/static' };
+      createComponent(
+        { name, fullPath },
+        {
+          staticBreadcrumbs: { items: [staticBreadcrumb] },
+        },
+      );
 
-      expect(findGlBreadcrumb().props('items')).toMatchObject(breadcrumbItemsDictionary[name]);
+      expect(findGlBreadcrumb().props('items')).toStrictEqual([
+        staticBreadcrumb,
+        ...breadcrumbItemsDictionary[name],
+      ]);
     });
   });
 });