Repsonsive Navbar

fully respondive navbar

This tailwind example is contributed by Ganesh Salunke, on 18-Mar-2026. Component is made with Tailwind v3.4. It is responsive.

Navigations Navbar

Author Ganesh Salunke

Tailwind v3.4 491 1

Fork Fullscreen

<div class="flex flex-col sm:flex-row sm:items-center gap-3">

<div class="flex items-center gap-2">
                    <i class="bi bi-geo-alt text-blue-400"></i>
                    <span>Pune, India</span>
                </div>

<div class="flex items-center gap-2">
                    <i class="bi bi-envelope text-blue-400"></i>
                    <a href="mailto:info@company.com" 
                       class="hover:text-blue-400 transition">
                        info@company.com
                    </a>
                </div>

</div>

<div class="hidden lg:flex items-center gap-4">

</div>

</div>
    </div>
</header>
<nav x-data="{ open: false, dropdown: false }" 
     class="bg-white shadow-lg sticky top-0 z-50">

<a href="/" class="flex items-center space-x-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="h-6 w-6">
                                    <path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                                    <path
                                        d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z">
                                    </path>
                                </svg>
                <div class="leading-tight">
                    <div class="font-bold text-lg">Charity</div>
                    <div class="text-sm text-gray-500">Non-profit Organization</div>
                </div>
            </a>

<div class="hidden lg:flex items-center space-x-8">

<a href="#top" class="text-gray-700 hover:text-blue-600 font-medium">Home</a>
                <a href="#section_2" class="text-gray-700 hover:text-blue-600">About</a>
                <a href="#section_3" class="text-gray-700 hover:text-blue-600">Causes</a>
                <a href="#section_4" class="text-gray-700 hover:text-blue-600">Volunteer</a>

<div class="relative" @mouseenter="dropdown = true" @mouseleave="dropdown = false">
                    <button class="text-gray-700 hover:text-blue-600 flex items-center">
                        News
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" stroke-width="2"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>

<div x-show="dropdown"
                         x-transition
                         class="absolute left-0 mt-2 w-44 bg-white rounded-xl shadow-lg py-2">
                        <a href="/news/" class="block px-4 py-2 hover:bg-gray-100">News Listing</a>
                        <a href="/news-detail/" class="block px-4 py-2 hover:bg-gray-100">News Detail</a>
                    </div>
                </div>

<a href="#section_6" class="text-gray-700 hover:text-blue-600">Contact</a>

<a href="/donate/" 
                   class="ml-4 px-5 py-2 rounded-full border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition font-medium">
                    Donate
                </a>
            </div>

<button @click="open = !open" 
                    class="lg:hidden focus:outline-none">
                <svg class="w-7 h-7 text-gray-700" fill="none" stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 6h16M4 12h16M4 18h16"/>
                    <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

</div>
    </div>

<div x-show="open" x-transition class="lg:hidden bg-white shadow-md">
        <div class="px-4 py-4 space-y-4">

<a href="#top" class="block text-gray-700">Home</a>
            <a href="#section_2" class="block text-gray-700">About</a>
            <a href="#section_3" class="block text-gray-700">Causes</a>
            <a href="#section_4" class="block text-gray-700">Volunteer</a>

<div>
                <button @click="dropdown = !dropdown" 
                        class="w-full text-left text-gray-700 flex justify-between items-center">
                    News
                    <span>+</span>
                </button>
                <div x-show="dropdown" class="pl-4 mt-2 space-y-2">
                    <a href="/news/" class="block text-gray-600">News Listing</a>
                    <a href="/news-detail/" class="block text-gray-600">News Detail</a>
                </div>
            </div>

<a href="#section_6" class="block text-gray-700">Contact</a>

<a href="/donate/" 
               class="block text-center bg-blue-600 text-white py-2 rounded-full mt-4">
                Donate
            </a>

</div>
    </div>

</nav>

Related Examples

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.8k
Navbar compoent

Amit Pachange

3 years ago

17.4k
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.3k
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

4k
animated navigation bar

Md. Tofayel islam

1 year ago

3.2k
NavBar

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

1 year ago

3k
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.4k
Nav Bar
Animated Mobile Dropdown menu

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

1 year ago

3.1k