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

199

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

Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

1 year ago

2.8k
Life Tree
by salvator

Author:
Baraka Salvator

7 months ago

851
Transparent Navbar

Author:
Rajesh Maheshwari

9 months ago

1.9k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

7 months ago

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

Author:
Rathanak Phan

11 months ago

1.7k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

9 months ago

4.9k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

2 years ago

27.5k
Material 3 AppBar [Light]
A navbar/appbar that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

7 months ago

630
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 months ago

708
template hero

Author:
Raul antonio de la cruz hernandez

2 days ago

12
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.8k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components