You can select an element from the Navigator by clicking on it. This will allow you to access the Style Panel and Settings Panel for that element just like if you had selected it on the Canvas.

Hover to Play

When you select an element in the Navigator that is outside of the current view, the Canvas will automatically scroll directly to that element.

Hover to Play

The Navigator is especially useful when selecting elements that are challenging or impossible to select from the Canvas. For example, if an element’s Display Setting is set to None you cannot see or select it on the Canvas, but you can still select it from the Navigator.

The Navigator also serves as a way to see your page hierarchy and which elements are nested inside of other elements.

You can choose to expand or collapse parent elements. Each time you expand a parent element, the child elements within become visible and are indented. You also have the options to Collapse All or Expand All.

Moving elements

Elements can be moved directly on the canvas, but sometimes it’s easier to see the structure when moving elements in the Navigator. For example, you can reorganize sibling elements (elements that share the same parent) by dragging the elements around within the Navigator. You can also drag entire sections of the page and all the child elements within will be moved with it.

The Navigator also makes it simple to change the hierarchy of your page. This can be challenging on the Canvas with some nested elements—especially if they are similarly sized. In the Navigator, though, you can quickly grab a child element, and move it outside of its parent element. Likewise, you can nest an element by clicking and dragging it into another element.