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).

TO DO complete tree and tree item docs​

When to use​

Use wje-tree-item 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).
  • For 3+ levels of nesting, tune indentation with --wje-tree-item-indent so each level stays visually distinct.

Attributes and Properties​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Content