Navbar

navbar

This tailwind example is contributed by Haqiman, on 29-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author Haqiman

Tailwind v3.4 119

Fork Fullscreen

<a href="#" class="flex items-center gap-2.5 group">
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-tr from-green-600 to-lime-600 flex items-center justify-center text-white font-black text-lg sm:text-xl shadow-md shadow-blue-500/20 group-hover:scale-105 transition-transform">N</div>
          <div class="flex flex-col">
            <span class="text-lg sm:text-xl font-black tracking-tight text-slate-900">NexSaldo</span>        
          </div>
        </a>

<div class="relative group">
            <button type="button" class="flex items-center gap-1.5 hover:text-blue-600 py-2 focus:outline-none transition-colors">
              <span>Layanan Kami</span>
              <svg class="w-4 h-4 transition-transform group-hover:rotate-180 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div class="absolute left-0 top-full w-56 bg-white rounded-2xl shadow-xl border border-slate-100 p-2 hidden group-hover:block">
              <a href="#" class="flex items-center gap-3 p-2.5 rounded-xl hover:bg-blue-50/70">
                <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center text-xs font-black">↑</div>
                <div>
                  <p class="text-xs font-bold text-slate-800">Top Up PayPal</p>
                  <p class="text-[10px] text-slate-400">Beli saldo kirim instan</p>
                </div>
              </a>
              <a href="#" class="flex items-center gap-3 p-2.5 rounded-xl hover:bg-emerald-50/70">
                <div class="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center text-xs font-black">↓</div>
                <div>
                  <p class="text-xs font-bold text-slate-800">Convert Saldo</p>
                  <p class="text-[10px] text-slate-400">Cairkan saldo ke Rupiah</p>
                </div>
              </a>
              <a href="#" class="flex items-center gap-3 p-2.5 rounded-xl hover:bg-purple-50/70">
                <div class="w-8 h-8 rounded-lg bg-purple-100 text-purple-600 flex items-center justify-center text-xs font-black">💳</div>
                <div>
                  <p class="text-xs font-bold text-slate-800">Jasa Bayar</p>
                  <p class="text-[10px] text-slate-400">Bayar belanja online luar</p>
                </div>
              </a>
            </div>
          </div>

<a href="#" class="hover:text-blue-600 transition-colors">Testimonial</a>
          <a href="#" class="hover:text-blue-600 transition-colors">Blog</a>
          <a href="#" class="hover:text-blue-600 transition-colors">Cek Invoice</a>
        </nav>

<div class="hidden md:flex items-center">
          <a href="#" class="px-5 py-2.5 rounded-xl bg-green-600 hover:bg-blue-700 text-white text-sm font-bold shadow-md shadow-green-500/25 active:scale-95 transition-all">WhatsApp CS</a>
        </div>

<div class="flex items-center md:hidden">
          <button type="button" id="hamburgerBtn" aria-label="Buka menu navigasi" aria-expanded="false" class="p-2 rounded-xl text-slate-600 hover:text-slate-900 hover:bg-slate-100 active:bg-slate-200 focus:outline-none transition-colors">
            <svg id="iconOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
            <svg id="iconClose" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </div>

</div>
    </div>

<div>
          <button type="button" id="layananBtn" class="w-full flex items-center justify-between px-3 py-2.5 rounded-xl hover:bg-slate-50 text-slate-700 transition-colors">
            <span>Layanan Kami</span>
            <svg id="arrowLayanan" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </button>

<div id="submenuLayanan" class="hidden pl-3 pr-1 py-1 space-y-1 bg-slate-50 rounded-xl my-1 border border-slate-100">
            <a href="#" class="flex items-center gap-3 p-2 rounded-lg hover:bg-white text-xs font-bold text-slate-700">
              <span class="w-6 h-6 rounded-md bg-blue-100 text-blue-600 flex items-center justify-center text-[10px]">↑</span>
              <span>Top Up Saldo PayPal</span>
            </a>
            <a href="#" class="flex items-center gap-3 p-2 rounded-lg hover:bg-white text-xs font-bold text-slate-700">
              <span class="w-6 h-6 rounded-md bg-emerald-100 text-emerald-600 flex items-center justify-center text-[10px]">↓</span>
              <span>Convert Saldo PayPal</span>
            </a>
            <a href="#" class="flex items-center gap-3 p-2 rounded-lg hover:bg-white text-xs font-bold text-slate-700">
              <span class="w-6 h-6 rounded-md bg-purple-100 text-purple-600 flex items-center justify-center text-[10px]">💳</span>
              <span>Jasa Pembayaran Online</span>
            </a>
          </div>
        </div>

<a href="#" class="block px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">Testimonial</a>
        <a href="#" class="block px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">Blog</a>
        <a href="#" class="block px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">Cek Status Invoice</a>

<div class="pt-4 mt-2 border-t border-slate-100">
          <a href="#" class="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-xl bg-green-600 hover:bg-green-700 text-white font-extrabold text-sm shadow-md shadow-blue-500/25 active:scale-95 transition">
            <span>Hubungi WhatsApp CS</span>
          </a>
        </div>

</nav>
    </div>
  </header>
</div>

const drawer = $('mobileDrawer');
  const hamburger = $('hamburgerBtn');
  const iconOpen = $('iconOpen');
  const iconClose = $('iconClose');
  const layananBtn = $('layananBtn');
  const submenu = $('submenuLayanan');
  const arrow = $('arrowLayanan');

hamburger.addEventListener('click', () => {
    const opening = drawer.classList.contains('hidden');
    drawer.classList.toggle('hidden', !opening);
    iconOpen.classList.toggle('hidden', opening);
    iconClose.classList.toggle('hidden', !opening);
    hamburger.setAttribute('aria-expanded', String(opening));
  });

layananBtn.addEventListener('click', () => {
    const opening = submenu.classList.contains('hidden');
    submenu.classList.toggle('hidden', !opening);
    arrow.classList.toggle('rotate-180', opening);
  });
</script>

Related Examples

Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.6k
Navbar
This navbar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background and accents 3. Dark mode support with a toggle button 4. Beautiful animations and effects: 1. Fade-in animation for menu items with staggered delays 2. Hover effects on menu items with underline animation 3. Smooth color transitions 4. Mobile menu slide-down animation 5. SVG icons for the dark mode toggle and mobile menu button 6. "Sign Up" call-to-action button 7. Mobile-friendly dropdown menu 8. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The navbar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with color changes and underline animations - The dark mode toggle changes its icon based on the current mode - The mobile menu slides down with a smooth animation when toggled - Desktop menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

nejaa badr

1 year ago

5.2k
sidebar responsive
responsive sidebar with working links

Ganesh Salunke

9 months ago

1.3k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

3 months ago

342
navbar moderne et epure
navbar moderne et epure

Omer fils ELENGA

7 months ago

786
Responsive Header

Rajesh Maheshwari

1 year ago

2.3k
Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

40k
Sticky Navbar
A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

JUGENDRA GANGWAR

3 months ago

280
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Hamza Atig

11 months ago

2.5k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

407
Elegant NavBar
Useful Tailwind classes for constructing a basic NavBar.

Nick Girga

1 year ago

2.1k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

3 months ago

403