Membangun Navbar Modern di Next.js dengan Tailwind & shadcn/ui

Pendahuluan

Navbar bukan sekadar navigasi. Ia adalah impresi pertama dari produk digital Anda.

Saat pengguna membuka website, navbar adalah elemen pertama yang mereka nilai secara visual. Spacing, tipografi, animasi, dan konsistensi desain akan langsung membentuk persepsi kualitas.

Di artikel ini, kita akan membangun navbar modern menggunakan Next.js 14, Tailwind CSS, dan shadcn/ui dengan pendekatan yang clean dan scalable.

Permasalahan Umum

Banyak developer fokus pada fungsi:

• Link berjalan
• Dropdown aktif
• Responsive di mobile

Namun sering melewatkan kualitas visual:

• Font tidak konsisten
• Ukuran teks tidak terstandarisasi
• Hover terlalu kasar
• Tidak ada efek saat scroll
• Tidak ada hierarchy antara logo dan menu

Hasilnya?
Berfungsi, tetapi tidak terasa premium.

Menyiapkan Typography dengan Benar

Gunakan satu sistem font saja. Contoh menggunakan Plus Jakarta Sans:

import { Plus_Jakarta_Sans } from 'next/font/google'
 
const jakarta = Plus_Jakarta_Sans({
  subsets: ['latin'],
  variable: '--font-sans',
})

Lalu sinkronkan di tailwind.config.ts:

fontFamily: {
  sans: ['var(--font-sans)', ...fontFamily.sans],
},
 
fontSize: {
  nav: ['15px', { lineHeight: '1.4' }],
},

Sekarang semua font-sans akan konsisten dengan layout.

Struktur Navbar

Berikut struktur dasarnya:

<motion.header
  initial={{ y: -60, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
  transition={{ duration: 0.5 }}
  className="sticky top-0 z-50 w-full bg-white/80 backdrop-blur-xl border-b border-border"
>
  <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
    
    <Link href="/" className="flex items-center gap-3">
      <Image src={Logo} alt="Logo" width={34} height={34} />
      <span className="text-xl font-bold tracking-tighter">
        FARxTEAM
      </span>
    </Link>
 
    <nav className="hidden md:flex items-center gap-6">
      <Link
        href="/about"
        className="text-nav font-medium tracking-tight hover:text-primary transition-colors"
      >
        Tentang
      </Link>
      <Link
        href="/blog"
        className="text-nav font-medium tracking-tight hover:text-primary transition-colors"
      >
        Blog
      </Link>
    </nav>
 
  </div>
</motion.header>

Perhatikan:

• text-nav untuk ukuran konsisten
• tracking-tight agar lebih rapi
• transition-colors untuk hover halus
• Spacing tidak berlebihan

Menambahkan Efek Scroll Premium

Navbar akan berubah saat user scroll:

useEffect(() => {
  const handleScroll = () => {
    setScrolled(window.scrollY > 20)
  }
 
  window.addEventListener('scroll', handleScroll, { passive: true })
  return () => window.removeEventListener('scroll', handleScroll)
}, [])

Lalu gunakan kondisi:

className={cn(
  'sticky top-0 z-50 w-full transition-all duration-300',
  scrolled
    ? 'bg-white/80 backdrop-blur-xl border-b border-border shadow-sm'
    : 'bg-transparent'
)}

Efek blur + border tipis memberikan kesan modern dan clean.

Styling Tombol CTA

Call-to-action harus lebih menonjol:

<Button
  size="lg"
  className="rounded-full px-7 bg-primary text-white shadow-md hover:shadow-glow transition-all"
>
  Hubungi Kami
</Button>

Rounded penuh + subtle shadow membuatnya terlihat profesional tanpa berlebihan.

Demo Visual

1. Navbar Transparan (Belum Scroll)

2. Navbar Setelah Scroll

Kesimpulan

UI premium bukan soal banyak efek. UI premium adalah soal konsistensi.

Jika tipografi, spacing, animasi, dan sistem warna selaras — bahkan navbar sederhana pun bisa terasa seperti produk kelas atas.

Bangun dengan standar.
Jaga konsistensi.
Deploy dengan percaya diri. 🚀