Membuat Navbar simple menggunakan NUXTjs

Pernah ingin membuat tampilan website yang rapi, tapi bingung bagaimana memulai bagian navigasi atau navbar di Nuxt.js? Jangan khawatir—Anda tidak sendiri. Banyak pemula merasa kebingungan saat harus membuat navbar yang responsif dan terlihat profesional, padahal navbar adalah elemen utama dari sebuah website.

Kesalahan kecil, seperti struktur file yang salah atau penggunaan komponen yang tidak tepat, bisa menyebabkan navbar tidak muncul, link tidak berfungsi, atau tampilan berantakan. Namun, artikel ini hadir sebagai solusi lengkap untuk Anda.

Di panduan ini, Anda akan mempelajari:

• Struktur dasar Nuxt.js untuk membuat navbar.
• Cara membuat navbar sederhana dengan <template> dan <script>.
• Menambahkan gaya (style) agar navbar terlihat rapi.
• Tips agar navbar tetap responsif dan bisa digunakan di semua halaman.

Apa Itu Navbar di Nuxt.js?

Navbar (Navigation Bar) adalah bagian menu yang digunakan untuk berpindah antar halaman. Dalam Nuxt.js, kita bisa membuat navbar menggunakan komponen dan memanfaatkannya secara global agar tampil di semua halaman.

Langkah-Langkah Membuat Navbar simple menggunakan NUXTjs

Langkah 1: Buat Proyek Nuxt.js Baru

Jika Anda belum memiliki proyek, buat dengan perintah berikut:

npx nuxi init navbar-project
cd navbar-project
npm install
npm run dev

npx nuxi init navbar-project
cd navbar-project
npm install
npm run dev

Langkah 2: Buat Komponen Navbar

Buat file komponen di folder components/Navbar.vue

<template>
  <nav class="navbar">
    <h1 class="logo">MyWebsite</h1>
    <ul class="nav-links">
      <li><NuxtLink to="/">Home</NuxtLink></li>
      <li><NuxtLink to="/about">About</NuxtLink></li>
      <li><NuxtLink to="/contact">Contact</NuxtLink></li>
    </ul>
  </nav>
</template>

<script setup>
// Navbar simple tanpa script tambahan
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  font-weight: bold;
}
</style>

<template>
  <nav class="navbar">
    <h1 class="logo">MyWebsite</h1>
    <ul class="nav-links">
      <li><NuxtLink to="/">Home</NuxtLink></li>
      <li><NuxtLink to="/about">About</NuxtLink></li>
      <li><NuxtLink to="/contact">Contact</NuxtLink></li>
    </ul>
  </nav>
</template>

<script setup>
// Navbar simple tanpa script tambahan
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  font-weight: bold;
}
</style>

Langkah 3: Gunakan Navbar di Layout Utama

Agar navbar tampil di semua halaman, masukkan ke file layouts/default.vue

<template>
  <div>
    <Navbar />
    <NuxtPage />
  </div>
</template>

<script setup>
import Navbar from '~/components/Navbar.vue'
</script>

<template>
  <div>
    <Navbar />
    <NuxtPage />
  </div>
</template>

<script setup>
import Navbar from '~/components/Navbar.vue'
</script>

Langkah 4: Tambahkan Halaman Contoh

Buat file pages/about.vue

<template>
  <h2>Halaman About</h2>
</template>

<template>
  <h2>Halaman About</h2>
</template>

Buat pages/contact.vue

<template>
  <h2>Halaman Contact</h2>
</template>

<template>
  <h2>Halaman Contact</h2>
</template>

Anda sudah berhasil membuat navbar simple di Nuxt.js yang tampil di seluruh halaman. Dengan memahami struktur komponen dan layout, Anda telah menguasai fondasi penting dalam membangun aplikasi Nuxt.js.

Ingin melangkah lebih jauh?
Baca juga: “Cara Membuat Navbar Responsif dengan Tailwind di Nuxt.js”