diff --git a/ee/app/assets/javascripts/ci/secrets/components/secrets_breadcrumbs.vue b/ee/app/assets/javascripts/ci/secrets/components/secrets_breadcrumbs.vue
index 9d6f3d12901dce9e9e2ec84b81650e0c49906866..8db4040a793e281147b1c324e39028eca556c275 100644
--- a/ee/app/assets/javascripts/ci/secrets/components/secrets_breadcrumbs.vue
+++ b/ee/app/assets/javascripts/ci/secrets/components/secrets_breadcrumbs.vue
@@ -6,6 +6,13 @@ export default {
   components: {
     GlBreadcrumb,
   },
+  props: {
+    staticBreadcrumbs: {
+      type: Object,
+      default: () => ({ items: [] }),
+      required: false,
+    },
+  },
   computed: {
     rootRoute() {
       const route = this.$router.options.routes.find((r) => r.meta.isRoot);
@@ -40,7 +47,9 @@ export default {
         });
       }
 
-      return crumbs;
+      const staticCrumbs = this.staticBreadcrumbs.items;
+
+      return [...staticCrumbs, ...crumbs];
     },
   },
 };
diff --git a/ee/app/assets/javascripts/ci/secrets/index.js b/ee/app/assets/javascripts/ci/secrets/index.js
index 3c07eb702e53003c1415eabd6b0edd66e9560353..07c618b1e566fbb9323058d42fae9a8db39b9246 100644
--- a/ee/app/assets/javascripts/ci/secrets/index.js
+++ b/ee/app/assets/javascripts/ci/secrets/index.js
@@ -20,7 +20,16 @@ const initSecretsApp = (el, app, props, basePath) => {
   const router = createRouter(basePath, props);
 
   if (window.location.href.includes(basePath)) {
-    injectVueAppBreadcrumbs(router, SecretsBreadcrumbs);
+    injectVueAppBreadcrumbs(
+      router,
+      SecretsBreadcrumbs,
+      null,
+      {},
+      {
+        // cf. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/186906
+        singleNavOptIn: true,
+      },
+    );
   }
 
   return new Vue({
diff --git a/ee/spec/frontend/ci/secrets/components/secrets_breadcrumbs_spec.js b/ee/spec/frontend/ci/secrets/components/secrets_breadcrumbs_spec.js
index 99048163e49121e970ef633c3af760880b006162..f8147339a4976a528bcf8988985c71ae06cf4f55 100644
--- a/ee/spec/frontend/ci/secrets/components/secrets_breadcrumbs_spec.js
+++ b/ee/spec/frontend/ci/secrets/components/secrets_breadcrumbs_spec.js
@@ -28,10 +28,13 @@ describe('SecretsBreadcrumbs', () => {
 
   const findBreadcrumbs = () => wrapper.findComponent(GlBreadcrumb);
 
-  const createWrapper = () => {
+  const createWrapper = (props = {}) => {
     router = createRouter('/-/secrets', defaultProps);
 
-    wrapper = shallowMount(SecretsBreadcrumbs, { router });
+    wrapper = shallowMount(SecretsBreadcrumbs, {
+      router,
+      propsData: props,
+    });
   };
 
   beforeEach(() => {
@@ -82,4 +85,20 @@ describe('SecretsBreadcrumbs', () => {
   it('should disable auto-resize behavior', () => {
     expect(findBreadcrumbs().props('autoResize')).toEqual(false);
   });
+
+  it('should include static breadcrumbs before dynamic breadcrumbs', () => {
+    const staticBreadcrumbs = {
+      items: [
+        { text: 'Static 1', href: '/static1' },
+        { text: 'Static 2', href: '/static2' },
+      ],
+    };
+
+    createWrapper({ staticBreadcrumbs });
+
+    expect(findBreadcrumbs().props('items')).toStrictEqual([
+      ...staticBreadcrumbs.items,
+      rootBreadcrumb,
+    ]);
+  });
 });
diff --git a/ee/spec/frontend/ci/secrets/index_spec.js b/ee/spec/frontend/ci/secrets/index_spec.js
index c88a662952ce235a5e27a1c6913430d14bc9b59a..2c3d6f8abadc8177359c60abbcd80c666063706d 100644
--- a/ee/spec/frontend/ci/secrets/index_spec.js
+++ b/ee/spec/frontend/ci/secrets/index_spec.js
@@ -35,7 +35,15 @@ describe('initProjectSecretsApp', () => {
     });
 
     it('injects breadcrumbs', () => {
-      expect(injectVueAppBreadcrumbs).toHaveBeenCalledWith(expect.any(Object), SecretsBreadcrumbs);
+      expect(injectVueAppBreadcrumbs).toHaveBeenCalledWith(
+        expect.any(Object),
+        SecretsBreadcrumbs,
+        null,
+        {},
+        {
+          singleNavOptIn: true,
+        },
+      );
     });
   });
 });