@ark-ui/react/menu + Tailwind CSS v4

Ark Menu

Thành phần Menu thả xuống đa năng, hoàn toàn tuân thủ tiêu chuẩn tiếp cận WAI-ARIA Menu Button Pattern dựa trên máy trạng thái Zag.js của Ark UI và hệ thống thiết kế Tailwind CSS v4. Hỗ trợ điều hướng bàn phím toàn diện, menu lồng nhau (submenus), menu ngữ cảnh (chuột phải), checkbox, radio items, tính toán vị trí thông minh và cung cấp cả hai phong cách: Tiện ích cấp cao (Convenience API) lẫn Ghép nối linh hoạt (Compound API).

1. Cơ bản (Basic Usage)

Khởi tạo menu thả xuống chỉ với một component cấp cao gọn gàng, tự động định vị và quản lý trạng thái.

Mục vừa chọn: (chưa chọn)

2. Biểu tượng & Phím tắt bàn phím (Icons & Shortcuts)

Tích hợp slot icon đầu dòng và nhãn phím tắt bàn phím chuẩn macOS/Windows trực quan, dễ nhận biết.

Hành động vừa thực hiện: (chưa có)

3. Phân nhóm mục & Tiêu đề nhóm (Grouped with Labels)

Tổ chức các mục liên quan thành các khối mạch lạc bằng Group, GroupLabel và đường phân cách Separator.

4. Menu lồng nhau đa cấp (Nested Submenus)

Mở rộng menu phụ theo tầng bậc với Menu.TriggerItem và chuyển cảnh mượt mà khi hover hoặc dùng phím mũi tên.

Thao tác đã chọn: (chưa chọn)

5. Hộp kiểm tra trạng thái (Checkbox Items)

Bật hoặc tắt nhiều tùy chọn độc lập mà không cần đóng menu, có biểu tượng checkmark mượt mà.

Sidebar: BậtStatus Bar: BậtTự động lưu: Tắt

6. Lựa chọn đơn nguyên (Radio Items)

Nhóm lựa chọn 1 trong nhiều phương án (chế độ xem, sắp xếp) với dấu tròn chỉ thị radio đồng bộ màu chủ đề.

Hiển thị: grid

Sắp xếp: date

7. Thao tác nhạy cảm & Cảnh báo (Destructive Items)

Biến thể màu đỏ cảnh báo dành riêng cho các hành vi xóa, hủy kích hoạt hoặc đăng xuất tài khoản.

8. Menu ngữ cảnh chuột phải (Context Menu)

Bấm chuột phải hoặc nhấn giữ trên màn hình cảm ứng tại vùng chỉ định để hiển thị menu ngữ cảnh theo tọa độ con trỏ.

Vùng tương tác menu ngữ cảnh

Nhấp chuột phải vào bất kỳ điểm nào trong khung này (hoặc nhấn giữ trên thiết bị cảm ứng) để mở Menu

9. Điều khiển trạng thái từ bên ngoài (Controlled Mode)

Lập trình viên toàn quyền đóng hoặc mở menu thông qua React State với prop open và sự kiện onOpenChange.

Trạng thái Controlled:CLOSED (Đang đóng)

10. Kích thước & Phong cách diện mạo (Sizes & Variants)

3 kích thước (sm, md, lg) kết hợp 4 diện mạo trực quan: default, subtle, elevated và hiệu ứng kính mờ glass.

1. So sánh 3 kích cỡ (Sizes: sm, md, lg)

2. Các biến thể diện mạo (Variants: default, subtle, elevated, glass)

11. Hướng neo & Mũi tên định hướng (Placements & Arrow)

Neo menu ở 4 hướng chính (top, bottom, left, right) với mũi tên trỏ vào nút kích hoạt đồng bộ chuẩn xác.

12. So sánh Convenience API và Compound API

Linh hoạt lựa chọn giữa Convenience API cho nhu cầu thường ngày hoặc Compound API khi cần can thiệp sâu.

Convenience API

Ngắn gọn, tích hợp sẵn Trigger & Positioner

Chỉ cần 1 component duy nhất bọc prop trigger. Rất thích hợp cho 90% các dropdown menu thông thường.

Compound API

Tự do bố cục, mở rộng linh hoạt không giới hạn

Sử dụng từng viên gạch ghép nối: <ArkMenu.Root>, <ArkMenu.Trigger>, <ArkMenu.Positioner>, <ArkMenu.Content>.

13. Mũi tên định hướng chuyên sâu (Menu.Arrow & ArrowTip)

Khai báo trực tiếp các phần tử <ArkMenu.Arrow> và <ArkMenu.ArrowTip> trong mô hình Compound, kết hợp giao diện hồ sơ người dùng (User Avatar) và menu tác vụ thanh công cụ (Toolbar).

Cơ chế hoạt động của Mũi tên (`Menu.Arrow` & `Menu.ArrowTip`)

Ark UI tự động tính toán tọa độ và góc xoay của <Menu.ArrowTip> theo hướng neo (placement). Mũi tên có kích thước chuẩn --arrow-size: 12px đến 16px với đường viền và màu nền đồng bộ với bề mặt nổi của Menu.

1. Menu Hồ sơ người dùng với Mũi tên chỉ hướng (`ArkMenu.Arrow` cỡ lớn 14px)

2. Menu Tác vụ Thanh công cụ (Toolbar Menu có Arrow định hướng)

Thanh công cụ:

Notifications