The Tree Navigation (often displayed as a breadcrumb trail at the bottom of the editor) is a critical feature in the visual editor that helps you select and navigate between the different nested elements that make up your landing page layout.
This is essential because modern layouts rely on placing elements inside other containers (like Sections, Boxes, or Columns).
How the Tree Navigation Works
The navigation appears as a horizontal list of element names at the bottom of the editor canvas, showing the current element you have selected and all of its parent containers, starting from the broadest element (like the Section) down to the most specific element (like Text or Image).
Key Uses of Tree Navigation
1. Selecting Parent Containers
When working with elements inside a Horizontal Box or Vertical Box, it can be difficult to select the container itself just by clicking on the canvas. The Tree Navigation makes this easy.
2. Identifying Nesting and Structure
The trail provides an immediate visual map of your page structure.
3. Quick Component Jumps
The navigation allows you to quickly jump between nested components without having to precisely click tiny elements on the live canvas.