Breadcrumb
Breadcrumb cho biết vị trí hiện tại trong cấu trúc phân cấp và cho phép quay lại các cấp cha.
Mục cuối là trang hiện tại: chữ semibold, aria-current="page", không bấm được. Ba kích thước small, medium, large. Truyền items + maxDisplayedItems để tự gom các mục giữa vào menu “…”.
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 { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } 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.
Kích thước & icon
small, large; icon đặt ở mục gốc.
Thu gọn mục giữa
items + maxDisplayedItems: các mục vượt quá được gom vào menu “…”.
Cách dùng
Nên
- Đặt Breadcrumb ở đầu trang, phía trên tiêu đề.
- Thu gọn mục giữa khi đường dẫn dài; luôn giữ mục gốc và mục hiện tại.
- Nhãn mỗi mục khớp với tiêu đề trang đích.
Không nên
- Không dùng Breadcrumb thay cho điều hướng chính.
- Không cho mục hiện tại bấm được.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| size"small" | "medium" | "large" | Mặc định: "medium" | Chiều cao 24 / 32 / 40px. |
| items{ key?, label, href?, onClick?, icon? }[] | Mặc định: — | Chế độ dữ liệu: tự chèn divider, mục cuối là trang hiện tại. |
| maxDisplayedItemsnumber | Mặc định: — | Số mục tối đa hiển thị (với items); phần giữa vào menu “…”. Code của menu nạp lúc cần, ngay sau khi nút “…” hiện. |
| overflowIndexnumber | Mặc định: 1 | Số mục đầu được giữ trước nút “…”. |
| BreadcrumbButton | Mặc định: — | Trang hiện tại: semibold, aria-current="page", không bấm được. |
| BreadcrumbButton | Mặc định: — | Có href → thẻ <a>, không có → <button>; asChild cho link router. |
| aria-labelstring | Mặc định: "Breadcrumb" | Nhãn của 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.breadcrumb
| 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)"Breadcrumb" | messagesVi"Đường dẫn điều hướng" |
| overflowstring aria-label của nút "…" (BreadcrumbOverflow). | Mặc định (tiếng Anh)"More items" | messagesVi"Hiện thêm mục" |