HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TreeView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA tree of items, navigable entirely from the keyboard.ExperimentalSince 0.1.0NavigationUsageimport'@fusion.dev/helix/tree'import'@fusion.dev/helix-headless/tree'Preview
API ReferenceRoothelix-treeA tree of items, navigable entirely from the keyboard.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.chevronPlacement"start"|"end"Which end of the row the branch chevron sits at.defaultActivestring""Initial item for uncontrolled use.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring"Tree"Accessible name for the tree.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tree's items.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the current node moves, and cancelable. The only way to refuse one.helix-selectHelixSelectEventFired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
PartDescriptionemptyShown when there are no rows to show.loadingShown while the rows are still on their way.treeThe tree container.
CSS PropertyDescription--tree-chevron-gapSet from `chevron-placement`; the space before the chevron.--tree-chevron-orderSet from `chevron-placement`; read by each item.--tree-chevron-sizeSize of the chevron, and the gutter a leaf reserves.--tree-gapSpace between rows.--tree-indentIndent added per level.--tree-row-sizeLeast height of a row, so rows with and without an icon match.
Itemhelix-tree-itemOne node in a tree.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.focusablebooleanfalseWhether this item holds the tree's single tab stop.hrefstring""Where this node goes, which makes its row a real link.levelnumberDepth from the root, set by the tree so indentation needs no CSS nesting.openbooleanWhether the element is open.relstring""What the link declares about where it goes.selectedbooleanfalseWhether this item is the current one.targetstring""Where the link opens, for the rare row that leaves the site.valuestring""Identifies the item to the consumer, carried in `helix-select`.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The item's label.childrenNested items, which make this a branch.endAfter the label, at the row's far side. A count, or a state.startBefore the label, after the chevron. A mark about the item.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before a branch closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before a branch opens, and cancelable.helix-selectHelixSelectEventFired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionactivate() => voidChooses this node the way a reader does, from a press or from Enter.focusItem() => voidMoves focus to this node.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.select() => voidSelects this node and announces it.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptiongroupThe container for nested items.itemThe node, and the focus target.labelThe label text.rowThe clickable label row.toggleThe expand and collapse control.
CSS PropertyDescription--tree-chevron-sizeSize of the chevron, and the gutter a leaf reserves.--tree-gapSpace between rows.--tree-indentIndent added per level.--tree-levelHow deep this row sits, counting from zero, for the indent.--tree-row-sizeLeast height of a row, so rows with and without an icon match.
Roothelix-headless-treeA tree of items, navigable entirely from the keyboard.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring"Tree"Accessible name for the tree.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tree's items.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the current node moves, and cancelable. The only way to refuse one.helix-selectHelixSelectEventFired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
PartDescriptionemptyShown when there are no rows to show.loadingShown while the rows are still on their way.treeThe tree container.
Itemhelix-headless-tree-itemOne node in a tree.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.focusablebooleanfalseWhether this item holds the tree's single tab stop.hrefstring""Where this node goes, which makes its row a real link.levelnumberDepth from the root, set by the tree so indentation needs no CSS nesting.openbooleanWhether the element is open.relstring""What the link declares about where it goes.selectedbooleanfalseWhether this item is the current one.targetstring""Where the link opens, for the rare row that leaves the site.valuestring""Identifies the item to the consumer, carried in `helix-select`.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The item's label.childrenNested items, which make this a branch.endAfter the label, at the row's far side. A count, or a state.startBefore the label, after the chevron. A mark about the item.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before a branch closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before a branch opens, and cancelable.helix-selectHelixSelectEventFired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionactivate() => voidChooses this node the way a reader does, from a press or from Enter.focusItem() => voidMoves focus to this node.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.select() => voidSelects this node and announces it.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptiongroupThe container for nested items.itemThe node, and the focus target unless `href` moves it to the row.labelThe label text.rowThe clickable label row, which is an `<a>` where `href` is set.toggleThe expand and collapse control.
CSS PropertyDescription--tree-levelHow deep this row sits, counting from zero, for the indent.
ExamplesNameDescriptionChevron PlacementThe branch marker at either end of the row.ControlledA tree whose current node is the page's, which is what a router-driven one needs.EventsChoosing bubbles to the tree and opening does not, which is why they are bound apart.FlattenedA node told its own depth, for a tree built from a flat list rather than by nesting.PreviewNested nodes that open and close, with one marked current.PreviewNested nodes that open and close, with one marked current.With IconsThe same tree with a glyph on each node.