LTS 2022.3

Foldout

Foldouts in Figma ->

Foldouts are collapsible sections of a user interface that hides or reveals the elements it contains.

Implementation references

Scripting API and implementation references.

UI Toolkit

IMGUI

Overview

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”

Foldouts 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

UI Builder

About UI Builder ->

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}

UI Toolkit

Foldout

Makes a foldout

Docs ->

Foldouts in IMGUI

IMGUI

EditorGUI.Foldout

Instantiates a foldout

Docs ->

Guidance

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

Icon indicating that link goes to a page with content about components

Tree view

For more information on tree views go to Components > Tree View ->

List view

For more information on list views go to Components > List View ->

Style

Foldout content

A foldout header and foldout contents

Header

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

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

Behavior

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