--- title: "Menu" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Menu for navigation lists, sidebars, and dropdowns. Icons, active states, and nested submenus—fully accessible without JavaScript." url: https://frutjam.com/vi/components/menu --- # Menu Component Các thành phần menu hiển thị danh sách hành động hoặc tùy chọn điều hướng có tổ chức. Được xây dựng bằng các danh sách HTML ngữ nghĩa và các thành phần liên kết, hệ thống menu Frutjam hỗ trợ bố cục dọc và ngang, menu lồng nhau, biểu tượng và trạng thái hoạt động. Có thể truy cập hoàn toàn bằng điều hướng bằng bàn phím, các menu tích hợp liền mạch với danh sách thả xuống, thanh bên và mẫu điều hướng theo ngữ cảnh. Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào. | Lớp học | Kiểu | Sự miêu tả | | --------------- | --------------- | ---------------------------------------------------- | | menu | Căn cứ | Danh sách dọc các mục điều hướng hoặc hành động | | menu-item | Công cụ sửa đổi | Mục có thể nhấp riêng lẻ bên trong menu | | menu-title | Công cụ sửa đổi | Nhãn phần không tương tác | | menu-horizontal | Công cụ sửa đổi | Bố cục ngang | | menu-vertical | Công cụ sửa đổi | Bố cục dọc (mặc định) | | menu-active | Công cụ sửa đổi | Buộc trạng thái hoạt động/được đánh dấu trên một mục | | menu-disabled | Công cụ sửa đổi | Giao diện bị vô hiệu hóa cho một mục menu | | menu-xs | Kích cỡ | Cực nhỏ | | menu-sm | Kích cỡ | Bé nhỏ | | menu-md | Kích cỡ | Trung bình (mặc định) | | menu-lg | Kích cỡ | Lớn | | menu-xl | Kích cỡ | Cực lớn | ## Cách sử dụng cơ bản ## Menu ngang ```html ``` ## Menu dọc ```html ``` ## Menu có biểu tượng và văn bản ```html ``` ## Menu đáp ứng: dọc trên màn hình nhỏ, ngang trên màn hình lớn ```html ``` ## Kích thước thực đơn ```html ``` ## Thực đơn có tiêu đề ```html ``` ## Menu có dòng dọc có tiêu đề là cha mẹ ```html ``` ## Menu có các mục bị vô hiệu hóa ```html ``` ## Menu có mục đang hoạt động ```html ``` ## Menu với menu con ```html ``` ## Menu với menu con có thể thu gọn ```html ``` ## Menu dọc chỉ có biểu tượng ```html ``` ## Menu ngang chỉ có biểu tượng ```html ``` ## Menu chỉ có biểu tượng với chú giải công cụ ```html ``` ## Menu chỉ có biểu tượng (ngang) với chú giải công cụ ```html ``` ## Menu có biểu tượng và huy hiệu (đáp ứng) ```html ``` ## Cây tập tin ```html ``` ## Menu con ngang ```html ``` ## Menu Mega với menu con (đáp ứng) ```html ``` ## Có thể thu gọn với menu con (đáp ứng) ```html ```