🔗 Tailwind CSS: Tạo Navigation Bar & Dropdown Menu

Dưới đây là phần tiếp theo trong chuỗi hướng dẫn thực chiến Tailwind CSS, tập trung vào thành phần phổ biến và quan trọng bậc nhất của mọi website: Navigation Bar (thanh điều hướng) và Dropdown Menu (menu thả).

NỘI DUNG

🎯 Mục tiêu

Tạo thanh điều hướng đơn giản, hiện đại, chuẩn responsive
Thêm menu thả xuống (Dropdown menu) khi hover hoặc click
Sử dụng hiệu ứng hover, transition, breakpoint linh hoạt
Có thể mở rộng cho dự án blog, portfolio, e-commerce, SaaS…

📌 Cấu trúc tổng thể

Chúng ta sẽ xây dựng:

Logo (bên trái)
Menu chính (desktop hiển thị, mobile ẩn)
Nút menu mobile (hamburger)
Menu thả (dropdown)

🧱 1. Navigation Bar cơ bản (desktop)

<header class="bg-white shadow">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <!-- Logo -->
    <a href="#" class="text-xl font-bold text-blue-600">MyBrand</a>
    
    <!-- Menu desktop -->
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-700 hover:text-blue-600">Trang chủ</a>
      <a href="#" class="text-gray-700 hover:text-blue-600">Sản phẩm</a>
      <a href="#" class="text-gray-700 hover:text-blue-600">Giới thiệu</a>
      <a href="#" class="text-gray-700 hover:text-blue-600">Liên hệ</a>
    </nav>

    <!-- Nút mobile -->
    <div class="md:hidden">
      <button id="menuToggle" class="text-gray-700 hover:text-blue-600 focus:outline-none">
        ☰
      </button>
    </div>
  </div>

  <!-- Menu mobile -->
  <div id="mobileMenu" class="md:hidden hidden px-4 pb-4 space-y-2">
    <a href="#" class="block text-gray-700 hover:text-blue-600">Trang chủ</a>
    <a href="#" class="block text-gray-700 hover:text-blue-600">Sản phẩm</a>
    <a href="#" class="block text-gray-700 hover:text-blue-600">Giới thiệu</a>
    <a href="#" class="block text-gray-700 hover:text-blue-600">Liên hệ</a>
  </div>
</header>

📌 JS cơ bản để toggle menu mobile:

<script>
  const menuToggle = document.getElementById('menuToggle');
  const mobileMenu = document.getElementById('mobileMenu');
  menuToggle.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

🧭 2. Thêm Dropdown Menu (hover trên desktop)

<div class="relative group">
  <button class="text-gray-700 hover:text-blue-600 flex items-center gap-1">
    Sản phẩm
    <svg class="w-4 h-4 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M19 9l-7 7-7-7" />
    </svg>
  </button>

  <!-- Dropdown menu -->
  <div class="absolute hidden group-hover:block bg-white shadow-md mt-2 rounded-lg z-10 min-w-[150px]">
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Web App</a>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mobile App</a>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Thiết kế UI</a>
  </div>
</div>

📌 Gắn phần này vào trong menu của desktop (thay thế thẻ <a> “Sản phẩm”).

✅ Giải thích:

Sử dụng relative + absolute để định vị dropdown
group + group-hover:block giúp dropdown hiện khi hover
z-10 đảm bảo dropdown hiển thị trên các phần tử khác

🧪 Demo kết hợp thực tế (desktop + mobile)

Khi hiển thị trên màn hình lớn (md↑):

Menu ngang
Dropdown hiển thị khi hover

Khi hiển thị trên mobile (md↓):

Menu bị ẩn, dùng nút ☰ để mở
Bạn có thể tùy chọn thêm dropdown cho mobile (click-based)

🎨 Nâng cao: Dropdown với hiệu ứng transition

<div class="absolute hidden group-hover:block bg-white shadow-md mt-2 rounded-lg z-10 min-w-[150px] transition transform origin-top scale-95 group-hover:scale-100">
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Web App</a>
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mobile App</a>
</div>

📌 Kết hợp scale, transition, origin-top → tạo cảm giác dropdown bung mượt mà.

✅ Kết luận

Bạn vừa tạo thành công:

Navigation bar đẹp, hiện đại, chuẩn responsive
Dropdown menu tương tác hover
Tương thích tốt với cả desktop & mobile

Tailwind CSS giúp bạn dựng những thành phần này mà không cần viết CSS thủ công, chỉ cần hiểu đúng cách dùng các tiện ích flex, hidden, absolute, group, transition, hover.

HTML, CSS