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.
html
<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:
ts
interface TreeItem {
id: string;
label: string;
icon?: string; // optional icon HTML/text
children?: TreeItem[];
}Attributes
4 of 4
expand-all
- React prop
expandAll- Type
boolean- Default
true- Description
- Expands all items by default.
header
- React prop
header- Type
string- Default
""- Description
- Header text shown above the tree (when
show-header).
selected-id
- React prop
selectedId- Type
string | null- Default
- —
- Description
- ID of the currently selected item.
show-header
- React prop
showHeader- Type
boolean- Default
false- Description
- Whether to show the header row.
CSS Parts
| Part | Description |
|---|---|
container | This part is the outer tree wrapper. |
empty | This part is the empty-state message. |
header | This part is the optional header. It appears when show-header is true. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--tree-bg | var(--ef-color-bg) | Background color of the tree container. |
--tree-border | var(--ef-color-border) | Border color. |
--tree-hover-bg | var(--ef-color-border-subtle) | Row background color on hover. |
--tree-selected-bg | var(--ef-color-primary-subtle, rgba(110,168,254,0.18)) | Row background color when selected. |
--tree-text | var(--ef-color-text) | Text color. |
Events
| Event | Detail | Description |
|---|---|---|
tree-select | { id: string | null; item: TreeItem | null } | This event fires when the user clicks a row. |
CSS Parts
| Part | Description |
|---|---|
children | This part is the wrapper around the nested child items. It receives the data-collapsed attribute. |
expand-icon | This part is the expand and collapse chevron. |
icon | This part is the optional item icon. |
label | This part is the item label text. |
row | This part is the item row. It receives the data-selected attribute. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--tree-expand-icon-size | 1rem | Size of the expand/collapse chevron icon. |
--tree-icon-gap | 0.25rem | Gap between the icon and label. |
--tree-indent | 1rem | Indent width per nesting level. |
--tree-item-font-size | 0.75rem | Row label font size. |
--tree-item-height | 1.5rem | Row height. |
--tree-item-padding-left | 0.5rem | Row left padding. |
--tree-item-padding-right | 0.5rem | Row right padding. |