ef-tree / ef-tree-item

ef-tree is a general-purpose tree view driven by a .items array. ef-hierarchy is built on top of it. Use ef-tree directly when you need a collapsible tree for non-composition data.

<ef-tree show-header header="Files"></ef-tree>

<script>
  const tree = document.querySelector('ef-tree');
  tree.items = [
    {
      id: 'src',
      label: 'src',
      children: [
        { id: 'index', label: 'index.ts' },
        { id: 'app', label: 'app.ts' },
      ],
    },
    { id: 'package', label: 'package.json' },
  ];

  tree.addEventListener('tree-select', (e) => {
    console.log('selected:', e.detail.id);
  });
</script>

TreeItem shape:

interface TreeItem {
  id: string;
  label: string;
  icon?: string;       // optional icon HTML/text
  children?: TreeItem[];
}

Events:

CSS Custom Properties

Each row is rendered by an internal ef-tree-item:

CSS Parts