Tree Item

Synonyms: Tree node, tree element, node

Description: The Tree-Item component represents a single entry within a hierarchical list. Tree items are used as child elements of the and can optionally contain nested tree items. Each item can work as a link, can be marked as active, and can expand or collapse child entries.

Example

Example of a tree structure with tree items. Items that contain children can be collapsed.

<kol-tree _label="Site navigation">
 <kol-tree-item _label="Item 1" _href="/">
  <kol-tree-item _label="Child item 1.1" _href="/sub1"></kol-tree-item>
  <kol-tree-item _label="Child item 1.2" _href="/sub2"></kol-tree-item>
 </kol-tree-item>
 <kol-tree-item _label="Item 2" _href="/" _active></kol-tree-item>
 <kol-tree-item _label="Item 3" _href="/">
  <kol-tree-item _label="Child item 3.1" _href="/sub3"></kol-tree-item>
 </kol-tree-item>
</kol-tree>

Accessibility

The Tree-Item component is built with accessibility in mind:

• ARIA roles: Tree items use the semantic treeitem role for screen reader support.
• Link semantics: Each tree item has an _href and behaves semantically like a link.
• Expand/collapse feedback: The expanded state is communicated with ARIA attributes.
• Keyboard support: Navigation is fully keyboard-driven and integrated with the parent .
• Active state: Items marked with _active communicate the current page or position.

Links and references

Usage

Keyboard interaction

Tree items are controlled through the parent . Keyboard interaction follows the WAI-ARIA treeview pattern:

Key	Function
Tab	Focuses the tree so tree items can be operated with the keyboard.
↑ / ↓	Moves between visible tree items on the same level.
→	Opens the submenu of the focused tree item if children are available.
←	Closes the submenu if it is open or moves focus to the parent tree item.
Enter	Activates the focused tree item and follows the _href target.
Home	Focuses the first tree item on the level.
End	Focuses the last tree item on the level.
*	Opens all closed sibling tree items on the current level.

Best practices

• Design the hierarchy carefully: Limit the nesting depth to keep the structure easy to scan.
• Use meaningful labels: _label values should clearly communicate content or destination.
• Provide link targets: Use _href to connect each tree item to a destination.
• Mark the current item: Use _active for the item that represents the current page or location.
• Control initial state deliberately: Use _open for branches that should be visible on load, but avoid opening everything.
• Use Tree and Tree-Item together: The component only makes sense inside the wrapper.
• Handle extra visuals at application level: If you need icons next to labels, render them in surrounding application logic; _label itself is text only.

Use cases

• Navigation hierarchies in websites and applications
• File and folder trees in file browsers
• Organization charts and team structures
• Nested category trees in catalogs or CMS systems
• Multi-level tables of contents in documentation
• Settings or admin navigation with nested options

Playground

Interactive example of a tree structure with different tree items:

<kol-tree _label="Navigation tree">
 <kol-tree-item _label="Home" _href="/" _active></kol-tree-item>
 <kol-tree-item _label="Products" _href="/products">
  <kol-tree-item _label="Category A" _href="/products/a"></kol-tree-item>
  <kol-tree-item _label="Category B" _href="/products/b">
   <kol-tree-item _label="Subcategory B1" _href="/products/b/b1"></kol-tree-item>
   <kol-tree-item _label="Subcategory B2" _href="/products/b/b2"></kol-tree-item>
  </kol-tree-item>
 </kol-tree-item>
 <kol-tree-item _label="Documentation" _href="/docs"></kol-tree-item>
 <kol-tree-item _label="Support" _href="/support">
  <kol-tree-item _label="FAQ" _href="/support/faq"></kol-tree-item>
  <kol-tree-item _label="Contact" _href="/support/contact"></kol-tree-item>
 </kol-tree-item>
</kol-tree>

Features

Basic tree item

A single tree item with label and link:

<kol-tree _label="Example tree">
 <kol-tree-item _label="Item" _href="/"></kol-tree-item>
</kol-tree>

Active state

Mark the current tree item with _active:

<kol-tree _label="Active navigation">
 <kol-tree-item _label="Home" _href="/" _active></kol-tree-item>
 <kol-tree-item _label="About us" _href="/about"></kol-tree-item>
</kol-tree>

Nested tree items

Tree items can contain other tree items to form hierarchies:

<kol-tree _label="Hierarchy">
 <kol-tree-item _label="Parent" _href="/">
  <kol-tree-item _label="Child 1" _href="/child1"></kol-tree-item>
  <kol-tree-item _label="Child 2" _href="/child2"></kol-tree-item>
 </kol-tree-item>
</kol-tree>

Initially expanded

Use _open to show child items immediately when the tree loads:

<kol-tree _label="Expanded branch">
 <kol-tree-item _label="Open item" _href="/" _open>
  <kol-tree-item _label="Visible child item" _href="/sub"></kol-tree-item>
 </kol-tree-item>
</kol-tree>

Methods

The following methods are available for programmatic control:

Method	Description	Return value
expand()	Expands the tree item.	Promise<void | undefined>
collapse()	Collapses the tree item.	Promise<void | undefined>
focus()	Focuses the link element of the tree item.	Promise<any>
isOpen()	Returns whether the tree item is expanded.	Promise<boolean>

Events

Tree items behave like links and can be activated by users. For handling callbacks and DOM events, see .

The primary event is click, which is triggered when the tree item is activated:

Event	Trigger	Value
click	Tree item is activated.	Depends on browser and context

API

Properties

Property	Attribute	Description	Type	Default
_active	_active	If set (to true) the tree item is the active one.	boolean | undefined	undefined
_href (required)	_href	Defines the target URI of the link.	string	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_open	_open	Opens/expands the element when truthy, closes/collapses when falsy.	boolean | undefined	undefined

Methods

collapse

collapse() => Promise<void | undefined>

Collapses the tree item.

Returns

Type: Promise<void | undefined>

expand() => Promise<void | undefined>

Expands the tree item.

Returns

Type: Promise<void | undefined>

focus(options?: KolFocusOptions) => Promise<void | undefined>

Focuses the link element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void | undefined>

isOpen() => Promise<boolean>

Returns whether the tree item is expanded.

Returns

Type: Promise<boolean>

Slots

Slot	Description
	Further Children as TreeItem Components

---