Implementation references

Scripting API and implementation references.

UI Toolkit


A lighting foldout displayed as collapsed and expanded, in light and dark themes
The expanded and collapsed view of a lighting foldout
  • Foldouts hide and display content in a box that can be expanded and collapsed
  • Foldouts allow the grouping of interfaces and elements into a compact space
  • Due to their collapsing and expanding behavior, a foldout is sometimes referred to as an “accordion” or an “expandable box”

Foldout APIs

Foldout headers displayed with bold text and with icons
Foldouts can have icons and bold labels to indicate they are headers

Foldouts in UI Toolkit

Slider icon
UI Builder allows visual creation of UI assets in UI Toolkit, and is available as a built-in feature {2021.1 and later} or a package {2020.3 and earlier}
API in UI Toolkit
Makes a foldout
Foldouts in IMGUI
Instantiates a foldout


When to use

Use a foldout for grouping together a small number of items in a box that can be hidden by collapsing or revealed by expanding.

Icon of a red triangle to indicate a message of warning.
Adding a foldout inside Listview
Do not manually insert a foldout inside list views. Instead use the list view's built-in toggle option to add a foldout.
Icon of a letter I in a blue circle indicating this is a piece of informational content
Inspector title bars
Inspector title bars are individual components that are similar to foldouts with additional controls like toggles, and toggle buttons.

Choosing between foldout, list, and tree view

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


Foldout content
An annotated diagram of a foldout header and foldout contents
A foldout header and foldout contents


  • Foldout headers always have a foldout arrow and a foldout label
  • Foldout labels can be bold to build hierarchy between nested foldouts
  • In some instances foldouts can have an icon (as seen in the tree view of the project window)

Content — Any content can be placed in Foldouts.

  • Foldouts can have lists and appear in menus to help stratify domains
  • Foldouts can be used to divide an interface into specialized sections or individual processes (as seen in the Inspector’s components)
  • Some foldouts contain items which affect other areas of an interface as seen in the nested folder foldouts of the project window which change which folder’s contents are being displayed
Foldout indentation and nesting
An annotated image of nested foldouts and the pixel values of each indentation level
An annotated image of nested foldouts and the pixel values of each indentation
  • Foldout content is indented 15 pixels for each nested level
  • The nested foldout limit is six items; beyond that the 15 px indentation padding is not adjusted
  • The foldout arrow is rendered offset from the content area


Expand and collapse
An animated image show the Mesh Renderer’s foldouts expanding, then collapsing
Mesh renderer property foldouts expanding and collapsing
  • When used in tree views (e.g. hierarchy, project view), clicking on the foldout arrow should expand the foldout, and clicking on the foldout text should select the tree view element
  • When using foldouts for other cases (e.g. Inspector properties) clicking on either the foldout arrow or the foldout text should expand the foldout
Scrolling content

If Foldout contents are longer than its window scroll view should be used to allow for vertical scrolling.


Anatomy and layout

An annotated image of a foldout’s key parts
Anatomy of a foldout and its key parts

A numeric field can contain and be paired with the following elements:

1. Foldout arrow
2. Foldout icon
3. Foldout label
4. Content

1. Foldout arrow

Arrow icon to expand and collapse foldout.

2. Foldout icon

Icon of the foldout item.

3. Foldout label

Label of the foldout item.

4. Content

Any type of control can be placed in foldouts.

Interaction states

All interactive states of a foldout, displayed in light and dark themes
The various interactive states of a foldout

An open foldout displaying its contents.


A collapsed foldout.


Default state of foldout.


When hovered foldout rows are highlighted.


When focused foldout labels are highlighted in blue.


Disabled foldouts.


An annotated foldout label in light and dark theme, including the label, a foldout arrow and an icon
1. Foldout label 2. Foldout arrow 3. Icon
1. Foldout label
The border color for a button control when it is pressed
2. Foldout arrow
Foldout Arrow
Foldout arrow color
3. icon
Primary Icon Color
Icons that do not require color coding use this color

Code references