Put elements inside elements

Nest elements like Unity GameObjects: children move, rotate, scale, animate and hide with their parent, and a parent can lay them out.

An element can hold other elements, like a GameObject and its children in Unity. Put a coin icon inside a button, or a title and buttons inside a card, and they belong to it from then on.

Put an element inside another

There are two ways:

• In Layers, drag the element onto the middle of another element's row. The row is outlined and says "Drop to put it inside …". Dropping on the top or bottom edge of a row places it before or after instead.
• Select the element and, in Properties → Transform, choose the parent in Put inside an element….

The element stays exactly where it is on the screen. In Layers it now appears under its parent, indented, and the parent gets an arrow to fold its children away.

To take it out again, use Move out in Properties, Move out of parent in the Layers right-click menu, or drag it next to an element that isn't inside anything.

What the parent carries

Everything you do to the parent also happens to what is inside it:

• Moving it moves its children.
• Rotating it turns its children around its centre.
• Resizing it moves or stretches its children by their anchors (see below).
• Its animations move, scale, rotate and fade its children too.
• Hiding it hides its children, in the editor, in Play Mode and in Unity.
• Duplicating, copying or deleting it does the same to its children. Save as component saves it with them.

Children are always drawn on top of their parent. Change their order among themselves in Layers.

Tip: In Play Mode, clicking a child that has no actions of its own clicks its parent. A coin icon on a Buy button works like the button, just as it does in Unity.

Position and anchors inside a parent

For a child, X, Y and Rotation in Properties are measured inside the parent: from its top-left corner, turned with it. The Anchor works inside the parent too. A badge anchored top right stays in the parent's top-right corner when the parent gets bigger, and a bar anchored stretch across the bottom grows with it.

Lay out the elements inside

An element holding others can arrange them for you, like a layout group on a Unity parent. Select the parent and, under Lay out the elements inside, pick:

• Column: one under the other.
• Row: side by side.
• Grid: rows of a set number of columns, each cell as big as the largest child.
• Free: no layout, place them yourself.

Then set the Gap between them, the Padding inside the parent's edges, and where they sit: across (for example left, centre or right in a column) and along (for example top, middle or bottom). Children keep their own size. Their order is their order in Layers, and hidden children take no space, so a list closes up when one is hidden.

In Unity

Each child becomes a child GameObject of its parent, with its RectTransform anchored inside the parent. A parent with a layout gets a Vertical, Horizontal or grid layout group with the same padding, spacing and alignment. Animations, hiding and clicks behave the same as in the browser. UI Toolkit exports nest the elements the same way.

Note: Data lists (repeaters) and their card elements can't be put inside another element yet. Use a group to keep a list together with its frame.