Tutorial Belajar Bootstrap Bagian 21 : Cara Membuat Breadcrumb di Bootstrap

0
131

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>
Tip: Pemisah di dalam komponen breadcrumb ditambahkan secara otomatis melalui CSS melalui :: before pseudo-element dan property content.

Semoga tutorial ini membantu Anda untuk belajar cara membuat breadcrumb di Bootstrap.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.