diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 1fdc0e863189217a9d210f0a836f3379eebd7e41..b4fdb8fb295b767e98e01c21e724729d04990197 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -26,6 +26,8 @@ import HighlightWorker from '~/vue_shared/components/source_viewer/workers/highl
 import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 import { InternalEvents } from '~/tracking';
 import { initFindFileShortcut } from '~/projects/behaviors';
+import initHeaderApp from '~/repository/init_header_app';
+import createRouter from '~/repository/router';
 
 Vue.use(Vuex);
 Vue.use(VueApollo);
@@ -35,8 +37,6 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-const router = new VueRouter({ mode: 'history' });
-
 const viewBlobEl = document.querySelector('#js-view-blob-app');
 
 const initRefSwitcher = () => {
@@ -84,6 +84,9 @@ if (viewBlobEl) {
     canDownloadCode,
     ...dataset
   } = viewBlobEl.dataset;
+  const router = createRouter(projectPath, originalBranch);
+
+  initHeaderApp({ router, isBlobView: true });
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -215,7 +218,7 @@ if (treeHistoryLinkEl) {
   // eslint-disable-next-line no-new
   new Vue({
     el: treeHistoryLinkEl,
-    router,
+    router: new VueRouter({ mode: 'history' }),
     render(h) {
       const url = generateHistoryUrl(
         historyLink,
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 8c05fabbb24289096ff91f7cc86d08dc1c44fba8..2adbc94b99e68abd08f2fe8f9548a34a10580ecf 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -28,7 +28,7 @@ if (document.querySelector('.blob-viewer')) {
   import(/* webpackChunkName: 'blobViewer' */ '~/blob/viewer')
     .then(({ BlobViewer }) => {
       new BlobViewer(); // eslint-disable-line no-new
-      initHeaderApp(true);
+      initHeaderApp({ isReadmeView: true });
     })
     .catch(() => {});
 }
diff --git a/app/assets/javascripts/repository/components/header_area/blob_controls.vue b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
index 2202faf7b840fc4c8eafc722f877148721163a77..ddc5af4f43a937b242c6384e334132b8a37e1bba 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -157,7 +157,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="showBlobControls" class="gl-flex gl-items-baseline gl-gap-3">
+  <div v-if="showBlobControls" class="gl-flex gl-flex-wrap gl-items-baseline gl-gap-3">
     <gl-button
       v-gl-tooltip.html="findFileTooltip"
       :aria-keyshortcuts="findFileShortcutKey"
@@ -181,7 +181,7 @@ export default {
       data-testid="history"
       :href="blobInfo.historyPath"
       :class="$options.buttonClassList"
-      class="gl-block sm:gl-hidden"
+      class="sm:gl-hidden"
     >
       {{ $options.i18n.history }}
     </gl-button>
diff --git a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
index b53607f08b7c07a00389205318cfd4dc68b8716c..1f1c2f24c7aca0d4c795a67cfd6c68852591970f 100644
--- a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlDisclosureDropdown, GlModalDirective } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlModalDirective, GlLink } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
 import { joinPaths, escapeFileUrl, buildURLwithRefType } from '~/lib/utils/url_utility';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
@@ -19,6 +19,7 @@ export default {
     GlDisclosureDropdown,
     UploadBlobModal,
     NewDirectoryModal,
+    GlLink,
   },
   apollo: {
     projectShortPath: {
@@ -48,6 +49,9 @@ export default {
     projectRootPath: {
       default: '',
     },
+    isBlobView: {
+      default: false,
+    },
   },
   props: {
     currentPath: {
@@ -161,15 +165,27 @@ export default {
             return acc.concat({
               name,
               path,
-              to: buildURLwithRefType({ path: to, refType: this.refType }),
+              to: !this.isBlobView
+                ? buildURLwithRefType({ path: to, refType: this.refType })
+                : null,
+              url: buildURLwithRefType({
+                path: joinPaths(this.projectPath, to),
+                refType: this.refType,
+              }),
             });
           },
           [
             {
               name: this.projectShortPath,
               path: '/',
-              to: buildURLwithRefType({
-                path: joinPaths('/-/tree', this.escapedRef),
+              to: !this.isBlobView
+                ? buildURLwithRefType({
+                    path: joinPaths('/-/tree', this.escapedRef),
+                    refType: this.refType,
+                  })
+                : null,
+              url: buildURLwithRefType({
+                path: joinPaths(this.projectPath, '/-/tree', this.escapedRef),
                 refType: this.refType,
               }),
             },
@@ -293,9 +309,10 @@ export default {
   >
     <ol class="breadcrumb repo-breadcrumb">
       <li v-for="(link, i) in pathLinks" :key="i" class="breadcrumb-item">
-        <router-link :to="link.to" :aria-current="isLast(i) ? 'page' : null">
-          {{ link.name }}
-        </router-link>
+        <gl-link :to="link.to" :href="link.url" :aria-current="isLast(i) ? 'page' : null">
+          <strong v-if="isLast(i)">{{ link.name }}</strong>
+          <span v-else>{{ link.name }}</span>
+        </gl-link>
       </li>
       <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
         <gl-disclosure-dropdown
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index adbcdf33596c7300ee9d21a51dd597e20d2f538f..bc5d63bfaecda99687fb1a93a5b500a6d43deb66 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -207,7 +207,7 @@ export default function setupVueRepositoryList() {
     });
   };
 
-  initHeaderApp();
+  initHeaderApp({ router });
   initCodeDropdown();
   initLastCommitApp();
   initBlobControlsApp();
diff --git a/app/assets/javascripts/repository/init_header_app.js b/app/assets/javascripts/repository/init_header_app.js
index d0329286f35bc6ee1da69f6a693108213805b679..d5fd179b2e6ae46fb66745ca68b1051c761970b4 100644
--- a/app/assets/javascripts/repository/init_header_app.js
+++ b/app/assets/javascripts/repository/init_header_app.js
@@ -1,10 +1,35 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import apolloProvider from './graphql';
+import projectShortPathQuery from './queries/project_short_path.query.graphql';
+import projectPathQuery from './queries/project_path.query.graphql';
 import HeaderArea from './components/header_area.vue';
 import createRouter from './router';
+import refsQuery from './queries/ref.query.graphql';
 
-export default function initHeaderApp(isReadmeView = false) {
+const initClientQueries = ({ projectPath, projectShortPath, ref, escapedRef }) => {
+  // These queries are used in the breadcrumbs component as GraphQL client queries.
+
+  if (projectPath)
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: projectPathQuery,
+      data: { projectPath },
+    });
+
+  if (projectShortPath)
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: projectShortPathQuery,
+      data: { projectShortPath },
+    });
+
+  if (ref || escapedRef)
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: refsQuery,
+      data: { ref, escapedRef },
+    });
+};
+
+export default function initHeaderApp({ router, isReadmeView = false, isBlobView = false }) {
   const headerEl = document.getElementById('js-repository-blob-header-app');
   if (headerEl) {
     const {
@@ -27,8 +52,11 @@ export default function initHeaderApp(isReadmeView = false) {
       projectRootPath,
       comparePath,
       projectPath,
+      projectShortPath,
     } = headerEl.dataset;
 
+    initClientQueries({ projectPath, projectShortPath, ref, escapedRef });
+
     // eslint-disable-next-line no-new
     new Vue({
       el: headerEl,
@@ -47,11 +75,13 @@ export default function initHeaderApp(isReadmeView = false) {
         uploadPath: breadcrumbsUploadPath,
         newDirPath: breadcrumbsNewDirPath,
         projectRootPath,
+        projectShortPath,
         comparePath,
         isReadmeView,
+        isBlobView,
       },
       apolloProvider,
-      router: createRouter(projectPath, escapedRef),
+      router: router || createRouter(projectPath, escapedRef),
       render(h) {
         return h(HeaderArea, {
           props: {
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 1cbf67429803ebdcb1d86f740055e39b3ec6dee7..91c82bdea7625819ae9ec66de01844c1d829c2b4 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -302,6 +302,21 @@ def vue_blob_app_data(project, blob, ref)
       can_download_code: can?(current_user, :download_code, project).to_s
     }
   end
+
+  def vue_blob_header_app_data(project, blob, ref)
+    {
+      blob_path: blob.path,
+      breadcrumbs: breadcrumb_data_attributes,
+      escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref),
+      history_link: project_commits_path(project, ref),
+      project_id: project.id,
+      project_root_path: project_path(project),
+      project_path: project.full_path,
+      project_short_path: project.path,
+      ref_type: @ref_type.to_s,
+      ref: ref
+    }
+  end
 end
 
 BlobHelper.prepend_mod_with('BlobHelper')
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index e84b958f92187bc9273d6842f71056851b5bfb6d..cfa2b236728dfd779c74fc8653fb1eeba5a91a09 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -1,4 +1,3 @@
-= render "projects/blob/breadcrumb", blob: blob
 - project = @project.present(current_user: current_user)
 - ref = local_assigns[:ref] || @ref
 - expanded = params[:expanded].present?
@@ -7,6 +6,11 @@
 - if blob.rich_viewer && blob.extension != 'geojson'
   - add_page_startup_api_call local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: blob.rich_viewer.type, format: :json)) }
 
+- if params[:common_repository_blob_header_app] == 'true'
+  #js-repository-blob-header-app{ data: vue_blob_header_app_data(project, blob, ref) }
+- else
+  = render "projects/blob/breadcrumb", blob: blob
+
 - if project.forked?
   #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
 
diff --git a/spec/frontend/repository/components/header_area/breadcrumbs_spec.js b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
index 92f888c678bc9ae8cbaac0b71e2b19d0b06acede..f9653521b50895adccd6d2ff6a889219d0479ac8 100644
--- a/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
@@ -1,6 +1,6 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlDisclosureDropdown, GlDisclosureDropdownGroup } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownGroup, GlLink } from '@gitlab/ui';
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
@@ -57,6 +57,7 @@ describe('Repository breadcrumbs component', () => {
       apolloProvider,
       provide: {
         projectRootPath: TEST_PROJECT_PATH,
+        isBlobView: extraProps.isBlobView,
       },
       propsData: {
         currentPath,
@@ -79,7 +80,7 @@ describe('Repository breadcrumbs component', () => {
   const findDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup);
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
   const findNewDirectoryModal = () => wrapper.findComponent(NewDirectoryModal);
-  const findRouterLink = () => wrapper.findAllComponents(RouterLinkStub);
+  const findRouterLinks = () => wrapper.findAllComponents(GlLink);
 
   beforeEach(() => {
     permissionsQuerySpy = jest.fn().mockResolvedValue(createPermissionsQueryResponse());
@@ -105,7 +106,7 @@ describe('Repository breadcrumbs component', () => {
   `('renders $linkCount links for path $path', ({ path, linkCount }) => {
     factory(path);
 
-    expect(findRouterLink().length).toEqual(linkCount);
+    expect(findRouterLinks().length).toEqual(linkCount);
   });
 
   it.each`
@@ -118,20 +119,20 @@ describe('Repository breadcrumbs component', () => {
     'links to the correct router path when routeName is $routeName',
     ({ routeName, path, linkTo }) => {
       factory(path, {}, { name: routeName });
-      expect(findRouterLink().at(3).props('to')).toEqual(linkTo);
+      expect(findRouterLinks().at(3).attributes('to')).toEqual(linkTo);
     },
   );
 
   it('escapes hash in directory path', () => {
     factory('app/assets/javascripts#');
 
-    expect(findRouterLink().at(3).props('to')).toEqual('/-/tree/app/assets/javascripts%23');
+    expect(findRouterLinks().at(3).attributes('to')).toEqual('/-/tree/app/assets/javascripts%23');
   });
 
   it('renders last link as active', () => {
     factory('app/assets');
 
-    expect(findRouterLink().at(2).attributes('aria-current')).toEqual('page');
+    expect(findRouterLinks().at(2).attributes('aria-current')).toEqual('page');
   });
 
   it('does not render add to tree dropdown when permissions are false', async () => {
@@ -244,4 +245,18 @@ describe('Repository breadcrumbs component', () => {
       expect(findDropdownGroup().exists()).toBe(false);
     });
   });
+
+  describe('link rendering', () => {
+    it('passes `href` to GlLink when isBlobView is true', () => {
+      factory('/', { isBlobView: true });
+
+      expect(findRouterLinks().at(0).attributes('href')).toBe('/test-project/path/-/tree');
+    });
+
+    it('passes `to` to GlLink when isBlobView is false', () => {
+      factory('/', { isBlobView: false });
+
+      expect(findRouterLinks().at(0).attributes('to')).toBe('/-/tree');
+    });
+  });
 });
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index 5027ec805ffe62e9b7ae77f0dae9c3f073e6b085..7bf6fc7300e4cbcca5412a225fc6dbfd8012baaa 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -5,6 +5,7 @@
 RSpec.describe BlobHelper do
   include TreeHelper
   include FakeBlobHelpers
+  include Devise::Test::ControllerHelpers
 
   describe "#sanitize_svg_data" do
     let(:input_svg_path) { File.join(Rails.root, 'spec', 'fixtures', 'unsanitized.svg') }
@@ -477,4 +478,34 @@
       expect(rendered_button).to have_selector('button[data-action="edit"]')
     end
   end
+
+  describe '#vue_blob_header_app_data' do
+    let_it_be(:project) { create(:project) }
+    let_it_be(:blob) { fake_blob(path: 'README.md') }
+    let(:ref) { 'main' }
+    let(:ref_type) { :branch }
+    let(:breadcrumb_data) { { title: 'README.md', 'is-last': true } }
+
+    before do
+      assign(:project, project)
+      assign(:ref, ref)
+      assign(:ref_type, ref_type)
+      allow(helper).to receive(:breadcrumb_data_attributes).and_return(breadcrumb_data)
+    end
+
+    it 'returns data related to blob header' do
+      expect(helper.vue_blob_header_app_data(project, blob, ref)).to include({
+        blob_path: blob.path,
+        breadcrumbs: breadcrumb_data,
+        escaped_ref: ref,
+        history_link: project_commits_path(project, ref),
+        project_id: project.id,
+        project_root_path: project_path(project),
+        project_path: project.full_path,
+        project_short_path: project.path,
+        ref_type: ref_type.to_s,
+        ref: ref
+      })
+    end
+  end
 end