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

navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

8.8k
Navbar with two CTA buttons

Author:
Juraj

9 months ago

1.5k
chair
by salvator

Author:
Baraka Salvator

5 months ago

645
Navbar with Icon on the left, links and call to actions on the right

Author:
Anonymous

1 year ago

3.4k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

4.9k
basichtml
this is basic html

Author:
Anonymous

4 months ago

378
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 year ago

3k
less is more
less is more by salvator

Author:
Baraka Salvator

4 months ago

735
flower
by salvator

Author:
Baraka Salvator

5 months ago

869
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.

Author:
irahoza daniel

5 months ago

495
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

1.4k
Navigation bar
Navbar

Author:
Aman kumar

1 year ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components