diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index 90d19c0ed79adf4d64a0980a86d8155a3c1f5b3c..a294d5907a783c9e901257c229aefbf8ab62c1eb 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container>
-    <b-breadcrumb class="bg-light" :items="items" :click="breadcrumbHandler"></b-breadcrumb>
+    <b-breadcrumb class="bg-light" :items="items"></b-breadcrumb>
     <h2>ANGGARAN BIAYA LANGSUNG APBD JABAR</h2>
     <b-row class="justify-content-md-center">
       <b-col id="visualization" class="bg-light" cols="12" lg="8">
@@ -11,7 +11,7 @@
         />
       </b-col>
       <b-col cols="12" lg="4">
-        <detail-card  :detailAnggaran='detail_anggaran' />
+        <detail-card  :detailAnggaran='items' />
       </b-col>
     </b-row>
     <b-row class="justify-content-md-center">
@@ -45,18 +45,8 @@ export default {
   data() {
     return {
       data: [],
-      items: [
-        {
-          text: 'Semua Anggaran',
-          id: 0,
-          to: { name: 'SemuaAnggaran' }
-        },
-        {
-          text: 'Anggaran Biaya Langsung',
-          id: 1,
-          active: true
-        }
-      ],
+      currentData: null,
+      items: [],
       detail_anggaran : {
         title : "Pendapatan",
         total : "50.000.000,-",
@@ -78,22 +68,65 @@ export default {
     }
   },
   methods: {
-    breadcrumbHandler(obj) {
-      console.log(obj)
-      // let item = this.items.pop()
-      // let id = item.id + 1
-      // item.active = false
-
-      // this.items.push(item)
-      // this.items.push({
-      //   text: 'Anggaran Biaya Langsung',
-      //   id: 1,
-      // })
-    },
     visualizationHandler(idobj) {
       let id = idobj.$oid
       this.$router.push({ name: 'BiayaLangsungId', params: { id: id } })
     },
+    getLowestLevel(data) {
+      return data[data.length-1].level
+    },
+    searchData(data, currentData) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].level == currentData.level && data[i].text == currentData.name) {
+          return i
+        }
+      }
+      return -1
+    },
+    clearArray(arr) {
+      arr.splice(0, arr.length)
+    },
+    breadcrumbHandler() {
+      // Clear or slice breadcrumb item list depending on the condition
+      if (this.items.length != 0) {
+        if (this.getLowestLevel(this.items) > this.currentData.level) {
+          // If the user visits earlier page, trim the breadcrumb items
+          let i = this.searchData(this.items, this.currentData)
+          if (i != -1)
+            this.items = this.items.slice(0, i)
+          else
+            this.clearArray(this.items)          
+        } else if (this.currentData.level - this.getLowestLevel(this.items) >= 2)
+          // If the user jumps two level after the lowest level
+          // immediately clear all breadcrumb items
+          this.clearArray(this.items)
+      }
+
+      // Automatically append 'Semua Anggaran' when on the topmost level
+      if (this.currentData.level == 1 && this.items.length == 0) {
+        this.items.push({
+          text: 'Semua Anggaran',
+          level: 0,
+          to: { name: 'SemuaAnggaran' }
+        })
+      }
+
+      // Push current item to breadcrumb item list
+      this.items.push({
+        text: this.currentData.name,
+        level: this.currentData.level,
+        value: this.currentData.value,
+        id: this.currentData._id.$oid,
+        active: true
+      })
+
+      // Logic to add routing link to each non-active breadcrumb items
+      if (this.items.length >= 2 && this.items[this.items.length-2].text != "Semua Anggaran") {
+        var item = this.items[this.items.length-2]
+        item.active = false
+        item.to = { name: 'BiayaLangsungId', params: { id: item.id } }
+      }
+    },
     getData(id) {
       let fetchData = {
         method: 'POST',
@@ -106,6 +139,8 @@ export default {
       .then(response => {
         if(response.status === 200) {
           this.data = response.subdata
+          this.currentData = response.data
+          this.breadcrumbHandler()
         }
       })
     },
@@ -121,6 +156,8 @@ export default {
       .then(response => {
         if(response.status === 200) {
           this.data = response.subdata
+          this.currentData = response.data
+          this.breadcrumbHandler()
         }
       })
     },
@@ -131,7 +168,7 @@ export default {
     else this.getData(this.$route.params.id)
   },
   watch: {
-    '$route' (to, from) {
+    $route(to, from) {
       if (!this.$route.params.id) this.getDataFromTop()
       else this.getData(this.$route.params.id)
       this.$refs.viz.clear()
diff --git a/src/components/partials/Comments.vue b/src/components/partials/Comments.vue
index f102d3ce0cbb05c55598dc24f8ca736ea190fcd3..b5f9a3fd1e36547e18bfef82ea79158914ad93a1 100644
--- a/src/components/partials/Comments.vue
+++ b/src/components/partials/Comments.vue
@@ -119,7 +119,6 @@ export default {
       fetch(`${this.$store.state.baseUrl}/api/comment/add`, fetchData)
       .then(response => response.json())
       .then(response => {
-        console.log(response)
         if(response.status === 200) {
           this.refreshContent()
         }
@@ -135,7 +134,6 @@ export default {
       fetch(`${this.$store.state.baseUrl}/api/comment/add-reply`, fetchData)
       .then(response => response.json())
       .then(response => {
-        console.log(response)
         if(response.status === 200) {
           this.refreshContent()
         }
@@ -154,7 +152,6 @@ export default {
         fetch(`${this.$store.state.baseUrl}/api/comment/get`, fetchData)
         .then(response => response.json())
         .then(response => {
-          console.log(response)
           if(response.status === 200) {
             this.data = response.data
             if (this.rows == 0) this.noticeText = "Tidak ada komentar"
diff --git a/src/components/partials/Visualization.vue b/src/components/partials/Visualization.vue
index cb245d458a3371eb7974c379e9ce8c7d4149c0b2..5287f6c30a0b7f7d48e7e6d99f331805d116f32e 100644
--- a/src/components/partials/Visualization.vue
+++ b/src/components/partials/Visualization.vue
@@ -113,7 +113,6 @@ export default {
           .enter()
           .append("circle")
           .attr('r', function(d) {
-            console.log(radiusCircles)
             return radiusCircles(d[columnForWidth])
           })
           .style("fill", function(d) {