Sebelum kita memulai tutorial kali ini saya akan mencoba meberikan sedikit penjelasan tentang breadcrumb. Breadcrumb adalah teknik navigasi menampilkan semua halaman yang telah kita kunjungi dari halaman homepage ke halaman yang sedang dilihat. Semua halaman terkait untuk navigasi breadcrumb. Biasanya ini ditempatkan di dekat bagian atas halaman web. Jadi misalnya, jika anda melihat ke bagian atas halaman ini anda akan melihat breadcrumb navigasi menu yang mengarah jalan kembali ke homepage. Breadcrumb juga berfungsi untuk memudahkan user dalam mengakses setiap halaman di website anda. Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Breadcrumb Menggunakan Bulma Framework
Pada tutorial kali ini saya akan membuat menu breadcrumb untuk paket kursus. Langsung saja saya akan memberikan langkah-langkah Cara Membuat Breadcrumb Menggunakan Bulma Framework:
1. Pertama
anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.
2. Kedua
anda ketikan kode html di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>Panel Bulma Framework</title> <!--link ke css bulma--> <link rel="stylesheet" type="text/css" href="bulma-0.4.4/css/bulma.css"> <link rel="stylesheet" type="text/css" href="bulma-0.4.4/css/bulma.css.map"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css.map"> <!--link ke font-awesome--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="column"> <nav> <ul> <li><a>Web Master</a></li> <li><a>Web Programming</a></li> <li><a>Web Design</a></li> <li><a>Digital Marketing</a></li> <li><a>Graphic Design</a></li> </ul> </nav> </div> </script> </body> </html> |
Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:
3. Ketiga
Teman-teman tambahkan class pada tag nav untuk membuat breadcrumbnya
|
1 |
<nav class="breadcrumb is-centered"> |
Lalu refresh file index.html yang tadi kita buka, maka tampilannya akan berubah menjadi seperti gambar di bawah ini:
Class breadcrumb adalah class yang memudahkan kita mebuat suatu breadcrumb dan class is-centered membuat posisi breadcrumb berada di tengah-tengah kolom. Untuk penjelasan posisi breadcrumb lainnya akan saya buat tutorialnya pada lain hari.
Dengan bulma kita dapat dengan mudah membuat breadcrumb tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat breadcrumb pada bulma.
Sekian pembahasan kali ini tentang Cara Membuat Breadcrumb Menggunakan Bulma Framework. Semoga bermanfaat.