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 7

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

flower
by salvator

Baraka Salvator

1 year ago

1.8k
navbar
navbar

SANJAY SINGH GARIYA

1 year ago

2.4k
navigation
tailwind navigation pills

Anonymous

2 years ago

9.6k
Garden
by salvator

Baraka Salvator

1 year ago

2.3k
Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.5k
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Navbar
Hover-Activated Dropdowns: The "Solutions" and "Company" menus open on hover with smooth scale and opacity transitions. Each dropdown organizes links into sections with icons, descriptions, and even a notification badge for the "Careers" link. Rich Interaction Feedback: All navigation items and buttons respond with color changes, background shifts, and shadow effects on hover. The notification bell includes a live status dot, and the profile button uses a gradient background. Responsive Foundation: The layout includes a hidden mobile menu with a toggle button, ensuring the navigation adapts to different screen sizes while maintaining the professional aesthetic.

Muzammil Riaz

2 months ago

148
tradition music
by salvator

Baraka Salvator

1 year ago

1.5k
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.2k
Responsive Navbar with TailwindCSS and AlpineJS

ariaw

11 months ago

849
Simple Navbar
Simple Tailwind Navbar

JUGENDRA GANGWAR

3 months ago

228
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

3.9k