Breadcrumb

Đường dẫn từ đỉnh app tới trang hiện tại: Dự án, Werewolf, Cài đặt. Mỗi cấp cha là một link chữ secondary; trang hiện tại là chữ primary, không phải link. Một caret nằm giữa các bước.

npm: 2 trực tiếp, 3 tổng
registry: 2 trực tiếp, 2 tổng

Xem trước

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#projects">Dự án</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#werewolf">Werewolf</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Cài đặt</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Cách dùng

Khi nào dùng

Cho biết trang nằm ở đâu, trên các trang sâu từ hai cấp trở lên, phía trên title của trang: Dự án, Werewolf, Cài đặt.
Để người dùng quay lên bất kỳ trang cha nào trong một bước.

Khi nào không dùng

Các bước của một luồng, chẳng hạn checkout.
Điều hướng chính của app.
Các phần của cùng một trang. Dùng Tabs.

Ví dụ

Đường dẫn

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#projects">Dự án</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#werewolf">Werewolf</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Cài đặt</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Đường dẫn dài

Các bước giữa nằm trong một menu, sau một trigger có tên.

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#projects">Dự án</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" iconOnly aria-label="Hiện đường dẫn đầy đủ">
            <BreadcrumbEllipsis />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem asChild>
            <a href="#werewolf">Werewolf</a>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <a href="#components">Thành phần</a>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Nên và không nên

Nên

Hiện nó trên các trang sâu từ hai cấp trở lên, phía trên title của trang.
Đặt tên mỗi bước theo title của trang đó.
Thu phần giữa của đường dẫn dài vào một menu, và giữ bước đầu cùng hai bước cuối.

Không nên

Đừng biến trang hiện tại thành một link.
Đừng dùng nó cho các bước của một luồng; nó cho biết trang nằm ở đâu, không phải tiến độ.
Đừng dùng nó như điều hướng duy nhất của app.

Props

Tên	Kiểu	Giá trị	Mặc định	Mô tả
asChild	boolean	-	false	Đặt trên BreadcrumbLink. Render child (link router của app) với giao diện của link.

Slot

Tên	Bắt buộc	Mô tả
list	có	BreadcrumbList với một BreadcrumbItem cho mỗi bước và một BreadcrumbSeparator giữa các bước. Item cuối chứa BreadcrumbPage.

Cấu tạo

Phần	Mô tả
root	Breadcrumb: một nav được đặt tên Breadcrumb.
list	BreadcrumbList: các bước trên một hàng ngắt dòng được, chữ secondary 14px, gap-sm.
item	BreadcrumbItem: một bước.
link	BreadcrumbLink: một cấp cha, link chữ secondary, chuyển sang primary và gạch chân khi hover. asChild nhận component link riêng của app.
current	BreadcrumbPage: trang hiện tại bằng chữ primary, aria-current="page".
separator	BreadcrumbSeparator: Tabler ChevronRight, 16px, secondary; truyền children để dùng dấu khác.
ellipsis	BreadcrumbEllipsis: Tabler Dots, 16px, cho các bước bị lược khỏi đường dẫn dài.

Role: navigation

Phím	Hành động
Tab	Đi qua các link; trang hiện tại và các caret không focus được.

Nav được đặt tên Breadcrumb, nên trình đọc màn hình liệt kê nó cùng các landmark của trang. Truyền aria-label để đổi tên.
Các bước là một danh sách có thứ tự. Trang hiện tại mang aria-current="page".
Các caret và ellipsis chỉ để trang trí và bị ẩn khỏi trình đọc màn hình. Đường dẫn đã thu gọn nằm trong DropdownMenu có trigger được đặt tên, chẳng hạn Hiện đầy đủ đường dẫn.
Caret đảo chiều trên trang từ phải sang trái.

Cài đặt

npx werewolf-ui add breadcrumb

Chạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.