# Tree Item

> Source: https://design.nanatec.co.ke/components/tree-item/
> A single node in a `nana-tree`. Branch nodes nest further `nana-tree-item` elements in the default slot; leaf nodes have none. The label comes from the `label` attribute (or the `label` slot for rich content).

A single node in a `nana-tree`. Branch nodes nest further `nana-tree-item` elements in the default slot; leaf nodes have none. The label comes from the `label` attribute (or the `label` slot for rich content).

## Preview

```html
<nana-tree style="width:100%">
  <nana-tree-item label="Parent" icon="folder" expanded>
    <nana-tree-item label="Child one" icon="code"></nana-tree-item>
    <nana-tree-item label="Child two" icon="code" selected></nana-tree-item>
  </nana-tree-item>
</nana-tree>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-tree style="width:100%">
  <nana-tree-item label="Parent" icon="folder" expanded>
    <nana-tree-item label="Child" icon="code"></nana-tree-item>
  </nana-tree-item>
</nana-tree>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-tree-item-toggle` | `CustomEvent` | Internal: expanded state changed (handled by the tree). |
| `nana-tree-item-activate` | `CustomEvent` | Internal: row activated (handled by the tree). |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Child `nana-tree-item` nodes. |
| `label` | Rich label content (overrides the `label` attribute). |

## CSS Parts

| Part | Description |
|---|---|
| `item` | The node row (icon, label, and badge) |
| `chevron` | The expand/collapse chevron |
| `icon` | The leading icon |
| `label` | The label |
| `badge` | The trailing badge |
| `children` | The nested children container |

## 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-item--docs