Tree
@xui/treeA hierarchical tree with expand/collapse carets, single selection, optional icons and secondary labels. Full keyboard support: Up/Down move, Right/Left expand/collapse or step in/out, Enter/Space select. [(selectedId)] binding.
Install
pnpm add @xui/tree Add the barrel to a standalone component's imports:
import { XuiTreeImports } from '@xui/tree';@Component({ imports: [XuiTreeImports], // …})Examples
Default
Loading preview…
<div class="w-80"><xui-tree [nodes]="nodes" [(selectedId)]="selected" aria-label="File explorer" /></div>Router aware
Loading preview…
<div class="w-80"> <xui-tree xuiTreeRouter persistKey="storybook-docs-nav" [nodes]="nodes" aria-label="Documentation" (nodeClick)="go($event)" /></div>API
Makes a xui-tree follow the router: the node whose link matches the current URL becomes selected and aria-current="page", and everything above it opens so it is on screen.
Inputs
nodeLink(node: XuiTreeNode) => string | null | undefinedA node's URL. Defaults to data.link, then data.url, then data.href.defaultNodeLinkmatchXuiTreeRouterMatchWhether a node's link has to be the whole URL or only its start. prefix is what a documentation sidebar wants — /docs/ecs should light up while you are on /docs/ecs/queries — and the deepest match still wins, so the child rather than the section is the one marked current.'prefix'revealActivebooleanAlso open the ancestors of the active node, so it is never hidden.truepersistKeystring | nullRemember which nodes are open under this key, in sessionStorage. null — the default — keeps expansion for as long as the tree is alive, which already covers navigating around a shell that does not tear it down.nullA hierarchical tree of {@link XuiTreeNode}s with expand/collapse carets, single selection, optional icons and secondary labels, and full keyboard support (Up/Down move, Right/Left expand/collapse or step in/out, Enter/Space select).
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''aria-labelstring | nullAccessible name for the tree — what it is a tree of.nullnodesXuiTreeNode[]The roots. Each node carries its own children, so the whole tree is one nested array.[]selectedIdstring | number | nullThe selected node id. Two-way bindable with [(selectedId)].nullexpandedIdsreadonly (string | number)[]Ids of the expanded nodes. Two-way bindable with [(expandedIds)], which is how expansion survives something else rebuilding nodes. Seeded from each node's isExpanded the first time that node is seen, and only then: a node the reader has since collapsed stays collapsed when the array is rebuilt around it.[]currentIdstring | number | nullThe node representing where the reader already is, marked aria-current="page". Distinct from selectedId on purpose — selection is a state of the widget, current is a fact about the document — though a navigation tree sets both to the same node. A model rather than an input so xuiTreeRouter can write it from the URL.nullOutputs
nodeClickXuiTreeNodeEmits the node that was activated, by click or by Enter.nodeExpandedXuiTreeNodeEmits the node that was just expanded.nodeCollapsedXuiTreeNodeEmits the node that was just collapsed.Methods
expand(...ids: readonly (string | number)[]): voidExpand the given nodes, leaving whatever is already open alone.