# Tree

> Source: https://design.nanatec.co.ke/components/tree/
> A hierarchical list for file systems, navigation, and any parent-child data. Compose `nana-tree-item` nodes inside it. Implements the ARIA tree pattern: roving tabindex, arrow-key navigation, type-ahead, and Home/End/`*` support.

A hierarchical list for file systems, navigation, and any parent-child data. Compose `nana-tree-item` nodes inside it. Implements the ARIA tree pattern: roving tabindex, arrow-key navigation, type-ahead, and Home/End/`*` support.

## Preview

```html
<nana-tree style="width:100%">
  <nana-tree-item>
    Parent
    <nana-tree-item>Child one</nana-tree-item>
    <nana-tree-item>Child two</nana-tree-item>
  </nana-tree-item>
</nana-tree>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/tree";
```

## Basic usage

```html
<nana-tree style="width:100%">
  <nana-tree-item>
    Parent
    <nana-tree-item>Child one</nana-tree-item>
    <nana-tree-item>Child two</nana-tree-item>
  </nana-tree-item>
</nana-tree>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-selection-change` | `CustomEvent` | Selection changed (`detail.selection`). |
| `nana-expand` | `CustomEvent` | A branch expanded (`detail.item`). |
| `nana-collapse` | `CustomEvent` | A branch collapsed (`detail.item`). |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The top-level `nana-tree-item` nodes. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-tree-indent` | — | Indent step per depth level. |
| `--nana-tree-row-height` | — | Node row height. |
| `--nana-tree-connector` | — | Connector line colour. |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The tree container |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/breadcrumb/">Breadcrumb</a></li>
  <li><a href="/components/breadcrumb-item/">Breadcrumb Item</a></li>
  <li><a href="/components/menu/">Menu</a></li>
  <li><a href="/components/menu-item/">Menu Item</a></li>
  <li><a href="/components/menu-label/">Menu Label</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-tree--docs