Nest components

You can nest components within other components to build and maintain complex layouts more efficiently. For example, you can make a button a component. You can then nest that button component inside various other components in your site. You could put it inside your navigation component, your hero section component, or your feature card component. This allows you to independently update each component in one place and see those changes impact every other instance.

In this lesson, you’ll learn:

1. How to nest an existing component
2. How to create a new nested component from elements in an existing component
3. How to connect nested component properties to parent component properties

How to nest an existing component

To nest an existing component into another existing component:

1. Select the component in which you want to place another component
2. Edit the main component
3. Open the Components panel (or use the keyboard shortcut Shift + A)
4. Drag a component from the panel into the selected component on the canvas or in the Navigator and release

How to create a new nested component from elements in an existing component

To create a new component inside an existing component:

1. Select the component in which you want to place another component
2. Edit the main component
3. Select the element you want to make a component
4. Open the Style panel or the Element settings panel
5. Click the “create component” icon at the top of the panel
6. Give your new component a name and click Create

Additionally, you can create a component from a parent element that already contains a component. This results in a child component nested inside a parent component.

How to connect nested component properties to parent component properties

When you nest a component — that already has component properties set — within another component that also has component properties set, you have the option to connect the nested component’s properties to the parent component’s properties. This means the nested component properties can use modified values from the parent component instances.

For example, let’s say you have a card. In that card is a heading, some paragraph text, and a button. The card is a component. The button element inside the card is also a component (i.e., a nested component). You can choose to connect the button’s text to any of the card’s text, as long as each element in the component has component properties set.

To link a nested component’s properties to a parent component’s properties:

1. Select the parent component of the nested component and edit the main component
2. Edit the main component of the nested component whose element(s) you want want to connect to a parent component property
3. Click on the element
4. Go to the Element settings panel and create a property
5. Exit the main component of the nested component
6. Go to the main component of the parent component
7. Go to the right panel
8. Click the purple “dot” icon to the left of the property you want to connect
9. Click “Create & connect new property” and create a property
10. Exit the main component of the parent component
11. Select the parent component’s instance
12. Go to the right panel
13. Choose a value for the property