Navigating between components

Discover the components' navigation and hierarchy.

Updated over a week ago

After reading this article you’ll know how to:

  • Comprehend the layer structure

  • Switch between parent and child components

  • Work with the component tree

While building the page layout, you will have to work with various components and therefore it’s important to understand their relationship and learn how to navigate between them. For this reason, this article will explain how to switch between parent and child components and navigate through them using the component tree option.

Component layers

When you add components to your page canvas, they form layers. For instance, to add a new button component, you need to place it into the column component, and when you add one, the row component will be created. As a result, they form this three-layer hierarchy.

Page component layers

Switching between components

In the first example, we will take a look at how to switch between components. Here we see three columns, one of which is filled with the text, media, and button components, the two are blank.

Switching between page components

If you click once on the media component (the same applies to the text and button ones), it will be chosen and its options will be visible in the sidebar on the left. Using key binds you can navigate to its parent components by clicking the upper arrow: you’ll see that it has the column component upon it. By clicking on the same button one more time, you’ll get to the row component and this one will be the highest in the components hierarchy as it unites all the columns.

Switching between page components

Navigating via component tree

You can also navigate between components via the component tree. In fact, in some cases, it’s even more convenient to do so. Also, it gives you the opportunity to search for components that you need.

Open the component tree on the sidebar. Clicking the right-side button will move the entire component tree to the right side of your page.

Component tree

You will see the list of all components on your page: parent and child ones. You can easily switch between them and see the bigger picture in this overview. From the component tree, it is possible to move elements within your page by just dragging them beneath or above one another.

The key binds mentioned above are also applicable in the component tree, meaning you can quickly navigate through the tree using the arrow keys.

Using the component tree

You might have also noticed a small eye icon beside some components. This function toggles the visibility of these elements on your page when your page is compiled (after clicking the Play button).

Toggle the visibility icon within the component tree
Did this answer your question?