# ChartBreadcrumb

> Drill-down path of a hierarchy chart.

Source: https://ui.jcsoftdev.com/docs/components/chart-breadcrumb

Drill-down path of a hierarchy chart. Every ancestor is a button that
zooms back out to it; the current node is marked with `aria-current`.

## Import

```ts
import { ChartBreadcrumb } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
<ChartBreadcrumb items={trail} label="Ruta de la jerarquía" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `readonly ChartBreadcrumbItem[]` |  | Root first, current node last. |
| `onSelect` * | `(id: string) => void` |  |  |
| `label` * | `string` |  | Accessible name of the navigation landmark. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-chartbreadcrumb--default)
- [Root Only](/storybook/?path=/story/charts-primitives-chartbreadcrumb--root-only)
- [Interactive](/storybook/?path=/story/charts-primitives-chartbreadcrumb--interactive)

## Source

`packages/ui/src/charts/core/breadcrumb.tsx`