Hide Expand/Collapse Arrows on First-Level Nodes in TreeView

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular TreeView

Description

How can I hide the expand/collapse arrows on the first level of nodes in the TreeView? I want arrows to remain visible for nodes deeper in the hierarchy to indicate expandable subfolders.

This KB also answers the following questions:

• How to remove TreeView expand/collapse icons for top-level nodes only?
• How to customize the TreeView arrow display using CSS?
• How to conditionally hide TreeView arrows based on node depth?

Solution

To hide the expand/collapse arrows on the first-level nodes while keeping them visible for deeper levels, use CSS targeting the aria-level attribute. The aria-level attribute represents the depth level of a node in the tree. Nodes at the first level have aria-level="1".

Apply the following CSS to hide the arrows for first-level nodes:

css

.k-treeview-item[aria-level="1"] > div > .k-treeview-toggle {
   visibility: hidden;
}

The styles must be applied at a global level (in the global styles.css or styles.scss file) or the component's view encapsulation must be set to ViewEncapsulation.None for the styles to affect the TreeView elements.

See Also

• TreeView Expandable State
• TreeView Data Binding
• TreeView API Reference