Tree
The Tree element allows hierarchical display of data in a tree structure. It is used to visualize categories, file systems or navigation structures. Tree contains wje-tree as the main container and wje-tree-item as the individual tree entries. Items can contain children, creating a nested hierarchy.
Basic use
This example presents the tree with nested nodes in its baseline form so the default hierarchy and expand/collapse behavior are easy to read.
Slots
This example uses slots to add icons or supporting content to individual tree nodes.
Multiple
This example allows multiple branches of the tree to stay open at the same time, which is useful when comparing distant branches.
Nested indentation
For deeper nesting levels (for example Deciduous -> Maple -> Field maple), indentation is applied continuously to each opened branch. This keeps level 3 and deeper items visually separated from their parent level.
TO DO complete tree and tree item docs
When to use
Use wje-tree when users need to understand location, move between views, or traverse hierarchy.
When not to use
Do not combine multiple competing navigation patterns for the same user flow.
Accessibility
Ensure visible active/selected states, predictable tab order, and clear control naming.
Best Practices
- Keep URL state and UI navigation state synchronized.
- Use consistent labels across menu, breadcrumbs, and tabs.
- Add context for deep structures (breadcrumbs, headings, icon cues).
Attributes and Properties
selection
| Description | Gets the current selection mode for the element. If no selection is explicitly set, it defaults to 'single'. |
| Attribute | selection |
| Type | string |
| Default | single |
Events
No events available for this component.
Methods
getAllItems
| Description | Retrieves all items that match the selector 'wje-tree-item' within the current context. |
| Signature | () => Array<Element> |
getExpandCollapseIcon
| Description | Retrieves and appends an expand/collapse icon to a given item based on the provided status. |
| Signature | (item: HTMLElement, status: string) => void |
getSlots
| Description | Returns slots from the current component state. |
| Signature | (item: any, slotName: any) => void |
updateCheckboxState
| Description | Updates the state of a checkbox, syncing the state both upwards to parent elements and downwards to child elements as necessary. |
| Signature | (changedItem: object, isInitialSync?: boolean) => void |
updateParentState
| Description | Updates the state of the parent item based on the state of its child items. Recursively propagates changes up to all parent items to reflect the selection or indeterminate state accurately. |
| Signature | (item: object) => void |
propagateStateUpwards
| Description | Propagates the state changes of an item upwards through its ancestors in the hierarchy. Calls the updateParentState method for each parent element until no parent exists. |
| Signature | (item: HTMLElement) => void |
propagateStateDownwards
| Description | Propagates the selected state of an item to its children recursively. Depending on the isInitialSync flag, it also determines how the state should be applied to the child items and updates the parent state if needed. |
| Signature | (item: object) => void |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native container part of the tree. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
default | The default slot to place wje-tree-item child components. |