IndonesiaEnglish

Apa Itu Navbar? Pengertian dan Cara Membuatnya

apa itu navbar

Sudahkah Anda mengetahui apa itu navbar? Navbar atau navigasi bar merupakan salah satu elemen pada HTML yang dibuat untuk mempresentasikan link navigasi. Biasanya navbar digunakan sebagai menu yang berisi link-link dan bersifat umum pada suatu website, seperti Home, About, Contact Us, dan lain sebagainya. 

Nah, lewat kesempatan ini ToffeeDev ingin memberikan penjelasan lebih lengkapnya seputar navbar atau navigasi bar pada tampilan website. Simak terus artikelnya!

Apa Itu Navbar?

Navigasi bar atau navbar adalah nama yang disematkan untuk mendefinisikan sistem navigasi yang dikumpulkan pada satu bagian pada tampilan website. Definisi tersebut kemudian tentu saja sama dengan tujuan yang dimiliki oleh navbar itu sendiri yakni membantu user dalam menemukan laman-laman yang mereka ingin akses.

Sebab, NavBar pada dasarnya berisikan menu yang mencakup informasi umum sejenis dengan menggunakan mekanisme laman, label, category ataupun tag. Informasi tersebut kemudian menampilkan kumpulan (list) informasi dan laman khusus dari website tersebut.

Navbar menjadi satu dari sekian banyak elemen user interface dan user experience yang penting untuk diperhatikan. Sebab dengan tampilan yang menarik dan pengoperasian yang mudah, setiap pengunjung bisa betah berada di dalam website. Hal ini tentunya juga bisa berdampak pada beragam hal yang bisa membantu bisnis.

Baca Juga: Breadcrumbs Adalah Cara Meningkatkan Navigasi Website

3 Cara Membuat Navbar

Bagaimana cara membuat navbar? Tentu saja dapat dengan mudah Anda lakukan! Ikuti langkah-langkah di bawah ini dengan seksama, ya.

1. Siapkan Folder 

Langkah pertama, Anda dapat membuat folder penampung, gambar logo, file html dan css. Usahakan logo Anda telah memiliki format svg atau png yang tidak memiliki background. Selanjutnya logo tersebut dimasukkan ke dalam folder image. Sedangkan file index.html dan style.css silakan dibuat dalam folder navbar. 

2. Buatlah Coding di index.html

Selanjutnya Anda dapat membuat coding pada file index.html. File index.html adalah file yang nantinya akan dibuka pada browser. Dengan file ini juga Anda dapat membuat struktur html yang akan ditampilkan pada web browser.

Untuk mempercepat codingan sebaiknya gunakan text editor terbaik. Seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor lainnya

banner

3. Membuat File CSS

1. Mengimport Google Font

Jika ingin menggunakan font yang bagus, maka Anda dapat mengambil font dari Google. Silakan perhatikan code berikut untuk mengambil font Montserrat dari Google.

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat&display=swap’);

2. Mengatur Background

Selanjutnya, untuk mengatur background pada navbar pada browser, Anda dapat menggunakan css berikut ini.

*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    background-color: #0522b5;

}

3. Mengatur tag li, a dan button

Sedangkan ketika Anda ingin juga mengatur jenis, warna, ukuran font pada tag li, a dan button silakan buat codingan seperti ini.

li, a, button{

    font-family: “Montserrat”, sans-serif;

    font-weight: 500;

    font-size: 16px;

    color: #edf0f1;

    text-decoration: none;

Baca Juga: 4 Cara Optimasi SEO untuk Website

4. Pengaturan Header

Setelah menyelesaikan tahap di atas, kini saatnya Anda mengatur header dengan metode flex. Hal inilah yang dapat menjadikan navbar yang Anda buat akan semakin terlihat keren. Berikut ini caranya.

header{

    display: flex;

    justify-content: space-between;

    /* justify-content: flex-end; */

    align-items: center;

    padding: 30px 10%;

}

Pada pengaturan justify-content space-between maka navbar akan berada pada sisi kanan maupun kiri. Sedangkan apabila Anda mengaktifkan flex-end, maka navbar akan cenderung berada pada sebelah kanan saja. Sesuaikan saja dengan keinginan Anda!

5. Posisi Logo

Posisi logo juga dapat Anda atur sesuai dengan keinginan Anda. Untuk melakukannya lihat pada codingan berikut ini.

.logo{

    cursor: pointer;

    margin-right: auto;

}

6. Mengatur Interaksi NavLink

Selain itu, mari beralih pada navlink yang juga harus diatur sedemikian rupa agar ketika ada interaksi dapat memberikan efek yang keren. Kemudian, navlink yang sudah berhasil dibuat juga harus diatur ulang agar berjajar seperti yang diinginkan. Untuk mengatur navlink, Anda dapat melihat code-code berikut ini.

.nav__links{

    list-style: none;

}

.nav__links li{

    display: inline-block;

    padding: 0px 20px;

}

.nav__links li a{

    transition: all 0.3s ease 0s;

}

.nav__links li a:hover{

    color: #0088a9;

Baca Juga: 5 Contoh Landing Page yang Menarik

7. Interaksi Button

Selain komponen navlink, Anda juga telah membuat satu buah button. Untuk mengatur button yang telah Anda buat di html, berikut ini adalah contoh codingan untuk mengatur tombol (button) dengan menggunakan css.

button{

    padding: 9px 25px;

    background-color: rgba(0,136,169,1);

    border: none;

    border-radius: 50px;

    cursor: pointer;

    transition: all 0.3s ease 0s;

}

button:hover{

    background-color: rgba(0,136,169,0.8);

}

Demikian penjelasan terkait pengertian navbar atau navigasi bar pada website dan juga bagaimana cara membuatnya. Tentunya setelah membaca artikel dari ToffeeDev ini, Anda dapat mencoba membuat navbar pada website milik Anda menjadi lebih keren.

Ingin membuat website untuk pertama kalinya namun takut mengalami kesulitan? Tenang, hal tersebut tidak perlu Anda ambil pusing, serahkan semua pada ahlinya. ToffeeDev siap membantu Anda mendapatkan website idaman yang bisa membantu bisnis untuk terus berkembang.

Mulai dari jasa pembuatan website, layanan SEO, hingga digital ads dan sebagainya. Untuk mendapatkan informasi lebih lengkapnya, jangan ragu untuk hubungi tim ToffeeDev sekarang juga ya!

Share this post :

Scroll to Top

SEO E-Commerce

Optimizes online stores to improve visibility

SEO For B2B

Optimizes business websites to attract and convert other businesses

Jasa Local SEO

Optimizes business websites to attract and convert other businesses

SEO Audit

Audit analyzes a website's performance

E-Commerce

Optimizes online stores to improve visibility

Company Profile

Digital solutions to enhance online presence and user experience

Google Ads

Optimizes visibility on Google

Meta Ads

Optimizes visibility on Meta

Tiktok Ads

Optimizes visibility on Tiktok

Linkedin Ads

Optimizes visibility on Linkedin

Yandex Ads

Optimizes visibility on Yandex

Programmatic Ads

Optimizes visibility with Programmatic