Tree View
A hierarchical, expandable list for file trees, org charts, and nested categories — keyboard navigable with the same roving-tabindex pattern as Sidebar and Calendar, single/multiple selection, and unlimited nesting depth.
src
README.md
package.json
API
All inputs and configuration options for zyra-tree-view.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | TreeNode[] | required | { id, label, icon?, disabled?, children? } — children nest recursively |
selectionMode | 'none' | 'single' | 'multiple' | 'none' | Adds row-click (single) or checkbox (multiple) selection |
selected | (string | number)[] | [] | Two-way bound via [(selected)] — the ids currently selected |
expanded | (string | number)[] | [] | Two-way bound via [(expanded)] — the ids of currently expanded nodes |
size | 'sm' | 'md' | 'lg' | 'md' | Row height and font scale |
disabled | boolean | false | Disables the entire tree |
nodeClick (output) | TreeNode | - | Emits on every row click, regardless of selectionMode |
nodeToggle (output) | { node: TreeNode; expanded: boolean } | - | Emits when a node is expanded or collapsed |
Tokens
CSS custom properties zyra-tree-view reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Text--zyra-color-foreground | var(--zyra-color-text) | Label color of a row. |
Hover / selected background--zyra-color-tree-view-hover-bg | var(--zyra-color-surface-inset) | Background of a hovered row. |
Selected background--zyra-color-primary-subtle | var(--zyra-color-accent-muted) | Background of a selected row. |
Selected text--zyra-color-primary | var(--zyra-color-accent) | Label color of a selected row, and the focus-outline color. |
Muted text--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Color of the expand/collapse chevron and disabled-row label. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Root has role="tree"; each row has role="treeitem" with aria-level and aria-expanded
- Only the focused row is in the tab order — Arrow Up/Down move focus, Arrow Right/Left expand/collapse or move to parent/child
- Home/End jump to the first/last visible row
- Enter/Space toggles selection (if enabled) or expansion