Skip to content

Tree Item

View .md Download

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

<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

npm install @nana-tec/ui-components

Import

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

Basic usage

<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

Properties

Property	Attribute	Type	Default	Description
`badge`	—	`string \| undefined`	`—`	Trailing badge text.
`disabled`	—	`boolean`	`false`	Disabled — blocks selection, expansion, and keyboard interaction.
`expanded`	—	`boolean`	`false`	Expanded state of a branch node.
`icon`	—	`string \| undefined`	`—`	Leading icon name (a `nana-icon` name).
`label`	—	`string`	`''`	Plain-text label. Ignored when the `label` slot is used.
`lazy`	—	`boolean`	`false`	Treat as a branch whose children load on first expand.
`loading`	—	`boolean`	`false`	Show a loading spinner in place of the chevron.
`selected`	—	`boolean`	`false`	Selected state (the tree controls this).

Events

Event	Description
`nana-tree-item-toggle`	Internal: expanded state changed (handled by the tree).
`nana-tree-item-activate`	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
`::part(item)`	The node row.
`::part(chevron)`	The expand/collapse chevron.
`::part(icon)`	The leading icon.
`::part(label)`	The label.
`::part(badge)`	The trailing badge.
`::part(children)`	The nested children container.

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

Storybook

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

View in Storybook