diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
new file mode 100644
index 0000000000..dc3c014684
--- /dev/null
+++ b/resources/js/processes-catalogue/components/Breadcrumbs.vue
@@ -0,0 +1,62 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb bg-transparent p-0 mb-3">
+      <li class="breadcrumb-item">
+        <a href="/" :aria-label="$t('Home')">
+          <i class="fas fa-home" />
+        </a>
+      </li>
+
+      <li class="breadcrumb-item">
+        <a href="/processes-catalogue" :aria-label="$t('Home')">
+          {{ $t('Processes') }}
+        </a>
+      </li>
+
+      <li v-if="category" class="breadcrumb-item">
+        <a :href="categoryRoute" :aria-label="category">
+          {{ category }}
+        </a>
+      </li>
+
+      <li v-if="process" class="breadcrumb-item">
+        {{ process }}
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+export default {
+  router: window.ProcessMaker.Router,
+  props: ["process", "categoryRoute", "category"],
+  data() {
+    return {
+      list: [],
+      loading: false,
+    };
+  },
+  mounted() {
+    this.list = this.transform(this.routes);
+  },
+  methods: {
+    isActive(index) {
+      return index == (this.list.length - 1);
+    },
+    updateRoutes(routes) {
+      this.list = routes;
+    },
+    transform(routes) {
+      let list = [];
+      Object.entries(routes).forEach(([title, link]) => {
+        list.push({
+          title: title,
+          link: link,
+          router: false
+        });
+      });
+      return list;
+    }
+  },
+};
+</script>
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index b245fe3710..f140734c3a 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -1,32 +1,35 @@
 <template>
-  <div class="d-flex w-100">
-    <div class="w-25">
-      <h4> {{ $t('Processes Browser') }} </h4>
-    </div>
-    <div class="w-100">
-      <div v-if="!fields.length" class="d-flex justify-content-center py-5 w-100">
-        <div>
-          <div class="d-flex justify-content-center my-5">
-            <img
-              class="image d-flex"
-              src="/img/processes-catalogue-empty.svg"
-              alt="recent projects"
-            >
+  <div>
+    <breadcrumbs />
+    <div class="d-flex w-100">
+      <div class="w-25">
+        <h4> {{ $t('Processes Browser') }} </h4>
+      </div>
+      <div class="w-100">
+        <div v-if="!fields.length" class="d-flex justify-content-center py-5 w-100">
+          <div>
+            <div class="d-flex justify-content-center my-5">
+              <img
+                class="image d-flex"
+                src="/img/processes-catalogue-empty.svg"
+                alt="recent projects"
+              >
+            </div>
+            <h4 class="text-center">
+              {{ $t('Currently you dont have processes created') }}
+            </h4>
+            <p class="text-center">
+              {{ $t('We encourage you to create new processes using our templates') }}
+            </p>
+            <p class="text-center my-4">
+              <button
+                type="button"
+                class="btn btn-primary text-capitalize"
+              >
+                {{ $t("Show Me The Templates") }}
+              </button>
+            </p>
           </div>
-          <h4 class="text-center">
-            {{ $t('Currently you dont have processes created') }}
-          </h4>
-          <p class="text-center">
-            {{ $t('We encourage you to create new processes using our templates') }}
-          </p>
-          <p class="text-center my-4">
-            <button
-              type="button"
-              class="btn btn-primary text-capitalize"
-            >
-              {{ $t("Show Me The Templates") }}
-            </button>
-          </p>
         </div>
       </div>
     </div>
@@ -35,7 +38,10 @@
 
 <script>
 
+import Breadcrumbs from "./Breadcrumbs.vue";
+
 export default {
+  components: { Breadcrumbs },
   data() {
     return {
       fields: [],
@@ -45,4 +51,3 @@ export default {
   },
 };
 </script>
-