Tampilkan Posisi Halaman dengan Cara Membuat Breadcrumb dari Route Next Js

Ditulis oleh Next.js

Cara membuat breadcrumb dari route Next.js paling praktis adalah memecah pathname aktif menjadi segmen, lalu memetakan tiap segmen menjadi Link. Hasilnya otomatis mengikuti struktur URL, misalnya Home / Blog / Belajar Next.js untuk route /blog/belajar-next-js.

Gunakan Client Component karena usePathname dari next/navigation hanya berjalan di client. Server Component tidak bisa membaca pathname per navigasi tanpa dikirim sebagai props.

Hasil Akhir Breadcrumb Otomatis dari Segmen Route

Pola umumnya selalu sama. Segmen pertama mengarah ke /, segmen tengah memakai Link, segmen terakhir tampil sebagai teks biasa karena itu halaman aktif.

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Breadcrumbs() {
  const pathname = usePathname();
  const segments = pathname.split("/").filter(Boolean);

  return (
    <nav aria-label="breadcrumb">
      <Link href="/">Home</Link>
      {segments.map((seg, i) => {
        const href = "/" + segments.slice(0, i + 1).join("/");
        const isLast = i === segments.length - 1;
        return isLast ? (
          <span key={href}> / {seg} </span>
        ) : (
          <span key={href}> / <Link href={href}>{seg}</Link></span>
        );
      })}
    </nav>
  );
}

Langkah Membuat Komponen Breadcrumbs di App Router

  1. Buat file components/Breadcrumbs.tsx dan tambahkan “use client” di baris pertama.
  2. Baca pathname dengan usePathname(), lalu pecah dengan split(“/”) dan buang string kosong memakai filter(Boolean).
  3. Render segmen dengan map. Bangun href kumulatif memakai slice(0, i + 1), tampilkan Link untuk segmen tengah dan span biasa untuk segmen terakhir.
  4. Pasang komponen di app/layout.tsx bila tampil global, atau di page.tsx tertentu bila hanya dibutuhkan sebagian halaman.

BACA JUGA:

Menangani Dynamic Route dan Label Khusus

Route dinamis seperti /blog/[slug] atau /products/[id] menghasilkan slug mentah. Ubah slug itu sebelum dirender agar terbaca manusia.

  • Kapitalisasi huruf pertama tiap kata untuk label navigasi.
  • Ganti strip dengan spasi, contoh belajar-next-js menjadi Belajar Next Js.
  • Sembunyikan segmen teknis seperti dashboard, settings, atau grup route dalam kurung.
  • Buat mapping manual untuk URL singkatan, contoh checkout menjadi Pembayaran.
  • Untuk ID acak, ganti dengan nama produk dari props atau data fetch di Server Component induk.

Perbandingan Sumber Data Breadcrumb

Sumber Fungsi Catatan pemakaian
Pathname Pecah URL aktif Cukup untuk halaman statis
Search Params Baca filter halaman Jangan masukkan ke breadcrumb utama
Route statis Mapping label manual Wajib untuk ID dan slug dinamis

Pathname cukup bila struktur folder sama dengan struktur navigasi. Mapping manual perlu dipakai begitu URL berisi ID, kode transaksi, atau istilah teknis.

FAQ

Apakah breadcrumb harus Client Component di App Router?

Ya bila memakai usePathname, karena hook tersebut hanya tersedia di Client Component.

Bagaimana menampilkan nama produk bukan ID di breadcrumb?

Ambil nama produk di Server Component induk lalu kirim sebagai props label ke komponen breadcrumb.

Apakah segmen terakhir perlu memakai Link?

Tidak, tampilkan sebagai teks biasa karena pengguna sudah berada di halaman tersebut.

Artikel Terkait