Navigator is a navigation tree panel providing easy access to every control on the editor with just one click. Navigator enables the user to drag controls throughout the page and edit them, quickly and easily.
Navigator is particularly useful for long pages or pages with complex multi-layered design, and for controls combining Z-Index, minus margin, position absolute, etc. It allows you to access control handles that may be positioned behind other elements.
When to use Navigator
Navigator is especially useful as your design grows in size or complexity. When a form or workflow contains many controls, sections, or nested groups, finding and organizing elements directly on the canvas can become time-consuming.
By using Navigator, you can clearly see the overall structure of your design, quickly locate specific elements, and confidently make adjustments without losing context.
How to access Navigator
Navigator is available on demand through the designer canvas.
To open Navigator, right-click anywhere in the canvas and select Navigator from the context menu. This approach keeps the interface clean while allowing you to access Navigator exactly when you need to inspect or manage structure.
Navigate and locate elements
Navigator presents your design as a hierarchical list of elements, including containers and individual controls.
Click a control in the Navigator to automatically scroll to its corresponding Edit panel. This allows you to quickly locate and configure elements without manually searching for them on the canvas.
Collapse/Expand one element
Click an individual control’s arrow button to expand or collapse that control.
Collapse/Expand all elements
To expand or collapse all elements at once, use the arrow buttons in the upper-right corner of the Navigator panel. This is useful when switching between a detailed view and a high-level overview of the design.
Reorganize controls using Navigator
Navigator allows you to reorganize the structure of your design directly from the panel.
Drag a control up or down in the Navigator list to change its order. You can place a control before or after another element or drag it into a different group or container.
The drag-and-drop interaction in Navigator is designed to be smooth and responsive. You can directly drag and drop controls from the panel onto the form.
Hide or show controls during design
Navigator lets you control the visibility of elements while designing.
Click the View button next to a control to hide or show it on the canvas. Hidden controls remain part of the design structure and continue to function, but they are not displayed visually.
Hiding controls can help you focus on specific areas of the design, especially when working with dense or overlapping layouts.
Rename controls in Navigator
Rename controls in Navigator to make your design structure easier to read and maintain.
To rename a control, double-click its name in the Navigator and enter a new display name. Using clear and descriptive names is recommended, particularly for large designs or when collaborating with others.
Renaming controls does not affect their functionality, but it improves clarity and navigation within the Navigator panel.
Adjust the Navigator panel position
Float
Drag the Navigator panel anywhere on the page
Dock
Pin the Navigator panel to the side of the screen by click the pin button.
Summary
Navigator updates automatically as your design changes and always reflects the current structure. It is intended as a navigation and organization tool and works alongside the canvas to help you manage complex designs more effectively.