Cara Mudah Membuat Navbar atau Menu Modern dan Responsif dengan Bootstrap 5

7:39:00 PM 0 Comments
Share:

Navigasi (navbar) adalah salah satu elemen paling krusial dalam desain web. Ia berfungsi sebagai peta jalan digital yang memandu pengguna menjelajahi situs Anda. Di era modern ini, sebuah navbar tidak hanya harus informatif, tetapi juga harus terlihat menarik dan berfungsi dengan sempurna di berbagai ukuran layar—singkatnya, harus modern dan responsif. Menggunakan Bootstrap, sebuah framework CSS paling populer, proses ini menjadi jauh lebih mudah dan efisien. Artikel ini akan memandu Anda langkah demi langkah dalam membangun navbar yang canggih dan responsif menggunakan Bootstrap 5.


1. Persiapan Awal: Mengintegrasikan Bootstrap

Sebelum kita mulai membangun navbar, Anda perlu memastikan proyek Anda telah terintegrasi dengan Bootstrap 5. Ini adalah langkah dasar yang wajib dilakukan. Anda dapat mengintegrasikan Bootstrap melalui CDN (Content Delivery Network) atau menginstalnya secara lokal.

Berikut adalah struktur HTML dasar yang menyertakan CDN Bootstrap 5. Pastikan untuk menempatkan link CSS di dalam tag <head> dan script JavaScript sebelum tag penutup </body>.




<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Modern dengan Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>

    <!-- Navbar Anda akan ditempatkan di sini -->

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>



2. Membangun Navbar Dasar dengan Bootstrap

Mari kita mulai dengan struktur dasar navbar Bootstrap. Komponen utama adalah elemen <nav> dengan kelas .navbar dan .navbar-expand-[breakpoint] untuk responsivitas. Kelas .navbar-expand-[breakpoint] menentukan kapan navbar harus dilipat menjadi menu hamburger. Misalnya, .navbar-expand-lg berarti navbar akan meluas (tidak dilipat) pada layar berukuran 'large' atau lebih besar.

Berikut adalah kode untuk navbar sederhana dengan beberapa tautan dan brand:




<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Nama Brand Anda</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Beranda</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Layanan</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Tentang Kami</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Kontak</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Komponen Utama Navbar

.navbar: Kelas dasar untuk semua navbar.
.navbar-brand: Untuk logo atau nama situs Anda.
.navbar-toggler: Tombol untuk mengaktifkan/menonaktifkan menu responsif.
.collapse .navbar-collapse: Konten navbar yang akan dilipat.
.navbar-nav: Daftar tautan navigasi.
.nav-item dan .nav-link: Untuk setiap item dan tautan navigasi.



3. Menambahkan Dropdown Menu

Navbar modern sering kali menyertakan menu dropdown untuk mengatur tautan yang lebih banyak. Bootstrap membuatnya sangat mudah:




<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Nama Brand Anda</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Beranda</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Produk
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Kategori 1</a></li>
                        <li><a class="dropdown-item" href="#">Kategori 2</a></li>
                        <li><a class="dropdown-item" href="#">Semua Produk</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Tentang Kami</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Perhatikan penambahan kelas .dropdown pada .nav-item, .dropdown-toggle pada .nav-link, dan elemen <ul class="dropdown-menu">.



4. Menambahkan Form Pencarian

Sebuah form pencarian adalah fitur umum yang sangat berguna. Anda bisa menambahkannya dengan mudah:



<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavSearch" aria-controls="navbarNavSearch" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavSearch">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link active" href="#">Beranda</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Fitur</a></li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Cari..." aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Cari</button>
            </form>
        </div>
    </div>
</nav>

Perhatikan penggunaan kelas .me-auto pada <ul class="navbar-nav"> untuk mendorong form pencarian ke sisi kanan.


Kesimpulan: Navbar Profesional dalam Genggaman

Membangun navbar yang modern dan responsif tidak pernah semudah ini berkat Bootstrap 5. Dengan beberapa baris kode HTML dan kelas-kelas Bootstrap yang intuitif, Anda dapat menciptakan sistem navigasi yang tidak hanya fungsional tetapi juga estetis di berbagai perangkat. Mulai dari brand sederhana, tautan navigasi, menu dropdown, hingga form pencarian, Bootstrap menyediakan semua yang Anda butuhkan untuk membuat pengalaman pengguna yang mulus dan profesional. Teruslah bereksperimen dengan kelas-kelas Bootstrap lainnya untuk menyesuaikan navbar Anda agar benar-benar unik dan sesuai dengan identitas visual situs Anda.

Tags
Share:

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi

Subscribe to: Post Comments ( Atom )