Navigator

In the Navigator can see the Hierarchy of elements. You can also select and move elements right inside the Navigator.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

The Navigator gives you a visual way to interact with every element on a given page. There are three main features of the Navigator:

  • Selecting an element
  • Hierarchy of elements
  • Moving elements

Selecting an element

If you hover over different elements in the Navigator, the corresponding elements on the Canvas will highlight. The same is true if you hover over elements on the Canvas, elements in the Navigator will highlight.

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.

 

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

 

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 (indicated in the navigator with an eye-slash icon) you cannot see or select it on the Canvas, but you can still select it from the Navigator.

 

Indicators in the Navigator

Icons on the right of an element may indicate the following:

  • Hash icon # — the element is a g child that has a manual position in its grid
  • Eye-slash icon— the element has its display set to hidden and is not visible on the canvas
  • Lightening icon — the element has an interaction trigger applied to it
secondary icons

Elements connected to Collection Fields are indicated in purple.

Hierarchy of elements

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.

Learn more about Element Hierarchy.

 

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.

 

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.