Skip to main content

Tree Item

shadow

The Tree Item (wje-tree-item) element represents a single item within the Tree component. It can contain text, icons or other nested items, allowing you to create hierarchical structures.

Note

For more information on using the Tree item, navigate to the [Tree] item documentation(./tree).

Reordering And Styling​

When the parent wje-tree uses the reorder attribute, direct content assigned to the start slot is used as the drag handle. The wje-tree-item then renders drop state through internal tree classes and row pseudo-elements, without requiring data-* attributes.

Colors, borders, and drop indicators are controlled through theme tokens. Default values live in light.css; dark.css only overrides color tokens. For local customization, use tokens such as --wje-tree-item-drop-color, --wje-tree-item-border-radius, --wje-tree-item-border-width, --wje-tree-item-drop-line-width, or --wje-tree-item-drop-border-radius.

When to use​

Use wje-tree-item when the user needs to navigate the application or transition between states/screens.

When not to use​

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility​

Provide clear active/selected states, predictable tab order, and naming of controls.

  • Keep the URL and UI state in sync to make the navigation reproducible.
  • Use consistent item terminology across menus, breadcrumb and tabs.
  • For deep structures, add auxiliary context (breadcrumb, title, icons).
  • For 3+ nesting levels, fine-tune the indentation via --wje-tree-item-indent to make the levels visually unambiguous.

Attributes and properties​

Events​

Methods​

CSS shadow parts​

CSS custom variables​

Slots​

Content