<>📌 Dropdown là một dạng UI component giúp hiển thị danh sách các tùy chọn khi người dùng nhấp vào một nút hoặc trường đầu vào. Nó giúp tiết kiệm không gian và tối ưu hóa trải nghiệm người dùng khi cần chọn một hoặc nhiều mục từ danh sách.
📌 Ứng dụng của Dropdowns:
✔ Menu điều hướng – Hiển thị các danh mục hoặc tùy chọn menu chính.
✔ Biểu mẫu nhập liệu – Chọn quốc gia, giới tính, loại tài khoản, v.v.
✔ Bộ lọc dữ liệu – Chọn giá trị sắp xếp, bộ lọc tìm kiếm.
✔ Chuyển đổi chế độ – Đổi ngôn ngữ, đổi đơn vị tiền tệ, đổi chế độ sáng/tối.
/Các loại Dropdown phổ biến 📦
1️⃣ Basic Dropdown – Dropdown đơn giản với danh sách tùy chọn.
2️⃣ Multi-Select Dropdown – Cho phép chọn nhiều mục trong danh sách.
3️⃣ Searchable Dropdown – Dropdown có ô tìm kiếm để lọc tùy chọn nhanh hơn.
4️⃣ Nested Dropdown (Mega Menu) – Dropdown có nhiều cấp danh mục con.
5️⃣ Custom Styled Dropdown – Dropdown có thiết kế tùy chỉnh theo UI thương hiệu.
/Cấu trúc cơ bản của Dropdown 📌
Một dropdown thường có 3 phần chính:
1️⃣ Trigger (Nút mở dropdown) – Là phần mà người dùng nhấp vào để hiển thị danh sách.
2️⃣ Dropdown Menu (Danh sách tùy chọn) – Danh sách các mục có thể chọn.
3️⃣ Icons & Indicators (Biểu tượng, dấu hiệu trạng thái – tùy chọn) – Thường có dấu ⏷ / ⌄ hoặc ➕ / ➖ để chỉ trạng thái mở/đóng.
/UX Best Practices cho Dropdowns 🎨
✅ Chỉ sử dụng dropdown khi thực sự cần thiết
✔ Nếu chỉ có 2-3 tùy chọn, nên dùng radio buttons thay vì dropdown.
✔ Nếu có nhiều tùy chọn (>10 mục), thêm tính năng tìm kiếm để dễ sử dụng.
✅ Tránh dropdown lồng nhau (Nested Dropdowns)
✔ Dropdown nhiều cấp có thể làm người dùng mất phương hướng. Nếu cần nhiều danh mục con, sử dụng Mega Menu hoặc Sidebar Navigation thay thế.
✅ Cung cấp trạng thái trực quan rõ ràng
✔ Sử dụng mũi tên ⌄ hoặc ⏷ để thể hiện trạng thái dropdown đang mở/đóng.
✔ Khi chọn mục trong dropdown, nên hiển thị giá trị đã chọn trên nút dropdown.
✅ Hỗ trợ bàn phím & Accessibility (A11Y)
✔ Dropdown nên có thể mở bằng phím Enter hoặc Spacebar.
✔ Dùng aria-haspopup=”true” và aria-expanded=”true/false” để hỗ trợ trình đọc màn hình.
