Skip to content

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.

Preview

Parent Child one

Child two

<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

npm install @nana-tec/ui-components

Import

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

Basic usage

<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

Property	Type	Default	Description
`selection`	`'single' \| 'multiple' \| 'none'`	`'single'`	Selection behaviour.
`label`	`string`	`''`	Accessible name for the tree.
`size`	`'compact' \| 'default' \| 'spacious'`	`'default'`	Density scale.

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

Storybook

Explore Tree interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook