Skip to main content
NeuralUIv1.14.3New
GitHub
Component

Tree

Hierarchical component for nested structures with per-node expansion, local search and selection.

TypeScript
import { NeuTreeComponent, NeuTreeNode } from '@neural-ui/core/tree';

Workspace explorer

Useful for project structures, technical navigation or documentation content.

  • Neural workspace · open
    • Applications · open
      • neural-admin-pro
      • neural-ui-showcase
    • neural-ui-workspace · open
      • Advanced table
      • Tree
      • Calendar

Teams and permissions tree

Combine search with multiple selection for permissions, ownership or hierarchical filters.

  • Product teamRoadmap and final experience
    • Product Manager
    • Design
      • Visual system
      • UX research
Selected IDs—
TypeScript
import { NeuTreeComponent, NeuTreeNode } from '@neural-ui/core/tree';

@Component({
  imports: [NeuTreeComponent],
  template:     <neu-tree
  [nodes]="nodes"
  [selectable]="true"
  selectionMode="multiple"
  [searchable]="true"
  (selectionChange)="onSelectionChange($event)"
/>})
export class MyComponent {
  nodes: NeuTreeNode[] = [
    {
      id: 'workspace',
      label: 'Neural workspace',
      expanded: true,
      children: [{ id: 'showcase', label: 'Showcase' }],
    },
  ];
}