Tutorial Belajar Bootstrap Bagian 21 : Cara Membuat Breadcrumb di Bootstrap

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.

Artikel Lainnya

Tags:

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

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

0