1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 85c6862d629..7dccc9f0681 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import BlobViewer from '~/blob/viewer/index';
 import initBlob from '~/pages/projects/init_blob';
+import glBreadcrumb from '@gitlab-org/gitlab-ui/components/breadcrumb.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
@@ -26,4 +27,35 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
+
+  const repoBreadcrumbs = document.querySelector('.js-repo-breadcrumb');
+
+  if (repoBreadcrumbs) {
+    const { breadcrumbs, rootPath, treePath } = repoBreadcrumbs.dataset;
+    const breadcrumbTitles = breadcrumbs.split('/');
+
+    const items = [{
+      text: rootPath,
+      href: treePath,
+    }].concat(breadcrumbTitles.map((text, index) => {
+      return {
+        text,
+        href: `${treePath}/${breadcrumbTitles.slice(0, index + 1).join('/')}`,
+      };
+    }));
+
+    new Vue({
+      el: repoBreadcrumbs,
+      components: {
+        glBreadcrumb,
+      },
+      render(createElement) {
+        return createElement('gl-breadcrumb', {
+          props: {
+            items,
+          },
+        });
+      }
+    })
+  }
 });