MenusLesson 55Preview gratis
Pill Navigation
Lesson ini bagian dari How To · Semua level
Ringkasan
Pill navigation menampilkan tautan menu sebagai kapsul membulat yang saling berjajar. Bentuk ini memberi kesan modern dan membuat kategori mudah dipindai. Tautan aktif biasanya diisi warna solid, sedangkan tautan lain memakai latar lembut yang berubah saat di-hover.
Poin kunci
- border-radius: 999px menghasilkan bentuk kapsul meskipun tinggi elemen berubah.
- display: flex dengan gap menjaga jarak antarpil tetap konsisten.
- Kelas .active memberi latar solid pada kategori yang sedang dipilih.
- flex-wrap: wrap membuat pil turun ke baris baru pada layar sempit.
- aria-current="page" menandai tautan aktif untuk pembaca layar.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.