Navigasi yang jelas dan intuitif adalah kunci penting dalam pengalaman pengguna yang baik. Bootstrap menyediakan dua komponen yang sangat berguna untuk navigasi: Pagination (penomoran halaman) untuk memecah konten yang panjang menjadi beberapa halaman, dan Breadcrumb (remah roti) untuk membantu pengguna memahami lokasi mereka di dalam struktur situs. Mari kita bahas cara menggunakannya dalam proyek Bootstrap Anda di Malang, Jawa Timur.

Pagination (Penomoran Halaman)

Pagination sangat berguna ketika Anda memiliki banyak konten yang perlu dibagi menjadi beberapa halaman, seperti hasil pencarian, artikel blog, atau daftar produk. Bootstrap menyediakan gaya dasar yang mudah dikustomisasi.

Struktur Dasar Pagination

Struktur dasar pagination di Bootstrap menggunakan elemen <nav> dengan atribut aria-label untuk aksesibilitas, dan di dalamnya terdapat elemen <ul> dengan kelas .pagination. Setiap item halaman diwakili oleh elemen <li> dengan kelas .page-item, dan link di dalamnya menggunakan kelas .page-link.

Contoh Dasar Pagination:

Status Aktif dan Nonaktif

Anda dapat menunjukkan halaman yang sedang aktif dengan menambahkan kelas .active pada elemen .page-item. Untuk item yang tidak dapat diklik (misalnya, tombol “Sebelumnya” di halaman pertama), tambahkan kelas .disabled.

Contoh dengan Status Aktif dan Nonaktif:

Ukuran Pagination

Bootstrap menyediakan kelas untuk mengubah ukuran pagination: .pagination-lg untuk ukuran yang lebih besar dan .pagination-sm untuk ukuran yang lebih kecil.

Contoh Ukuran Pagination:

Alignment Pagination

Anda dapat mengatur perataan pagination menggunakan utility classes Bootstrap seperti .justify-content-start, .justify-content-center, atau .justify-content-end pada elemen .pagination.

Contoh Alignment Pagination:

Breadcrumb (Remah Roti)

Breadcrumb adalah navigasi sekunder yang menunjukkan lokasi halaman saat ini dalam hierarki situs. Ini membantu pengguna untuk kembali ke halaman sebelumnya dengan mudah.

Struktur Dasar Breadcrumb

Struktur dasar breadcrumb menggunakan elemen <nav> dengan atribut aria-label, dan di dalamnya terdapat elemen <ol> dengan kelas .breadcrumb. Setiap segmen breadcrumb adalah elemen <li> dengan kelas .breadcrumb-item. Segmen aktif biasanya memiliki atribut aria-current="page".

Contoh Dasar Breadcrumb:

Pemisah (Separator)

Secara default, Bootstrap menggunakan simbol / sebagai pemisah antar segmen breadcrumb. Anda dapat menyesuaikan pemisah ini melalui variabel Sass $breadcrumb-divider. Jika Anda tidak menggunakan Sass, Anda dapat menimpanya dengan CSS kustom.

Contoh Breadcrumb dengan Pemisah Kustom (CSS):

Dengan menggunakan komponen Pagination dan Breadcrumb dari Bootstrap, Anda dapat meningkatkan navigasi dan keterjangkauan situs web Anda, memberikan pengalaman yang lebih baik bagi pengguna di Malang dan di mana pun mereka mengakses situs Anda. Selamat mencoba! 🚀