Menaruh Breadcrumb di Atas Hero Tanpa Menambah Satu String
Tiga halaman bidang kini menampilkan breadcrumb Beranda/{bidang} di atas hero; labelnya diambil dari objek konfigurasi yang sudah ada di tiap halaman.
Ringkasan
Tiga halaman bidang tadinya cuma nampilin HeroSlider tanpa petunjuk posisi, jadi ditambahin Breadcrumb di atasnya. Untungnya komponen Breadcrumbs udah ada, tinggal dipanggil, dan labelnya ambil dari objek PILLAR yang udah ada, jadi gampang banget. Terus diverifikasi lewat curl buat mastiin aria-current cuma muncul sekali dan posisinya bener di atas hero.
Tiga halaman bidang di KotaPortal saya buka berurutan: /kebudayaan, /olahraga, lalu /kepemudaan. Semuanya langsung menampilkan HeroSlider lebar penuh sebagai elemen pertama halaman. Tidak ada yang memberi tahu pembaca sedang berada di posisi mana dalam struktur portal. Orang yang mendarat dari hasil pencarian hanya melihat gambar besar dan judul bidang.
Sementara itu /pariwisata sudah punya jejaknya sendiri.
Bedanya kecil tapi jelas: eyebrow di dalam hero /pariwisata sudah menampilkan posisi halaman dalam hierarki, sementara tiga halaman sisanya diam sepenuhnya. Setelah perubahan ini, ketiganya menampilkan jalur Beranda / {bidang} tepat di atas hero, bukan di dalamnya.
Diam di atas hero
Breadcrumb baru ditaruh sebagai elemen pertama halaman, dibungkus Container sendiri dengan pt-4 sm:pt-5, lalu HeroSlider lebar penuh menyusul di bawahnya. Bukan di dalam slider, bukan di atas gambar dengan overlay.
Pilihan penempatan ini yang membuat jalurnya terbaca sebagai penanda posisi, bukan sebagai teks dekoratif hero. Menurut pola W3C ARIA APG, breadcrumb adalah daftar link ke halaman induk dalam urutan hierarki, dibungkus region navigation berlabel, dan sering ditaruh horizontal sebelum konten utama [2].
Struktur komponennya sendiri mengikuti pola itu persis: nav dengan aria-label="Breadcrumb", di dalamnya ol berisi li. Item yang bukan yang terakhir dirender sebagai Link dengan warna redup dan berubah saat hover. Separator antar item memakai ikon ChevronRight. Item terakhir dirender sebagai span dengan aria-current="page" dan warna teks yang lebih kuat.
Detail terakhir ini yang paling sering keliru di breadcrumb salin-tempel. Nilai aria-current untuk halaman aktif memang page, dan atributnya bersifat opsional ketika item terakhir berupa span, bukan link [1]. Menaruhnya tetap tidak merugikan; yang salah adalah memasang aria-current="page" pada lebih dari satu elemen, karena status ini menandai satu elemen saja dalam satu set elemen terkait [1].
Tebakan yang salah: tambah library, tulis label dua kali
Insting pertama waktu melihat tiga halaman tanpa jalur posisi: pasang library breadcrumb, lalu tulis label per halaman di tempat baru. Salah satu dari dua langkah itu sudah kebanyakan.
Ternyata komponen Breadcrumbs sudah ada di codebase dan dipakai halaman lain. Diff-nya tidak menyentuh komponen sama sekali. Totalnya tiga file halaman, +69 baris, tsc bersih. Komponennya tinggal dipanggil.
Labelnya juga tidak ditulis ulang. Setiap halaman punya objek konfigurasi PILLAR di bagian atas file, dan PILLAR.name di situ sudah dipakai untuk judul metadata, ikon, kunci settings, sampai pengambilan data. Item breadcrumb tinggal berisi { label: "Beranda", href: "/" } lalu { label: PILLAR.name }.
Satu koreksi pada pesan commit: ini bukan registry terpusat. Setiap halaman punya objek PILLAR-nya sendiri di file masing-masing. Klaim yang jujur adalah sumber labelnya tunggal per halaman dan sudah ada sebelumnya, sehingga breadcrumb menambah nol string baru.
Ini yang membuat tambahan tiga halaman terasa gratis. Kalaupun suatu saat ada halaman bidang keempat, jalurnya cukup memanggil komponen yang sama dengan PILLAR yang sudah ada di file itu. Google Search memakai markup breadcrumb di badan halaman untuk mengategorikan informasi di hasil pencarian, dan jejak seperti ini menunjukkan posisi halaman dalam hierarki situs [3]. Tidak ada klaim soal efek ranking di sini, karena perubahan ini tidak menyentuh structured data sama sekali.
Verifikasi dari HTML, bukan dari diff
Pesan commit dan diff bisa berbeda dari kenyataan di halaman hidup. Karena itu langkah terakhir yang saya lakukan adalah memeriksa HTML hasil SSR, bukan membaca diff lagi.
curl -s https://example.com/kebudayaan | grep -o 'aria-current="page"' | wc -l
curl -s https://example.com/kebudayaan | grep -o 'Beranda' | head -1Perintah pertama harus menghasilkan angka 1, tepat satu penanda halaman aktif di seluruh dokumen [1]. Perintah kedua memastikan label Beranda muncul di HTML yang dirender. Terakhir, posisinya dicek manual: jalur Beranda / {bidang} harus muncul sebelum HeroSlider, bukan sesudahnya. Kalau urutannya terbalik, itu artinya Breadcrumbs tertinggal di bawah hero atau terbawa ke dalam wrapper slider.
/pariwisata sengaja tidak disentuh. Struktur hero-nya memang sudah menampilkan hierarki lewat eyebrow, dan memaksakan markup breadcrumb yang sama persis di sana justru membuat halaman makin ramai. Konsistensi di sini berarti setiap halaman menunjukkan posisinya dengan cara yang sesuai bagi halaman itu, bukan markup identik di semua tempat.
Sources
1. [aria-current - MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) 2. [Breadcrumb Pattern - W3C ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) 3. [Breadcrumb structured data - Google Search Central](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb)