Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 20 : Cara Membuat Menu Navbar di Bootstrap, selanjutnya kita akan belajar cara membuat breadcrumb di Bootstrap.
Breadcrumb adalah skema navigasi yang menunjukkan lokasi halaman saat ini kepada pengguna dalam web atau aplikasi.
Navigasi breadcrumb dapat meningkatkan aksesibilitas web yang memiliki banyak halaman atau hierarki navigasi yang kompleks.
Anda dapat membuat layout breadcrumbs statis dengan Bootstrap hanya dengan menggunakan class .breadcrumb pada daftar yang diurutkan, seperti yang ditunjukkan pada contoh berikut:
<nav> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Beranda</a></li> <li class="breadcrumb-item"><a href="#">Produk</a></li> <li class="breadcrumb-item active">Aksesoris</li> </ol> </nav>
Pemisah runut tautan default adalah /.
Tapi, Anda bisa mengubahnya dengan sedikit custom CSS, misalnya jika Anda ingin menggunakan > sebagai separator, Anda bisa menerapkan aturan style berikut:
<nav> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Beranda</a></li> <li class="breadcrumb-item"><a href="#">Produk</a></li> <li class="breadcrumb-item active">Aksesoris</li> </ol> </nav>
Semoga tutorial ini membantu Anda untuk belajar cara membuat breadcrumb di Bootstrap.
0 Komentar