navbar in tailwindcss

it is a navbar for practise purpose

This tailwind example is contributed by Md. Aynal Haque, on 04-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author Md. Aynal Haque

Tailwind v3.4 732 2

Fork Fullscreen

<button id="hamburger" class="md:hidden">
      <img class="h-12 w-12 block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" alt="Menu" />
      <img class="h-12 w-12 hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" alt="Close" />
    </button>

<div id="menu"
         class="absolute top-full left-0 w-full md:static md:flex flex-col md:flex-row bg-teal-100 md:bg-transparent transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out">
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Home</a>
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Products</a>
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Pricing</a>
      <a href="#" class="block md:inline-block px-3 py-3 text-teal-900 hover:text-teal-500 border-b-2 border-teal-900 md:border-none">Contact</a>
      <a href="#" class="block md:inline-block w-full md:w-auto px-4 py-2 mt-2 md:mt-0 bg-teal-900 text-white hover:bg-teal-500 md:rounded text-center">Create Account</a>
    </div>
  </nav>

<script>
    const hamburger = document.getElementById('hamburger');
    const menu = document.getElementById('menu');
    const icons = hamburger.querySelectorAll('img');

hamburger.addEventListener('click', () => {
      menu.classList.toggle('-translate-x-full');
      icons.forEach(icon => icon.classList.toggle('hidden'));
    });
  </script>

</body>

Related Examples

Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

17.9k
Repsonsive Navbar
fully respondive navbar

Ganesh Salunke

6 months ago

470
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

2 months ago

303
Tailwind Sidebar Layout

Junior Gauze

1 year ago

2.5k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

225
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

3 months ago

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

Rathanak Phan

1 year ago

2.3k
mobil navigation
mobil navigation

Omer fils ELENGA

10 months ago

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

TailwindFlex

4 years ago

20.5k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

2 months ago

388
Sidebar with only icons

Rajesh Maheshwari

1 year ago

2.8k
Admin panel with collapsible menus

Rajesh Maheshwari

1 year ago

6.5k