Belajar Materialize #12 : Breadcrumbs pada Materialize

Belajar Materialize #12 : Breadcrumbs pada Materialize – Halo “sahabat kodingin” masih di seri tutorial belajar materialize berbahasa Indonesia. Kali ini kita akan membahas cara menggunakan breadcrums pada Materialize.

Apakah anda sudah tahu “apa itu breadcrumbs” ?

Jika belum, tidak usah kwatir, kita akan bahas satu per satu cara membuat breadcrumbs di materialize.

Sebelum anda melanjutkan tutorial ini jangan lupa pelajari tentang Pengenalan dan Pengertian Materialize.

Apa itu Breadcrumbs ?

Breadcrumbs adalah salah satu komponen yang ada pada framework materialize yang berguna sebagai penanda sebuah link, penanda dimana anda terdapat pada salah satu menu.

Dengan mengguakan breadcrumbs memudahkan pengguna untuk mengerti posisi saat ini ketika menjelajahi halaman website.

Di bawah ini contoh skema breadcrumbs.

Home > Category > Web Design

Arti contoh breadcrumbs di atas, pengguna berada pada posisi kategori dengan nama web design.

Contoh Breadcrumbs

Berikut ini “contoh potongan kode membuat breadcrumbs” pada materialize.

Jika di lihat cukup sederhana, namun bukan kode yang utuh.

Selanjutnya, kita “bikin breadchumbs secara utuh”.

Cara menggunakan Breadcrumbs

Untuk menggunakan breadcrumbs di materialize cukup mudah, dimana dapat menggunakan tag HTML berupa Link / anchor teks dengan nama class .breadcrumb.

Berikut ini contoh kode membuat breadcrumbs.

Perhatikan kode diatas, pembuka nya di awali dengan elemen nav, kemudian kita dapat memberikan ukuran grid, dalam contoh ini saya berikan grid 12. Kemudian untuk breadcrumbsnya sendiri menggunakan class. breadcrumbs.

Buka kode tersebut di browser anda dan lihat hasilnya.

Belajar Materialize #12 : Breadcrumbs pada Materialize
Cara menggunakan Breadcrumbs

Terlihat jelas, kita sudah berhasil membuat breadchumbs dengan materialize, dimana ada 3 jumlah yang saya bikin dan penanda terakhir di breadchumbs web design.

Jika di terjemahkan artinya, sekarang kita sedang berada di kategori web design.

Anda juga dapat mengubah warna latar pada breadcrumbs dengan cara menambahkan class pada div atau elemen lainnya.

Baca Juga…

3 Comments

  1. […] Belajar Materialize #12 : Breadcrumbs pada Materialize […]

  2. […] Belajar Materialize #12 : Breadcrumbs pada Materialize […]

  3. […] Belajar Materialize #12 : Breadcrumbs pada Materialize […]

Leave a Reply