# HierarchyHeader

> Drill-down path, pass it as the frame `legend`.

Source: https://ui.jcsoftdev.com/docs/components/hierarchy-header

Drill-down path, pass it as the frame `legend`. Always first in the frame,
even when the legend moves above the drawing.

## Import

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

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

## Usage

```tsx
export const Default: Story = {
  render: () => <HeaderDemo start={deepest.id} />,
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `path` * | `readonly HierarchyNode[]` |  |  |
| `onSelect` * | `(id: string) => void` |  |  |
| `labels` * | `HierarchyLabels` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-hierarchyheader--default)
- [At Root](/storybook/?path=/story/charts-primitives-hierarchyheader--at-root)

## Source

`packages/ui/src/charts/core/hierarchy-chart.tsx`