# Breadcrumb

The path from the top of the app to the current page: Projects, Werewolf, Settings. Each ancestor is a link in secondary text; the current page is primary text, not a link. A caret sits between them.

## Cách dùng

### Khi nào dùng

- Show where a page sits on pages two or more levels deep, above the page title: Projects, Werewolf, Settings.
- Let users go back up to any parent page in one step.

### Khi nào không dùng

- The steps of a flow, such as checkout.
- The main navigation of the app.
- Sections of one page. Use Tabs.

## Ví dụ

### Path

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#projects">Projects</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#werewolf">Werewolf</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Settings</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

### Long path

The middle steps sit in a menu behind a named trigger.

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#projects">Projects</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" iconOnly aria-label="Show the full path">
            <BreadcrumbEllipsis />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem asChild>
            <a href="#werewolf">Werewolf</a>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <a href="#components">Components</a>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Nên và không nên

### Nên

- Show it on pages two or more levels deep, above the page title.
- Name each step as its page is titled.
- Collapse the middle of a long path into a menu, and keep the first and the last two steps.

### Không nên

- Don't make the current page a link.
- Don't use it for the steps of a flow; it shows where a page sits, not progress.
- Don't use it as the only navigation of the app.

## Props

| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` |  | `false` | Set on BreadcrumbLink. Renders the child (the app's router link) with the link's look. |

### Slot

| Tên | Bắt buộc | Mô tả |
| --- | --- | --- |
| `list` | có | BreadcrumbList with a BreadcrumbItem per step and a BreadcrumbSeparator between steps. The last item holds a BreadcrumbPage. |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `root` | Breadcrumb: a nav named Breadcrumb. |
| `list` | BreadcrumbList: the steps in a row that wraps, 13px secondary text, gap-sm. |
| `item` | BreadcrumbItem: one step. |
| `link` | BreadcrumbLink: an ancestor, a link in secondary text that turns primary and underlined on hover. asChild takes the app's own link component. |
| `current` | BreadcrumbPage: the current page in primary text, aria-current="page". |
| `separator` | BreadcrumbSeparator: a Tabler ChevronRight, 16px, secondary; pass children for another mark. |
| `ellipsis` | BreadcrumbEllipsis: Tabler Dots, 16px, for the steps left out of a long path. |

## Khả năng truy cập

Role: `navigation`

| Phím | Hành động |
| --- | --- |
| `Tab` | Moves through the links; the current page and the carets are not focusable. |

- The nav is named Breadcrumb, so screen readers list it with the page's landmarks. Pass aria-label to rename it.
- The steps are an ordered list. The current page carries aria-current="page".
- The carets and the ellipsis are decorative and hidden from screen readers. A collapsed path goes in a DropdownMenu whose trigger is named, such as Show the full path.
- The caret turns around in a right-to-left page.

## Cài đặt

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/breadcrumb.json
```

Lệnh này thêm luôn `styles/werewolf.css`, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau `@import "tailwindcss"`, với đường dẫn tính từ file CSS đó (từ `app/globals.css` là `@import "../styles/werewolf.css"`).