Breadcrumb
Mẫu chuẩnĐường về các cấp cha. Cho biết vị trí hiện tại trong một cây phân cấp, không phải tiến trình đã đi qua.
Playground
Đổi brand, theme, số cấp và trạng thái. Không có prop size, không có prop variant.
Các link đều dẫn tới # và chặn điều hướng thật để bấm thử không rời trang. Cấp cuối là trang hiện tại, không phải link.
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@nexobox/ui";
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Trang chủ</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Dự án</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Khi nào sử dụng
Nên dùng
Cho người dùng biết vị trí hiện tại trong một cây phân cấp có thật, và cho đường quay lên từng cấp cha. Hữu ích khi người dùng đến thẳng một trang sâu từ tìm kiếm hoặc từ link ngoài.
Tránh dùng
Các bước trong một luồng tuần tự — đó là tiến trình, không phải vị trí. Điều hướng chính của ứng dụng. Một cây chỉ một cấp. Lịch sử duyệt của người dùng — breadcrumb phản ánh cấu trúc, không phản ánh họ đã đi qua đâu.
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Breadcrumb | nav với aria-label, mặc định "Đường dẫn". |
| 2 | BreadcrumbList | ol — thứ tự các cấp có nghĩa. |
| 3 | BreadcrumbItem | li bao mỗi cấp. |
| 4 | BreadcrumbLink | a, hoặc Slot khi asChild. Dùng cho cấp cha. |
| 5 | BreadcrumbPage | span[aria-current=page]. Cấp hiện tại — không phải link. |
| 6 | BreadcrumbSeparator | li[aria-hidden] chứa glyph ArrowRight01Icon, không phải ký tự gõ tay. |
Variants & states
Không có variant, không có size, không có mục thu gọn "…". Loading, error, empty, disabled: không có.
Một cấp cha, một cấp hiện tại.
flex-wrap bắt buộc trên BreadcrumbList — cột hẹp buộc đường dẫn xuống dòng thay vì tràn ngang.
Chữ đổi sang màu chữ chính, gạch dưới.
Outline theo --nf-component-focus-*. Ảnh mô phỏng bằng class xem trước, không phải Tab thật.
Không phải link. Không hover, không focus-visible, không aria-current nào khác ngoài "page".
Design tokens
Giá trị theo NexoCrew / light đang chọn trong playground. BreadcrumbList và BreadcrumbItem đọc --nf-component-breadcrumb-gap (alias tới {foundation.space.2}). BreadcrumbLink đọc --nf-semantic-text-secondary, --nf-semantic-text-primary, --nf-component-breadcrumb-link-radius (alias tới {foundation.radius.small}), --nf-component-focus-width, --nf-component-focus-color, --nf-component-focus-offset, --nf-component-transition-duration, --nf-component-transition-easing. BreadcrumbPage đọc --nf-semantic-text-primary. BreadcrumbSeparator đọc --nf-semantic-text-muted. Nhóm token component.breadcrumb.* trong packages/ui/tokens/component.tokens.json có hai alias — gap và linkRadius — sinh ra đúng hai custom property --nf-component-breadcrumb-gap và --nf-component-breadcrumb-link-radius ở trên.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| Breadcrumb.aria-label | "Đường dẫn" | Ghi đè được bằng aria-label của người dùng. |
| BreadcrumbLink.asChild | false | true dùng Slot để lồng next/link thay <a>. |
| BreadcrumbSeparator.children | ArrowRight01Icon | Nhận children để thay icon. |
Mọi type là ComponentPropsWithoutRef của phần tử HTML gốc (nav, ol, li, a, span) nên mọi thuộc tính chuẩn của phần tử đó truyền thẳng xuống.