Membuat Navigation Bar Menggunakan Tailwind

Tailwind adalah sebuah framework CSS yang dirancang untuk mempercepat proses pengembangan tampilan dan antarmuka pengguna dalam pembuatan aplikasi web. Dibandingkan dengan kerangka kerja CSS tradisional seperti Bootstrap, Tailwind memiliki pendekatan yang berbeda dengan memberikan sejumlah besar kelas CSS utilitas yang dapat langsung diterapkan pada elemen HTML.

Membuat Navigation Bar Menggunakan Tailwind

Halaman Tailwindcss

Salah satu kelebihan Tailwind adalah fleksibilitasnya. Dalam Tailwind, kamu dapat dengan mudah menyesuaikan setiap aspek tampilan dengan mengubah kelas utilitas pada elemen yang sesuai. Hal ini memberikan kebebasan yang lebih besar dalam merancang antarmuka yang unik dan sesuai dengan kebutuhan proyek.

Nah, pada kesempatan kali ini kita akan mencoba untuk membuat sebuah navbar menggunakan framework CSS Tailwind. Navigation bar, juga dikenal sebagai navbar, adalah elemen antarmuka pengguna yang digunakan untuk menyediakan navigasi dan aksesibilitas ke berbagai bagian atau halaman dalam sebuah situs web atau aplikasi. Biasanya, navbar ditempatkan di bagian atas layar dan berisi daftar tautan atau ikon yang memungkinkan pengguna berpindah antara halaman atau menu yang relevan.

Navbar biasanya terdiri dari beberapa komponen, seperti logo atau judul situs yang mengarahkan pengguna ke halaman utama, tautan menu yang mengarahkan pengguna ke halaman-halaman penting, dan elemen tambahan seperti tombol pencarian atau tautan ke halaman profil pengguna. Desain dan penempatan elemen dalam navbar dapat bervariasi tergantung pada gaya visual dan kebutuhan proyek.

Menampilkan Logo pada Navbar

Tampilan logo pada navbar

Sebagai langkah awal kita perlu menampilkan logo yang ada pada navbar yang ingin kita buat. Kita perlu membuat sebuah wrapper menggunakan tag nav yang akan menjadi parent wrapper pada bagian navbar ini. Setelah itu kita perlu membuat tag <div> yang di dalamnya berisi tag <img> yang kita gunakan untuk menampilkan gambar logo pada navbar, jangan lupa untuk mengatur tinggi dan lebar dari gambar tersebut sesuai desain yang ada. Pada tag <nav> kita mengubah display dari tag <nav> menjadi flex agar kita bisa menerapkan justify-center yang berguna untuk membuat semua elemen yang ada pada tag <nav> berada di tengah. Kemudian kita juga perlu memberikan tinggi sebesar 100px.

Setelah itu pada tag <div> kita memberikan lebar sebesar 11 dari 12 total ukuran layar kemudian menggunakan display flex agar bisa menerapkan items-center agar posisi gambar tepat berada di tengah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="output.css">
    <title>Document</title>
</head>
<body>
    <nav class=" flex justify-center h-[100px]">
        <div class="w-[1240px] flex items-center">
            <img src="../logo.png" alt="" width="186" height="42">
        </div>
    </nav>
</body>
</html>

Membuat Bagian Menu pada Navbar

Tampilan menu pada navbar

Kemudian kita perlu membuat sebuah menu yang ada pada navbar untuk membuatnya kita tinggal membuat sebuah container dengan tag <div> baru yang berada pada container yang sama dengan tag <img> kemudian kita perlu tentukan ukuran lebar dari container <img> dengan begian menu dengan ukuran sebesar 577px dan memberikan flex agar bisa memberi jarak antara <img> dengan menu navbar menggunakan justify-between.

Pada container menu juga perlu diberikan lebar sebesar 340px dan memberikan flex agar bisa diberikan jarak antar menu menggunakan justify-between.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="output.css">
    <title>Document</title>
</head>
<body>
    <nav class=" flex justify-center h-[100px] ">
        <div class="w-[1240px] flex items-center">
            <div class="flex items-center w-[577px] justify-between">
                <img src="../logo.png" alt="" width="186" height="42">
                <div class="flex w-[340px] justify-between">
                    <p>Program</p>
                    <p>Mentor</p>
                    <p>Pricing</p>
                    <p>Business</p>
                </div>
            </div>
        </div>
    </nav>
</body>
</html>

Membuat Button pada Navbar

Tampilan button pada navbar

Selanjutnya kita akan mencoba untuk membuat sebuah button yang ada pada bagian navbar. Untuk membuat button pada navbar tersebut kita akan menempatkannya diluar container dari logo dan menu yang telah kita buat sebelumnya. Karena itu kita membuat container berukuran 279px yang berisikan dua tag <button> yang memiliki padding atas-bawah berukuran 10px, padding kiri-kanan berukuran 36px, dan radius sebesar 47px.

Warna yang diberikan pada setiap button juga berbeda pada button Sign In kita perlu memberikan warna background purple-200 dengan teks berwarna purple-700. Sedangkan untuk button Sign Up kita perlu memberikan backgorund purple-600 dan teks berwarna putih.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="output.css">
    <title>Document</title>
</head>
<body>
    <nav class=" flex justify-center h-[100px] ">
        <div class="w-[1240px] flex items-center justify-between">
            <div class="flex items-center w-[577px] justify-between">
                <img src="../logo.png" alt="" width="186" height="42">
                <div class="flex w-[340px] justify-between">
                    <p class="text-purple-700">Program</p>
                    <p>Mentor</p>
                    <p>Pricing</p>
                    <p>Business</p>
                </div>
            </div>
            <div class="w-[279px] flex justify-between">
                <button class="bg-purple-200 px-[36px] py-[10px] rounded-[47px]">
                    <p class="text-purple-700">Sign in</p>
                </button>
                <button class="bg-purple-600 px-[36px] py-[10px] rounded-[47px]">
                    <p class="text-white">Sign Up</p>
                </button>
            </div>
        </div>
       
    </nav>
</body>
</html>

Kesimpulan

Dalam artikel ini, kita telah menjelajahi cara membuat sebuah navbar menggunakan Tailwind CSS. Tailwind CSS adalah sebuah framework yang kuat dan fleksibel yang memungkinkan pengembang web untuk dengan mudah membuat dan menyesuaikan komponen seperti navbar. Kami telah membahas langkah-langkah dasar yang meliputi pembuatan struktur HTML, penggunaan kelas-kelas Tailwind, dan beberapa fitur khusus yang tersedia. Agar dapat lebih mendalami Tailwind kamu dapat mengikuti beberapa kelas dari builwithangga.com seperti kelas CSS Tailwind Web Design dan React JS dan Tailwind CSS Website Development.