Konfigurasi Breadcrumb

Silakan teman-teman buka file Breadcrumbs.tsx kemudian sesuaikan menjadi seperti berikut ini:

components/
└── products/
    └── Breadcrumbs.tsx

Kode Lengkap

"use client"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function Breadcrumbs() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Products</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Client Component

"use client"

• Menandakan bahwa file ini adalah client component.
• Dibutuhkan karena komponen breadcrumb berinteraksi dengan UI (klik link, navigasi, dsb).
• Jika tidak ada "use client", Next.js akan menganggap ini sebagai server component yang tidak bisa menangani event handler atau state.

Import dari UI Components

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

• Memanfaatkan UI component breadcrumb yang sudah ada di @/components/ui/breadcrumb.
• Biasanya bawaan dari library UI seperti shadcn/ui atau komponen kustom.
• Dengan cara ini, kita tinggal menyusun struktur navigasi tanpa menulis ulang styling dasar.

Struktur Breadcrumb

export function Breadcrumbs() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Products</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

• <Breadcrumb> → container utama breadcrumb.
• <BreadcrumbList> → wadah daftar item breadcrumb.
• <BreadcrumbItem> → item tunggal breadcrumb (contoh: Home, Products).
• <BreadcrumbLink href="/">Home</BreadcrumbLink> → link navigasi.
• <BreadcrumbSeparator /> → pemisah antar item (biasanya /).
• <BreadcrumbPage>Products</BreadcrumbPage> → halaman aktif (tidak bisa diklik).

Hasil Akhir di UI

Tampilan di layar:

Home / Products

• Home → link, jika diklik akan kembali ke halaman utama (/).
• / → separator antar item.
• Products → halaman aktif (tidak bisa diklik).

Kesimpulan

Dengan membuat Breadcrumbs.tsx ini, kita sudah memiliki komponen breadcrumb yang:

1. Reusable → bisa dipakai di banyak halaman, cukup ganti item-nya.
2. Modular → tersimpan rapi di folder components/products/.
3. UI-friendly → memanfaatkan komponen UI siap pakai, konsisten, dan mudah digunakan.