Responsive Tailwind CSS Navbar

A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

This tailwind example is contributed by irahoza daniel, on 20-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Navigations Navbar

Author irahoza daniel

Tailwind v3.4 1.4k 3

Fork Fullscreen

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-xl text-blue-600 font-bold text-gray-800">DanDev</a>
      </div>

<div class="hidden md:flex space-x-6 items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Home</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Projects</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 font-medium">About</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Contact</a>
      </div>

<div class="md:hidden flex items-center">
        <button id="menu-btn" class="text-gray-600 focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

<div id="mobile-menu" class="md:hidden hidden px-4 pb-4 space-y-2">
    <a href="#" class="block text-gray-600 hover:text-blue-600">Home</a>
    <a href="#" class="block text-gray-600 hover:text-blue-600">Projects</a>
    <a href="#" class="block text-gray-600 hover:text-blue-600">About</a>
    <a href="#" class="block text-gray-600 hover:text-blue-600">Contact</a>
  </div>
</nav>

btn.addEventListener('click', () => {
    menu.classList.toggle('hidden');
  });
</script>

Related Examples

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

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

inbarajan P

2 years ago

3.6k
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
animated navigation bar

Md. Tofayel islam

1 year ago

3.1k
NavBar

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

1 year ago

2.8k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Rathanak Phan

1 year ago

2.3k
Nav Bar
Animated Mobile Dropdown menu

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

1 year ago

3.1k