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