Work with elements in-scene
The basic building block in UI Toolkit is a VisualElement. Visual elements form a parent-child visual treeAn object graph, made of lightweight nodes, that holds all the elements in a window or panel. It defines every UI you build with the UI Toolkit.
See in Glossary. You can add and organize elements directly in the Hierarchy window or in the UI Staging mode.
Add elements
To add an element to a UXML document:
- Open the element menu using one of the following methods:
- In the Hierarchy window or in UI Staging mode, select + > UI Toolkit > Standard Element.
- In the main menu, go to GameObject > UI Toolkit > Standard Element.
- Select the element from the list.
If the element you want isn’t in the list, select UI Library to open the UI Library window, then select the element or drag it directly from the UI Library window to the UXML document.
To add a child element to a parent:
- Right-click (macOS: Ctrl+click) the parent and select Standard Element > Add Child.
- Select the element from the list.
By default, elements have no Name attribute and appear in the Hierarchy window by type. To name an element, in UI Staging mode, double-click it to enter a name or set a name in the Inspector window. Names identify elements in the UI and don’t need to be unique.
Reorder elements
To reorder elements, you can drag one or more elements in the hierarchy or move them between parents:
Manipulate elements
To copy, paste, duplicate, or delete one or more selected elements, right-click the element and select the action. You can also use standard keyboard shortcuts.
When you copy an element in the Hierarchy window, it copies the UXML text representation of the element and its child elements. You can paste this UXML text directly into a text editor, or copy UXML text from a text editor and paste it back into the Hierarchy window.
Actions applied to an element also apply to all its child elements. For example, deleting an element deletes all its child elements, and duplicating an element replicates its entire subtree.
Read-only elements
When you add an element, additional child elements might appear in a dimmed state. These are read-only elements. This happens with some built-in UI controls, and some custom elements that create their internal hierarchy upon creation.
When you add child elements to a VisualElement, child elements are added to the contentContainer of this parent element. For example, the following ScrollViewA UI Control which displays a large set of Controls in a viewable area that you can see by using a scrollbar. More info
See in Glossary has one Foldout child element that’s inside the contentContainer. It also has several Scroller child elements that are in the shadow tree. The shadow tree is the hierarchy of child elements that are outside of the contentContainer of this element.
Attributes in UXML
Elements have per-element attributes which can be set in UXML. You can think of them as a constructor or initialization arguments. This includes the name attribute. The base VisualElement class comes with a few standard attributes that all elements share (since all elements inherit from VisualElement), like name, tooltip, and tabindex. More advanced elements and controls have additional attributes you can set, for example, the Label adds the text attribute.
Note: You can use Enter to add newline characters for the text attribute.
Change attributes in the Inspector
All standard and custom attributes appear in the Attributes section at the top of the Inspector window.
You can set the value of an attribute in the attribute section. If the field appears in bold with a solid line on the left of the label, the attribute is set to a non-default value. For example, setting tooltip from empty to test and then back to empty is different from never setting it in the first place: the first case is explicitly set to empty while the second case is never set.
If the attribute doesn’t appear in the UXML file, it’s not set.
To unset an attribute, right-click the field’s label and select Unset.
To unset all attributes, right-click the field’s label and select Unset All.