Buat Breadcrumb Navigasi Dinamis di Vue.js dalam 5 Langkah

Breadcrumb adalah elemen navigasi yang membantu pengguna memahami posisi mereka dalam struktur halaman sebuah aplikasi. Dalam Vue.js, kita bisa membuat breadcrumb dinamis yang menyesuaikan dengan rute yang sedang diakses.

Dalam panduan ini, kita akan belajar:
✅ Cara membuat breadcrumb di Vue.js
✅ Menggunakan Vue Router untuk breadcrumb dinamis
✅ Menampilkan breadcrumb berdasarkan meta route

📌 Baca juga: Proteksi Halaman di Vue.js: Middleware di Vue Router Dijelaskan!

Langkah 1: Instalasi dan Konfigurasi Vue Router

Pastikan Vue Router sudah terinstal. Jika belum, jalankan perintah berikut:

npm install vue-router@4

Buat file router.js di dalam folder src:

javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Product from './views/Product.vue'

const routes = [
  { path: '/', component: Home, meta: { breadcrumb: 'Home' } },
  { path: '/about', component: About, meta: { breadcrumb: 'Tentang Kami' } },
  { path: '/product', component: Product, meta: { breadcrumb: 'Produk' } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

---

Langkah 2: Membuat Komponen Breadcrumb

Buat file components/Breadcrumb.vue:

vue
<template>
  <nav class="breadcrumb">
    <ul>
      <li v-for="(crumb, index) in breadcrumbs" :key="index">
        <router-link v-if="crumb.path" :to="crumb.path">{{ crumb.label }}</router-link>
        <span v-else>{{ crumb.label }}</span>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const breadcrumbs = computed(() => {
  const matchedRoutes = route.matched
  return matchedRoutes.map((r) => ({
    label: r.meta.breadcrumb,
    path: r.path !== route.path ? r.path : null
  }))
})
</script>

<style scoped>
.breadcrumb ul {
  list-style: none;
  display: flex;
}
.breadcrumb li {
  margin-right: 5px;
}
.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 5px;
}
</style>

---

Langkah 3: Menampilkan Breadcrumb di Layout

Tambahkan komponen Breadcrumb.vue di file App.vue atau layout utama aplikasi:

vue
<template>
  <div>
    <Breadcrumb />
    <router-view />
  </div>
</template>

<script setup>
import Breadcrumb from './components/Breadcrumb.vue'
</script>

---

Langkah 4: Menambahkan Breadcrumb untuk Halaman Detail

Untuk halaman detail seperti produk, kita bisa menambahkan breadcrumb dinamis berdasarkan parameter URL.

Perbarui router.js:

javascript

const routes = [
  { path: '/', component: Home, meta: { breadcrumb: 'Home' } },
  { path: '/about', component: About, meta: { breadcrumb: 'Tentang Kami' } },
  { path: '/product', component: Product, meta: { breadcrumb: 'Produk' } },
  { 
    path: '/product/:id', 
    component: () => import('./views/ProductDetail.vue'), 
    meta: { breadcrumb: (route) => `Produk ${route.params.id}` } 
  }
]

---

Langkah 5: Menyesuaikan Breadcrumb untuk Halaman Dinamis

Perbarui Breadcrumb.vue untuk menangani breadcrumb yang menggunakan fungsi:

vue
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => {
  return route.matched.map((r) => ({
    label: typeof r.meta.breadcrumb === 'function' ? r.meta.breadcrumb(route) : r.meta.breadcrumb,
    path: r.path !== route.path ? r.path : null
  }))
})
</script>

---

Kesimpulan

Dengan menerapkan breadcrumb navigasi dinamis di Vue.js, kita bisa meningkatkan pengalaman pengguna dengan memberikan navigasi yang lebih jelas. Dengan Vue Router, breadcrumb bisa menyesuaikan dengan struktur rute aplikasi secara otomatis. 🚀

📌 Baca juga: Proteksi Halaman di Vue.js: Middleware di Vue Router Dijelaskan!