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

Ark Navigation Menu

Thành phần Menu điều hướng cấp cao hoàn toàn tuân thủ tiêu chuẩn tiếp cận WAI-ARIA Navigation Menu 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ợ Viewport dùng chung co giãn kích thước mượt mà theo nội dung (Shared Animated Viewport), thanh chỉ báo động (Sliding Indicator), thực đơn cỡ lớn (Mega Menu) đa cột, điều hướng dọc (Vertical) và khả năng hoạt động cả ở chế độ độc lập (Standalone) lẫn kiểm soát tập trung (Controlled Mode).

1. Cơ bản (Basic Usage)

Khởi tạo menu điều hướng tiêu chuẩn kết hợp liên kết đơn giản và danh mục thả xuống nhanh chóng.

2. Viewport dùng chung co giãn linh hoạt (Shared Animated Viewport)

Hiệu ứng chuyển đổi kích thước (Width x Height) tự động và mượt mà giữa các khối nội dung khác nhau kiểu Stripe/Radix.

Rê chuột qua các mục bên dưới để quan sát Viewport tự động co giãn kích thước (Width x Height) mượt mà

3. Thanh trượt chỉ báo vị trí (Sliding Indicator)

Thanh chỉ báo trượt mượt mà theo vị trí và chiều rộng của mục trigger đang kích hoạt trên thanh menu.

Cơ chế hoạt động của Mũi tên (<ArkNavigationMenu.Indicator> & <ArkNavigationMenu.Arrow>)

Mũi tên định hướng <ArkNavigationMenu.Arrow> nằm bên trong <ArkNavigationMenu.Indicator>, tự động trượt mượt mà theo vị trí và chiều rộng của mục trigger đang kích hoạt thông qua các biến CSS --trigger-x và --trigger-width. Mũi tên nối liền mạch với Viewport và tự động hòa hợp với màu viền và nền của từng biến thể.

Biến thể Mũi tên & Khung:

4. Thực đơn cỡ lớn đa cột (Rich Mega Menu)

Bố cục thực đơn đa cột phân nhóm bằng Section, thẻ tính năng có ảnh nền gradient và các huy hiệu đánh dấu nổi bật.

5. Điều hướng dọc cho Sidebar (Vertical Orientation)

Chuyển hướng thanh điều hướng sang chế độ dọc, phù hợp với thanh bên trang quản trị (Admin Sidebar) và dashboard.

Thanh điều hướng dọc (Vertical)

6. Kích thước & Biến thể diện mạo (Sizes & Variants)

Hỗ trợ 3 kích cỡ (sm, md, lg) kết hợp 4 phong cách trực quan: default, subtle, elevated và hiệu ứng kính mờ glass.

Kích thước:

Biến thể:

7. Điều khiển từ bên ngoài (Controlled Mode)

Toàn quyền lập trình việc đóng mở và chọn tab thông qua React State với prop value và sự kiện onValueChange.

Điều khiển ngoài:

Trạng thái value hiện tại:null (Đang đóng)

8. Menu thả xuống độc lập (Standalone Dropdown)

Sử dụng nội dung thả xuống độc lập tại từng mục menu mà không cần cấu hình Viewport chung.

Mô hình Dropdown độc lập tại từng mục, không sử dụng Shared Viewport

9. Thanh Header hoàn chỉnh thực tế (Real-World Header Navbar)

Tích hợp toàn diện thanh điều hướng Header gồm Logo thương hiệu, ArkNavigationMenu ở giữa, ô tìm kiếm và các nút kêu gọi hành động (CTA).

ChillCMS

Đăng nhập Bắt đầu miễn phí

10. Mở bằng Click & Tùy chọn tương tác (Click Trigger & Persistent)

Thiết lập menu kích hoạt bằng thao tác click (disableHoverTrigger) và tùy chọn tắt tự đóng khi rê chuột ra ngoài (disablePointerLeaveClose) giúp menu hoạt động như Popover/Dropdown.

Hãy click chuột vào các mục "Khám phá" hoặc "Giải pháp" để mở thực đơn.Click outside hoặc phím Esc để đóng

Mã nguồn tương ứng:JSX Config

<ArkNavigationMenu.Root
  disableHoverTrigger
  disablePointerLeaveClose
>
  <ArkNavigationMenu.List>
    <ArkNavigationMenu.Item value="explore">
      <ArkNavigationMenu.Trigger>
        Khám phá <ArkNavigationMenu.ItemIndicator />
      </ArkNavigationMenu.Trigger>
      <ArkNavigationMenu.Content>...</ArkNavigationMenu.Content>
    </ArkNavigationMenu.Item>
  </ArkNavigationMenu.List>
  <ArkNavigationMenu.ViewportPositioner>
    <ArkNavigationMenu.Viewport />
  </ArkNavigationMenu.ViewportPositioner>
</ArkNavigationMenu.Root>

Notifications