Breadcrumb adalah sebuah navigasi bertujuan untuk memberitahu user memahami lokasi mereka saat ini di dalam sebuah website, pastinya teman-teman pernah mengunjungi sebuah website dan biasanya breadcrumb itu ada di atasnya, seperti layaknya url ketika kita membuka halaman lain atau memilih sesuatu di website tersebut breadcrumb itu pun tampilannya berbeda. Saya rasa paling enak kita langsung lihat contohnya ya, seperti apa cara mudah membuat breadcrumb, Simak terus ya teman-teman.

Untuk cara mudah membuat breadcrumb disini saya menggunakan sebuah bootstrap vue dimana kita bisa melihat hasilnya dan sudah ada efek javascriptnya tentunya, jadi kita tinggal menyesuaikan saja apa yang di butuhkan, oke untuk lebih jelas breadcrumb itu memang hampir mirip seperti menu ya, tidak hanya di gunakan untuk sebuah penanda tetapi juga penanda (breadcrumb) itu bisa kita klik, jadi kita tidak perlu back-back untuk kehalaman sebelumnya, tetapi teman-teman juga langsung bisa mengklik breadcrumb sebelumnya, Dan supaya lebih tidak asing lagi saya akan perlihatkan contohnya

cara mudah membuat breadcrumb

Bagaimana sudah ingat ya teman-teman, seperti itulah breadcrumb akan berkurang atau akan tambah sebuah breadcrumb tergantung teman-teman melihat sebuah halaman, oke langsung saja di bootstrap vue sendiri kita bisa membuatnya dengan cara

kita bisa menggunakan tag <b-breadcrumb> dan kita juga bisa menambahkan sebuah attribute item, dan breadcrumb itemnya kita bisa dapatkan dari sebuah data text adalah untuk tampilanya dan href itu tujuan linknya, maka hasilnya akan seperti ini

cara mudah membuat breadcrumb

Selain kita bisa langsung membuat breadcrumb itu ada di data, kita juga bisa langsung menggunakan <b-breadcrumb-item> untuk membuat sebuah penandanya, jadi kita bisa langsung ya, dan attributnya lebih banyak di bandingkan dengan tag breadcrumb saja tapi di breadcrumb item ini kita bisa membuat rooter link dan sebagainya teman-teman bisa lihat di bootstrap vuenya ya teman-teman, cara membuatnya seperti ini

Jadi tinggal jadikan breadcrumb item itu sebagai anaknya saja, maka hasilnya pun akan seperti ini

cara mudah membuat breadcrumb

Seperti yang teman-teman lihat hasilnya pun akan sama saja ya, bedanya dengan breadcrumb item kita bisa menggunakan banyak attibute, oke jadi seperti itu saja pelajaran kita untuk cara mudah membuat breadcrumb semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih

WhatsApp chat