Tautan navigasi & keadaan aktif
Bangun navigasi dengan keadaan aktif yang jelas menggunakan className dan aria-current; jaga agar tautan mudah diakses dan ramah untuk layar kecil.
Tautan navigasi & keadaan aktif adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.
Mengapa status aktif penting
Tujuan: Buat bilah navigasi kecil dan tunjukkan rute aktif dengan jelas kepada pengguna dan pembaca layar.
- Gaya aktif
- aria-current
- Tata letak yang ramah layar kecil
Logika aktif & aksesibilitas
Hitung status aktif suatu tautan dengan membandingkan jalur saat ini. Tambahkan gaya visual yang kuat dan tetapkan aria-current="page" pada tautan aktif.
Demo: navigasi aktif
Kami menerapkan perute hash kecil dan komponen Nav yang memberi gaya pada tautan aktif serta menetapkan aria-current.
<div id="root"></div>
Tips aksesibilitas
Tips aksesibilitas:
- Gunakan tautan <a> nyata untuk navigasi.
- Tetapkan aria-current="page" pada tautan aktif.
- Pastikan fokus tetap terlihat setelah navigasi.
Kejelasan visual
Buat status aktif terlihat jelas dengan warna dan kontras; pertahankan target sentuh yang besar (minimum 40px) serta jarak yang longgar untuk layar kecil.
Jebakan
Hindari:
- Hanya menggunakan gaya saat diarahkan—pengguna layar sentuh tidak akan melihatnya.
- Melupakan aria-current pada tautan aktif.
- Hanya mengandalkan URL tanpa memperbarui UI.
Praktik terbaik status aktif
Ringkasan
Ringkasan: Hitung tautan aktif dari jalur saat ini, beri gaya yang jelas, dan tetapkan aria-current="page" untuk membantu pembaca layar.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tautan navigasi & keadaan aktif” gratis?
Ya — teks lengkap “Tautan navigasi & keadaan aktif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Tautan navigasi & keadaan aktif”?
Bangun navigasi dengan keadaan aktif yang jelas menggunakan className dan aria-current; jaga agar tautan mudah diakses dan ramah untuk layar kecil. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai React Academy?
Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.
Berapa lama pelajaran “Tautan navigasi & keadaan aktif” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Konsep perutean sisi klien
- Rute bertingkat & parameter rute
- Tautan navigasi & keadaan aktif