# Breadcrumb

> Navigation trail thể hiện vị trí hiện tại trong cây hierarchy — dùng cho catalog, admin nested page, document tree.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `BreadcrumbItem[]` | required | Mảng các mốc, item cuối là current page |
| `separator` | `ReactNode` | `'/'` | Ký tự ngăn cách giữa các mốc |
| `className` | `string` | — | Override container |

### `BreadcrumbItem`

| Field | Type | Description |
|---|---|---|
| `label` | `ReactNode` | Text hiển thị |
| `href` | `string` | URL — render `<a>` |
| `onClick` | `() => void` | Render `<button>` thay vì link |

## Variants

- Item cuối luôn là current page → render `<span aria-current="page">` không clickable
- Item giữa: nếu có `href` → `<a>`, nếu chỉ có `onClick` → `<button>`

## States

- **Default**: text-text-2, hover sang `text-primary`
- **Current** (item cuối): `text-text font-medium`, không hover

## Usage

```tsx
import { Breadcrumb } from '@cowork/ui';

<Breadcrumb
  items={[
    { label: 'Trang chủ', href: '/' },
    { label: 'Sản phẩm', href: '/products' },
    { label: 'Nhang trầm An Nhiên 30cm' },
  ]}
/>
```

## Real-world example

- An Nhien product detail: `Trang chủ / Nhang / Nhang vòng / Vòng 12h`
- KHI Wellness admin: `Members / Trial / Nguyễn Thị Hằng / Edit profile` (button cho onClick navigate trong SPA)
- A-Kryphan blog: `Blog / Marketing / Cowork DNA`

## Accessibility

- `<nav aria-label="Breadcrumb">` container
- `<ol>` ordered list — screen reader đọc đúng thứ tự
- Item cuối có `aria-current="page"`
- Separator có `aria-hidden="true"` không nhiễu

## Responsive behavior

`flex-wrap` cho phép breadcrumb dài tự wrap xuống dòng trên mobile. Không truncate — full label luôn visible. Nếu cần truncate cho catalog sâu, dùng custom logic ở caller.

## Related

- [[Navbar]] — top-level nav, breadcrumb là layer thấp hơn
- [[Sidebar]] — primary navigation, breadcrumb mô tả vị trí sau khi user click vào sidebar item

## Source

`react/src/molecules/Breadcrumb.tsx`