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 115

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

Simple Navbar
Simple Tailwind Navbar

JUGENDRA GANGWAR

3 months ago

234
Apple Dock Navigation Bar

Cristian

1 year ago

3k
navbar
navbar

Omer fils ELENGA

9 months ago

828
Responsive Login & Support Form
A responsive login page for an order and production management system. It features a branded navigation bar, username and password fields, a clear sign-in action, and a built-in support message form with attachment and emoji controls. Built with Tailwind CSS and Flowbite, the layout adapts smoothly to desktop and mobile screens. Tags: Login Form, Authentication, Contact Form, Support Form, Responsive, Navbar, Footer, Tailwind CSS, Flowbite, Admin Panel

Alla Telegina

1 month ago

128
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.6k
Garden
by salvator

Baraka Salvator

1 year ago

2.3k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Vikram Choudhary

3 years ago

7.8k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.4k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

5.9k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

18k
Navbar with Icon on the left, links and call to actions on the right

Anonymous

2 years ago

4k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k