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.
Parent
Child one
Child two
Show code Copy < 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 >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/tree " ;
< nana-tree style = " width:100% " >
< nana-tree-item > Child one </ nana-tree-item >
< nana-tree-item > Child two </ nana-tree-item >
Properties Property Attribute Type Default Description label— string''Accessible name for the tree. selection— TreeSelection'single'Selection behaviour. size— TreeSize'default'Density scale.
Events Event Description nana-selection-changeSelection changed (`detail.selection`). nana-expandA branch expanded (`detail.item`). nana-collapseA branch collapsed (`detail.item`).
Slots Slot Description (default)The top-level `nana-tree-item` nodes.
CSS parts Part Description ::part(base)The tree container.
CSS custom properties Property Description --nana-tree-indentIndent step per depth level. --nana-tree-row-heightNode row height. --nana-tree-connectorConnector line colour.
Event Type Description nana-selection-changeCustomEventSelection changed (detail.selection). nana-expandCustomEventA branch expanded (detail.item). nana-collapseCustomEventA branch collapsed (detail.item).
Slot Description (default)The top-level nana-tree-item nodes.
Variable Default Description --nana-tree-indent— Indent step per depth level. --nana-tree-row-height— Node row height. --nana-tree-connector— Connector line colour.
Part Description baseThe tree container
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Tree interactively Every state, prop, and edge case — with live controls — in Storybook.
