Breadcrumb
Navigasi hierarkis yang menunjukkan lokasi halaman aktif di dalam struktur aplikasi dan memudahkan pengguna kembali ke tingkat sebelumnya.
Dasar
Secara default, item terakhir dianggap sebagai halaman aktif sehingga tidak berupa tautan dan otomatis memiliki penanda aria-current="page". Item sebelumnya dirender sebagai NuxtLink.
Ikon
Gunakan prop icon pada item untuk menambahkan ikon representatif (misalnya ikon beranda atau modul). Ikon bersifat dekoratif dan otomatis disembunyikan dari pembaca layar.
Ukuran
Tersedia tiga ukuran: sm (ringkas untuk panel rapat), md (standar aplikasi), dan lg (halaman detail/hero).
Kecil (sm)
Sedang (md - bawaan)
Besar (lg)
Pemisah kustom
Karakter pemisah bawaan adalah panah chevron kanan. Anda dapat menggantinya dengan teks melalui separator-text atau ikon lain lewat separator-icon.
Garis miring (slash text)
Panah ganda (chevrons-right icon)
Titik tengah (bullet text)
Kustomisasi slot
Gunakan scoped slot #item untuk menyematkan komponen pendukung seperti status W4cBadge atau menu interaktif.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| items | W4cBreadcrumbItem[] | [] | Daftar item breadcrumb ({ label, to?, icon?, disabled? }). |
| separatorIcon | string | 'lucide:chevron-right' | Nama ikon Iconify untuk pemisah antar-item. |
| separatorText | string | — | Karakter pemisah teks (misal `/`). Menggantikan separatorIcon jika diisi. |
| size | 'sm' | 'md' | 'lg' | 'md' | Ukuran teks, ikon, dan spasi pemisah breadcrumb. |
| ariaLabel | string | 'Breadcrumb' | Label aksesibilitas untuk landmark navigasi <nav>. |
W4cBreadcrumbItem
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | string | wajib | Teks judul rute atau halaman. |
| to | NuxtLinkProps['to'] | — | Rute navigasi internal atau URL eksternal untuk NuxtLink. |
| icon | string | — | Nama ikon Iconify dekoratif sebelum teks label. |
| disabled | boolean | false | Menonaktifkan link pada item. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | — | — | Mengganti seluruh daftar <ol> bila membutuhkan struktur breadcrumb kustom. |
| item | { item: W4cBreadcrumbItem, index: number, isLast: boolean } | — | Kustomisasi rendering konten tiap item rute. |
| separator | { index: number } | — | Kustomisasi elemen pemisah antar-item. |
Atribut HTML umum dan kelas penataan tata letak diteruskan langsung ke elemen <nav>.