Home
Md. Aynal Haque
navbar in tailwindcss

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 CSS v3. It is responsive.

Navbar

Author Md. Aynal Haque

115

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

joker
joker cyber punk

Author:
Baraka Salvator

5 months ago

891
websitee

Author:
Anonymous

4 months ago

473
Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

1 year ago

2.5k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

11 months ago

3.4k
Fixed navbar

Author:
Oliver Hansen

2 years ago

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

Author:
Vikram Choudhary

2 years ago

7.3k
Responsive Bottom Nav
Fully Responsive bottom navigation bar with both light and dark modes

Author:
AKASH GANDHAR

1 year ago

3.2k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.6k
Tailwind Sidebar Layout

Author:
Junior Gauze

1 year ago

1.6k
flower
by salvator

Author:
Baraka Salvator

5 months ago

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

Author:
Rathanak Phan

10 months ago

1.7k
Transparent Navbar

Author:
Rajesh Maheshwari

8 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components