1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
new file mode 100644
index 00000000000..6eca015036f
--- /dev/null
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -0,0 +1,61 @@
+<script>
+import getRefMixin from '../mixins/get_ref';
+import getProjectShortPath from '../queries/getProjectShortPath.graphql';
+
+export default {
+  apollo: {
+    projectShortPath: {
+      query: getProjectShortPath,
+    },
+  },
+  mixins: [getRefMixin],
+  props: {
+    currentPath: {
+      type: String,
+      required: false,
+      default: '/',
+    },
+  },
+  data() {
+    return {
+      projectShortPath: '',
+    };
+  },
+  computed: {
+    pathLinks() {
+      return this.currentPath
+        .split('/')
+        .filter(p => p !== '')
+        .reduce(
+          (acc, name, i) => {
+            const path = `${i > 0 ? acc[i].path : ''}/${name}`;
+
+            return acc.concat({
+              name,
+              path,
+              to: `/tree/${this.ref}${path}`,
+            });
+          },
+          [{ name: this.projectShortPath, path: '/', to: `/tree/${this.ref}` }],
+        );
+    },
+  },
+  methods: {
+    isLast(i) {
+      return i === this.pathLinks.length - 1;
+    },
+  },
+};
+</script>
+
+<template>
+  <nav :aria-label="__('Files breadcrumb')">
+    <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>
+      </li>
+    </ol>
+  </nav>
+</template>