Nav
Nav là điều hướng dọc của ứng dụng, giúp người dùng chuyển giữa các khu vực chính.
Gồm NavItem (icon + nhãn), NavCategory có thể thu gọn (NavCategoryItem + NavSubItemGroup + NavSubItem), NavSectionHeader và NavDivider. Mục chọn dùng nền tint brand, chữ brand-foreground-2 và thanh chỉ báo 4px ở mép đầu; category đang đóng nhưng chứa mục chọn cũng hiện chỉ báo.
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 { Nav, NavItem, NavCategory, NavCategoryItem, NavSubItemGroup, NavSubItem, NavSectionHeader, NavDivider,} 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.
Category, section header & divider
Controlled với selectedValue / onNavItemSelect; defaultOpenCategories mở sẵn nhóm.
Density small
density="small" — mục cao 32px cho không gian hẹp.
Cách dùng
Nên
- Nhãn ngắn gọn, là danh từ chỉ khu vực (“Báo cáo”, “Cài đặt”).
- Dùng NavCategory để nhóm tối đa 1 cấp con.
- Đặt Nav trên nền shell-nav, chỉ tô brand cho mục đang chọn.
Không nên
- Không phủ brand lên toàn bộ thanh điều hướng.
- Không lồng category quá một cấp.
- Không đặt hành động (Lưu, Xoá) vào Nav — Nav chỉ để điều hướng.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| selectedValue / defaultSelectedValuestring | Mặc định: — | Mục đang chọn. |
| onNavItemSelect(value: string, data: { categoryValue? }) => void | Mặc định: — | Gọi khi chọn NavItem / NavSubItem. |
| openCategories / defaultOpenCategoriesstring[] | Mặc định: [] | Các NavCategory đang mở. |
| onNavCategoryItemToggle(value: string, open: boolean) => void | Mặc định: — | Gọi khi mở / đóng category. |
| multipleboolean | Mặc định: true | Cho phép mở nhiều category cùng lúc. |
| density"medium" | "small" | Mặc định: "medium" | Mục cao 40 / 32px. |
| material"glass" | "glass-clear" | Mặc định: — | Yugen Labs — sidebar nổi bằng glass (bo góc, đệm, đổ bóng). |
| NavItem | Mặc định: — | Có href → thẻ <a>; asChild cho link router; tooltip là nhãn hiện khi sidebar của AppShell thu về icon (mặc định: chữ của mục). |
| NavCategory | Mặc định: — | Khoá của nhóm (dùng trong openCategories). |
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.nav
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| labelstring aria-label mặc định của thẻ <nav>. | Mặc định (tiếng Anh)"Main navigation" | messagesVi"Điều hướng chính" |