Menubar
Menubar là thanh menu ngang cố định, kiểu ứng dụng desktop, chứa nhóm lệnh Tệp, Sửa, Xem…
Trigger là nút subtle (nền subtle-pressed khi mở). Bề mặt và mục menu dùng chung style với Menu: item cao 32px, icon, phím tắt (secondaryContent), checkbox, radio, label, divider và submenu. Mũi tên trái/phải chuyển giữa các menu khi đang mở.
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel, MenubarSub, MenubarSubTrigger, MenubarSubContent,} from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Checkbox, radio & submenu
Trạng thái bật/tắt và lựa chọn loại trừ ngay trong menu; submenu lồng 1 cấp.
Cách dùng
Nên
- Dùng cho ứng dụng soạn thảo / công cụ có nhiều lệnh phân nhóm.
- Hiện phím tắt bằng secondaryContent để người dùng học dần.
- Đặt Menubar cố định ở đầu vùng làm việc.
Không nên
- Không dùng Menubar làm điều hướng website — dùng Nav hoặc Tabs.
- Không lồng submenu quá 1 cấp.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| Menubar | Mặc định: — | Menu đang mở (controlled). |
| MenubarContent | Mặc định: "start" / 6 | Vị trí bề mặt so với trigger. |
| MenubarItem | Mặc định: — | Icon cỡ 20 và phím tắt bên phải. |
| MenubarItem | Mặc định: — | Xử lý chọn / vô hiệu hoá. |
| MenubarCheckboxItem | Mặc định: — | Bật/tắt (controlled). |
| MenubarRadioGroup | Mặc định: — | Lựa chọn loại trừ. |
| MenubarSub / MenubarSubTrigger / MenubarSubContent— | Mặc định: — | Submenu; MenubarSubTrigger nhận icon. |