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).
Show code Copy < 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 >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/tree-item " ;
< nana-tree style = " width:100% " >
< nana-tree-item label = " Parent " icon = " folder " expanded >
< nana-tree-item label = " Child " icon = " code " ></ nana-tree-item >
Property Type Default Description labelstring''Plain-text label. Ignored when the label slot is used. iconstring | undefined—Leading icon name (a nana-icon name). badgestring | undefined—Trailing badge text. expandedbooleanfalseExpanded state of a branch node. selectedbooleanfalseSelected state (the tree controls this). disabledbooleanfalseDisabled — blocks selection, expansion, and keyboard interaction. lazybooleanfalseTreat as a branch whose children load on first expand. loadingbooleanfalseShow a loading spinner in place of the chevron. isBranchboolean—Whether this node can expand. itemsNanaTreeItem[]—Direct child tree items.
Event Type Description nana-tree-item-toggleCustomEventInternal: expanded state changed (handled by the tree). nana-tree-item-activateCustomEventInternal: row activated (handled by the tree).
Slot Description (default)Child nana-tree-item nodes. labelRich label content (overrides the label attribute).
Part Description itemThe node row (icon, label, and badge) chevronThe expand/collapse chevron iconThe leading icon labelThe label badgeThe trailing badge childrenThe nested children container
Explore Tree Item interactively Every state, prop, and edge case — with live controls — in Storybook.
