Tutorial Belajar Bootstrap Bagian 19 : Cara Membuat Menu Navigasi di Bootstrap

0
144

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar Boostrap Bagian 18 : Cara Menambahkan Icon di Bootstrap, selanjutnya kita akan belajar cara membuat menu navigasi di Bootstrap.

Bootstrap menyediakan cara yang mudah dan cepat untuk membuat komponen navigasi dasar seperti tab dan pil yang sangat fleksibel dan elegan.

Semua komponen navigasi Bootstrap — tab dan pil — berbagi markup dan style dasar yang sama melalui class .nav dasar.

Membuat Nav Dasar dengan Bootstrap

Anda dapat menggunakan class Bootstrap .nav untuk membuat menu navigasi dasar, seperti ini:

<nav class="nav">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <a href="#" class="nav-item nav-link">Pesan</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>
Catatan: Anda dapat menggunakan class .disabled untuk membuat link tampak seperti dinonaktifkan. Namun, class .disabled hanya mengubah tampilan visual link dengan membuatnya menjadi abu-abu dan menghapus efek hover, namun link tersebut akan tetap dapat diklik kecuali Anda menghapus atribut “href”.

Penjajaran Item Nav

Secara default, navigasi rata kiri, tetapi Anda dapat dengan mudah menyelaraskannya ke tengah atau kanan menggunakan utilitas flexbox.

Contoh berikut menggunakan class .justify-content-center untuk meratakan item navigasi ke tengah.

    <nav class="nav justify-content-center">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <a href="#" class="nav-item nav-link">Pesan</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Demikian pula, Anda dapat menyelaraskan item navigasi ke kanan menggunakan class .justify-content-end, seperti ini:

    <nav class="nav justify-content-end">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <a href="#" class="nav-item nav-link">Pesan</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Selain itu, Anda bahkan dapat menumpuk item nav Anda secara vertikal dengan mengubah arah item fleksibel dengan class .flex-column, seperti yang ditunjukkan dalam contoh berikut:

    <nav class="nav flex-column">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <a href="#" class="nav-item nav-link">Pesan</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Membuat Tab Dasar

Cukup, tambahkan class .nav-tab ke navigasi dasar untuk menghasilkan navigasi tab, seperti ini:

    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <a href="#" class="nav-item nav-link">Pesan</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Anda juga dapat menambahkan ikon ke item tab agar lebih menarik, seperti yang ditunjukkan di sini:

<nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">
            <i class="fa fa-Beranda"></i> Beranda
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="fa fa-user"></i> Profil
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="fa fa-envelope"></i> Pesan
        </a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">
            <i class="fa fa-line-chart"></i> Laporan
        </a>
    </nav>

Membuat Nav Pills

Demikian pula, Anda dapat membuat navigasi berbasis pil dengan menambahkan class .nav-pills pada navigasi dasar dibanding menggunakan class .nav-tabs, seperti yang ditunjukkan pada contoh berikut:

    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <a href="#" class="nav-item nav-link">Pesan</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Demikian pula, seperti tab navigasi, Anda juga dapat menambahkan ikon ke menu pil agar lebih menarik:

    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link active">
            <i class="fa fa-Beranda"></i> Beranda
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="fa fa-user"></i> Profil
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="fa fa-envelope"></i> Pesan
        </a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">
            <i class="fa fa-line-chart"></i> Laporan
        </a>
    </nav>

Selain itu, Anda dapat menerapkan class .flex-column pada elemen .nav untuk membuat pil nav tampak ditumpuk secara vertikal, seperti yang ditunjukkan pada contoh berikut:

    <nav class="nav nav-pills flex-column">
        <a href="#" class="nav-item nav-link active">
            <i class="fa fa-Beranda"></i> Beranda
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="fa fa-user"></i> Profil
        </a>
        <a href="#" class="nav-item nav-link">
            <i class="fa fa-envelope"></i> Pesan
        </a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">
            <i class="fa fa-line-chart"></i> Laporan
        </a>
    </nav>

Tab Bootstrap dan Pills Nav dengan Menu Dropdown

Anda dapat menambahkan menu tarik-turun ke tautan di dalam tab dan pil nav dengan sedikit markup tambahan.

Empat class CSS .dropdown, .dropdown-toggle, .dropdown-menu dan .dropdown-item diperlukan selain class .nav, .nav-tabs atau .nav-pills untuk membuat menu dropdown sederhana di dalam nav tanpa menggunakan kode JavaScript apa pun.

Membuat Tab dengan Dropdown

Contoh berikut akan menunjukkan kepada Anda bagaimana menambahkan menu dropdown sederhana ke tab.

    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pesan</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Inbox</a>
                <a href="#" class="dropdown-item">Sent</a>
                <a href="#" class="dropdown-item">Drafts</a>
            </div>
        </div>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Membuat Pil dengan Dropdown

Contoh berikut akan menunjukkan kepada Anda bagaimana menambahkan menu dropdown sederhana ke menu pill nav.

    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link active">Beranda</a>
        <a href="#" class="nav-item nav-link">Profil</a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pesan</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Inbox</a>
                <a href="#" class="dropdown-item">Sent</a>
                <a href="#" class="dropdown-item">Drafts</a>
            </div>
        </div>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Laporan</a>
    </nav>

Isi dan Ratakan Komponen Nav

Anda dapat memaksa item navigasi Anda untuk memperpanjang dan secara proporsional mengisi semua lebar yang tersedia menggunakan class .nav-fill pada elemen .nav.

Dalam contoh berikut, semua ruang horizontal ditempati oleh item navigasi, tetapi setiap item navigasi tidak memiliki lebar yang sama.

    <nav class="nav nav-pills nav-fill">
        <a href="#" class="nav-item nav-link">Beranda</a>
        <a href="#" class="nav-item nav-link">Tentang</a>
        <a href="#" class="nav-item nav-link active">Jelajahi Produk </a>
        <a href="#" class="nav-item nav-link">Hubungi Kami</a>
    </nav>

Alternatifnya, Anda bisa menggunakan class .nav-justified daripada .nav-fill, jika Anda ingin nav yang memenuhi semua ruang horizontal serta setiap item navigasi memiliki lebar yang sama.

<nav class="nav nav-pills nav-justified">
        <a href="#" class="nav-item nav-link">Beranda</a>
        <a href="#" class="nav-item nav-link">Tentang</a>
        <a href="#" class="nav-item nav-link active">Jelajahi Produk</a>
        <a href="#" class="nav-item nav-link">Hubungi Kami</a>
    </nav>

Semoga tutorial ini membantu Anda untuk mempelajari cara membuat menu navigasi 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.