LTS 2022.3

Tree View

Tree Views in Figma ->

A tree view control is a window that displays a hierarchical list of items.

Implementation references

Scripting API and implementation references.

UI Toolkit

IMGUI

Overview

Tree view in use in project window

Tree view displays in a multi-tiered hierarchy unlike list view which displays items as a flat list
This control only creates visual elements for visible items while allowing the binding of many more items
As the user scrolls, visual elements in tree view are recycled and re-bound to new data items

Tree view APIs

Tree view and tree view Item in project window

Tree view in UI Toolkit

UI Toolkit

Tree view in IMGUI

IMGUI

TreeView

Makes a hierarchical list of items

Docs ->

TreeViewItem

Defines information for each tree view item

Docs ->

Guidance

Comparing tree view, list view, and foldout

1. Tree View 2. List view 3. Foldout

Tree view is used for displaying items in a multi-tiered hierarchy, like a folder structure
List view is used for displaying items as a flat list
Foldout is used to expand or collapse a single level of mixed content, like Inspector controls

Icon indicating that the following content refers to a component.

List View

For more information go to Components > List View ->

Foldout

For more information go to Components > Foldout ->

Style

Row height

An annotated diagram of a foldout header and foldout contents

Tree view and list views with 16 px row heights

Tree View and List View items can have different height values by changing the virtualization method ->
‍

Alternating row backgrounds

Use showAlternatingRowBackgrounds property to add alternating row background colors to the TreeView.

Show border

Use showBorder property to show a border around the TreeView.

Multi column header

Use multiColumnHeader property to get the MultiColumnHeader of the TreeView. Can be null if the TreeView was created without a MultiColumnHeader.

Header label style

Bold and regular label styles in tree view items

Header label text can be bold to signify a main parent folder in the hierarchy, such as assets folder in project window.

Tree view indentation and nesting

An annotated image of nested foldouts and the pixel values of each indentation level

Nested tree view items displaying indentation values

Tree view content is indented 15 pixels for each nested level
Nested tree view item limit is six items - beyond that the 15 px indentation padding is not adjusted
Foldout arrow is rendered offset from the content area

Behavior

Scrolling content

Tree view contents are always displayed in a scroll view container to enable scrolling when the contents are larger than the viewport.

Vertical scrolling is enabled by default
Use showingHorizontalScrollBar property to display horizontal scrolling in IMGUI framework

Expand and collapse

Tree view expand and collapse behavior

In tree views (e.g. hierarchy, project window), clicking on the foldout arrow expands the foldout, and clicking on the foldout text selects the tree view element.

Drag and drop to reorder and nest

Tree view items can be dragged to reorder their position, e.g. hierarchy window

Tree view items can be dragged into other folders to nest them, e.g. project window

Renaming tree view Items

Double clicking on a tree view item allows for renaming of the selected item.

Formatting

Anatomy and layout

Anatomy

Anatomy of a tree view and its key parts

A Tree view can contain and be paired with the following elements:
‍‍
1. TreeView
2. TreeViewItem
3. Scrollbar

Interaction states

The various interactive states of a tree view

Expanded

An open tree view item displaying its children.

Collapsed

A collapsed tree view item.

Default (inactive)

Default state of tree view item.

Hovered

When hovered, tree view item rows are highlighted.

Selected

When selected, tree views rows are highlighted.

Focused

When focused, tree view item labels are highlighted in blue.

Disabled

Disabled tree view items.

Color

1. Tree view item label 2. Foldout arrow 3. Icon

1. Tree view item label

Variable name

Variable description

Light theme

Dark theme

--unity-colors-default-text

The default text color

#090909

#D2D2D2

--unity-colors-default-text-hover

The default text color when the mouse pointer hovers over the text

#090909

#BDBDBD

--unity-colors-highlight-text-inactive

The text color for selected items or selected text when the control does not have focus

#FFFFFF

--unity-colors-label-text-focus

The text color for a label when it has focus

#003C88

#81B4FF

2. Foldout arrow

Variable name

Variable description

Light theme

Dark theme

Foldout Arrow

Foldout arrow color

#686868

#7A7A7A

3. Icon

Variable name

Variable description

Light theme

Dark theme

Primary Icon Color

Icons that don’t require to be color coded uses this color

#555555

#C4C4C4

Icon indicating link goes to a page with foundational content

Icon color palette

For information about icon color use go to Foundations > Iconography ->

Tree view item backgrounds

Variable name

Variable description

Light theme

Dark theme

--unity-colors-alternated_rows-background

The alternate background color for views with alternating row colors

#CACACA

#3F3F3F

--unity-colors-highlight-background

The background color for selected items or selected text

#3A72B0

#2C5D87

--unity-colors-highlight-background-hover

The background color for line items when the mouse pointer hovers over them

rgba(0, 0, 0, 0.0627451)

rgba(256, 256, 256, 0.0627451)

--unity-colors-highlight-background-hover-lighter

The background color for an item with a line specific background color when the mouse pointer hovers over them

#9A9A9A

#5F5F5F

Window background colors

For more information about window backgrounds go to Window Background Colors ->

Editor color palette

For information about general color use go to Foundations > Color Palette ->

Code samples

Code references

Scripting references for

IMGUI

TreeView

Unity - Scripting API:
TreeView

docs.unity3d.com

Arrow icon indicating link goes to an external source

TreeViewItem

Unity - Scripting API:
TreeViewItem

docs.unity3d.com

Resources and related

Resources

Unity Docs

Editor Documentation, including scripting references.

docs.unity3d.com

Figma UI Toolkit

Get started in Figma with Editor Foundations UI Toolkit

Figma library

View all ->

Object Field

An Object Field is a control where the user can assign an object or asset to a subject.

UIT

IMGUI

Search Field

A search field is an input field that allows users to enter text to be searched for.

UIT

IMGUI

Log-in required.

You are trying to access the internal Editor Foundations design system.Sign-in with your Unity Google account to continue, or visit the public site.

Tree View

Implementation references

Scripting API and implementation references.

UI Toolkit

IMGUI

Overview

Tree view APIs

Tree view in UI Toolkit

UI Toolkit

IMGUI

Guidance

Comparing tree view, list view, and foldout

Style

Row height

Alternating row backgrounds

Show border

Multi column header

Header label style

Tree view indentation and nesting

Behavior

Scrolling content

Expand and collapse

Drag and drop to reorder and nest

Renaming tree view Items

Formatting

Anatomy and layout

Anatomy

Interaction states

Expanded

Collapsed

Default (inactive)

Hovered

Selected

Focused

Disabled

Color

1. Tree view item label

2. Foldout arrow

3. Icon

Tree view item backgrounds

Code samples

Code references

Scripting references for

Resources and related

Resources

Unity Docs

Figma UI Toolkit

See also

Object Field

Search Field

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.