Yugen UI

NavigationMenu

NavigationMenu là menu điều hướng cho header website: link và nút mở bảng thả xuống (mega menu).

Dựng trên Radix Navigation Menu, theo mẫu WAI-ARIA disclosure navigation: <nav> có nhãn, nút mở bảng có aria-expanded, link trang hiện tại có aria-current="page" (prop active). Rê chuột mở bảng sau một khoảng trễ ngắn để không mở nhầm, chuyển giữa các nút không trễ lại; activationMode="manual" chỉ mở khi bấm. Bàn phím: Tab đi qua các mục, Enter / Space mở, mũi tên trái / phải chuyển mục, Tab vào bảng, Esc đóng và trả focus về nút. Bảng nằm trong một khung nổi đổi cỡ theo nội dung (Motion token, tắt khi giảm chuyển động); hướng RTL theo YugenProvider. Link trong bảng nhận icon và description; asChild để dùng Link của router. Màn hình hẹp: đặt cùng các link vào Drawer, như sidebar của AppShell.
Sakura Studio

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 {  NavigationMenu,  NavigationMenuList,  NavigationMenuItem,  NavigationMenuTrigger,  NavigationMenuContent,  NavigationMenuLink,  NavigationMenuIndicator,} 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.

Sakura Studio

Màn hình hẹp: Drawer

Container query: header hẹp thì ẩn menu, nút mở Drawer chứa cùng các link bằng Nav.

Trang hiện tại: /blog

Link của router (asChild) & trang hiện tại

active đặt aria-current="page" và thanh brand dưới link.

Chỉ mở khi bấm

activationMode="manual": rê chuột hay focus không mở bảng — hợp với màn hình cảm ứng và header dày đặc.

Cách dùng

Nên
  • Giữ 3–7 mục ở hàng trên cùng; gom trang con vào bảng thả xuống có tiêu đề và mô tả ngắn.
  • Đánh dấu trang hiện tại bằng active để có aria-current="page".
  • Trên màn hình hẹp, chuyển các link vào Drawer thay vì thu nhỏ menu.
Không nên
  • Không dùng NavigationMenu cho lệnh (Lưu, Xoá…) — dùng Menu hoặc Menubar.
  • Không đặt nút mở bảng làm link: bấm vào nút chỉ mở bảng; trang tổng quan đặt thành một link trong bảng.
  • Không dùng cho điều hướng trong ứng dụng có sidebar — dùng Nav / AppShell.

Props

Prop · KiểuMặc địnhMô tả
value / defaultValue / onValueChangestring / (value: string) => voidMặc định: —Mục đang mở (controlled / uncontrolled); "" khi đóng.
activationMode"automatic" | "manual"Mặc định: "automatic"automatic: rê chuột / focus mở bảng; manual: chỉ khi bấm.
delayDuration / skipDelayDurationnumberMặc định: 200 / 300Độ trễ (ms) trước khi rê chuột mở bảng; thời gian chuyển sang nút khác không cần trễ lại.
orientation"horizontal" | "vertical"Mặc định: "horizontal"Hướng của danh sách và phím mũi tên.
aria-labelstringMặc định: "Main"Nhãn của thẻ <nav>.
viewportClassNamestringMặc định: —Class cho khung nổi chứa bảng đang mở.
NavigationMenuItem.valuestringMặc định: —Khoá của mục (mặc định tự sinh).
NavigationMenuLink.activebooleanMặc định: —Trang hiện tại: aria-current="page" và kiểu đang chọn.
NavigationMenuLink.icon / descriptionReactNodeMặc định: —Icon và mô tả một dòng (link trong NavigationMenuContent).
NavigationMenuLink.asChildbooleanMặc định: —Dùng phần tử con (Link của router) làm link.
NavigationMenuIndicatorcomponentMặc định: —Mũi tên nhỏ dưới nút đang mở (đặt trong NavigationMenuList).
navigationMenuTriggerClassstringMặc định: —Class của nút / link ở hàng trên cùng, cho phần tử tự dựng.
refRef<HTMLElement>Mặc định: —Trỏ tới thẻ <nav>.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.navigationMenu

Khoá · KiểuMặc định (tiếng Anh)messagesVi
labelstring

aria-label của thẻ <nav> (khi không truyền aria-label).

Mặc định (tiếng Anh)"Main"messagesVi"Điều hướng chính"