Simple Navbar

Simple Tailwind Navbar

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

Header Navbar

Author JUGENDRA GANGWAR

Tailwind v3.4 228 2

Fork Fullscreen

<a href="#" class="flex-shrink-0 text-xl md:text-2xl font-bold text-gray-900 tracking-tight">
          Tailwind<span class="text-indigo-600">Flex</span>
        </a>

<ul class="hidden md:flex items-center gap-8 lg:gap-10">
          <li><a href="#" class="text-sm lg:text-[15px] font-medium text-gray-600 hover:text-gray-900 transition-colors">Home</a></li>
          <li><a href="#" class="text-sm lg:text-[15px] font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a></li>
          <li><a href="#" class="text-sm lg:text-[15px] font-medium text-gray-600 hover:text-gray-900 transition-colors">Services</a></li>
          <li><a href="#" class="text-sm lg:text-[15px] font-medium text-gray-600 hover:text-gray-900 transition-colors">Contact</a></li>
          <li>
            <a href="#" class="inline-flex items-center rounded-full bg-black px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 active:bg-indigo-800 transition-colors">
              Get Started
            </a>
          </li>
        </ul>

<button id="mobileMenuBtn" aria-label="Toggle menu" aria-expanded="false" class="md:hidden relative w-9 h-9 flex flex-col items-center justify-center gap-1.5 group">
          <span class="block h-0.5 w-6 rounded-full bg-gray-900 transition-all duration-300 origin-center group-[.active]:rotate-45 group-[.active]:translate-y-2"></span>
          <span class="block h-0.5 w-6 rounded-full bg-gray-900 transition-all duration-300 group-[.active]:opacity-0"></span>
          <span class="block h-0.5 w-6 rounded-full bg-gray-900 transition-all duration-300 origin-center group-[.active]:-rotate-45 group-[.active]:-translate-y-2"></span>
        </button>
      </div>
    </div>

<div id="navLinks" class="md:hidden max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-white border-t border-gray-100">
      <ul class="flex flex-col px-4 py-3 gap-1">
        <li><a href="#" class="nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors">Home</a></li>
        <li><a href="#" class="nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors">About</a></li>
        <li><a href="#" class="nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors">Services</a></li>
        <li><a href="#" class="nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors">Contact</a></li>
        <li class="pt-2">
          <a href="#" class=" block text-center rounded-full bg-black px-5 py-2.5 text-base font-semibold text-white hover:bg-indigo-700 transition-colors">Get Started</a>
        </li>
      </ul>
    </div>
  </nav>

function toggleMenu(forceClose = false) {
      const isOpen = mobileMenuBtn.classList.contains('active');
      const willOpen = forceClose ? false : !isOpen;

mobileMenuBtn.classList.toggle('active', willOpen);
      mobileMenuBtn.setAttribute('aria-expanded', String(willOpen));

if (willOpen) {
        navLinks.style.maxHeight = navLinks.scrollHeight + 'px';
      } else {
        navLinks.style.maxHeight = '0px';
      }
    }

mobileMenuBtn.addEventListener('click', () => toggleMenu());

document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => toggleMenu(true));
    });

window.addEventListener('resize', () => {
      if (window.innerWidth >= 768) toggleMenu(true);
    });
  </script>

Related Examples

Simple Responsive Navigation Bar w/Translation link
Minimal javascript - built using nested details element.

Sherry Lynne

1 month ago

85
Shrinkable Header
A shrinkable header with responsive menu using a little bit of plain javascript

farid

1 year ago

2k
websitee

Anonymous

1 year ago

952
tradition music
by salvator

Baraka Salvator

1 year ago

1.5k
Animated Title
App Logo or Main Title

khalidrootdevs

2 years ago

7.6k
Startup Glassmorphism Navbar with Neon Gradient & Floating Navigation
AI startup navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

2 months ago

314
card section neon
card section neon

Omer fils ELENGA

7 months ago

1.3k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Rathanak Phan

1 year ago

1.8k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Mike Varen

2 years ago

4.9k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.1k