# AppBreadcrumb

The page breadcrumb used at the top of every screen. Accepts label-or-i18n-key items, orders them
by `priority`, links all but the last crumb, and broadcasts the current page name via a
`rvn-active-page-title` event so a host header can show it on mobile (where the breadcrumb is hidden).

## Install

```
src/components/AppBreadcrumb.tsx
```

Requires `antd` and `react-router-dom`.

## Usage

```tsx
import AppBreadcrumb from '@/components/AppBreadcrumb';

const ITEMS = [
  { labelKey: 'reference.title', to: '/reference' },
  { labelKey: 'reference.currencies' },
];

<AppBreadcrumb items={ITEMS} translate={t} />
```

Each item: `{ label?, labelKey?, priority?, to?, external? }`. Pass `label` for a literal string, or
`labelKey` + `translate` for i18n. The last crumb renders as the current page (`.text-primary`, no link).

## Notes

- Hide it below `md` (the host header shows the page name instead) unless the page needs it visible.
- Place it as the first element on the page, above `AppActionBar`.

Part of the **RVN Design Kit** — design-kit.raffles.com.vn