Skip to main content

Tree

shadow

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​

Slots​

Multiple​

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​

No properties available for this component.

Events​

No events available for this component.

Methods​

getAllItems​

DescriptionRetrieves all items that match the selector 'wje-tree-item' within the current context.
Signature() => Array<Element>

getExpandCollapseIcon​

DescriptionRetrieves and appends an expand/collapse icon to a given item based on the provided status.
Signature(item: HTMLElement, status: string) => void

getSlots​

DescriptionReturns slots from the current component state.
Signature(item: any, slotName: any) => void

updateCheckboxState​

DescriptionUpdates 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​

DescriptionUpdates 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​

DescriptionPropagates 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​

DescriptionPropagates 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​

NameDescription
nativeThe native container part of the tree.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

NameDescription
defaultThe default slot to place wje-tree-item child components.

Content