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 displays the content of the current page in the Designer in a hierarchical tree structure. It allows you to select any element on a given page, including elements that might be hard to select on the canvas. In the Navigator, you can also move elements around and update the element hierarchy. The structure updates reflect on the canvas instantly.

In this article
  1. Access, pin and resize the Navigator panel
  2. Select elements through the Navigator
  3. Identify unique elements in the Navigator
  4. Move elements using the Navigator

Access, pin and resize the Navigator panel

The Navigator panel lives in the left toolbar. You can toggle the Navigator by clicking the Navigator icon in the left panel or by pressing Z on your keyboard. You can also open the Navigator, if it's not pinned, by dragging an element onto the Navigator icon in the left panel.

Navigator

On viewports smaller than 1440px, the Navigator opens on the right (above the right-side panels) when you're dragging any element to reposition it.


Pin the Navigator

On a browser that's wider than 1440px, you can pin the Navigator so it stays open all the time. This can make it easy for you to drop elements inside and interact with elements faster.

Pinned Navigator
Keep the Navigator pinned to the left to quickly access elements on your page.

To pin the Navigator, click the pin icon in the top toolbar of the Navigator.

To unpin it, click the unpin icon in the Navigator toolbar.

Resize the Navigator

When the Navigator is pinned, you can resize the panel to control its width.

To resize the Navigator, make sure it’s pinned, then hover over its right edge and drag the blue line that appears.

Resize the Navigator
Resize the pinned Navigator to see the deepest nested elements.

See the elements of the current page

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 to only see the top-level parent elements or Expand All to see each and every element on the page.

Collapse and expand the element tree

To expand or collapse a parent element, click the toggle icon ▸ to the left of the element.

To expand or collapse all elements, click the expand/collapse icon in the Navigator toolbar.

Select elements through the Navigator

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.

Click an element in the Navigator to select it. When you select an element in the Navigator that is outside of the current view, the Canvas automatically scrolls to that element. Once you’ve selected an element, you can style it in the Style panel or configure the element’s settings in the Element settings panel. You can also create interactions through the Interactions panel.

Selecting an element through the Navigator can be helpful to identify the element’s hierarchy, its parent and siblings. This, in turn, can be extremely helpful when creating interactions.

Select elements that are inaccessible through the canvas

The Navigator is especially useful when selecting elements that are hard or impossible to select on the Canvas. These include elements that have their Display set to None or elements with a negative Z-index.

Identify unique elements in the Navigator

In the Navigator, you may notice that some elements have colored icons on their left, others have icons to their right. These are unique identifiers. They help you quickly differentiate between static and dynamic elements or auto-positioned and pinned grid children. These icons also allow you to instantly spot elements that trigger an interaction or elements that are hidden on the canvas.

The icons in the Navigator communicate important information about the element.
Unique identifiers in the Navigator
  • Green icon (left) — the element is a symbol
  • Purple icon (left) — the element is a Collection List, it’s connected to a Collection Field, or it has a condition applied to it
  • Box icon (right) — the element is an open symbol
  • Hash icon # (right) — the element is a grid child that has is pinned to a cell (has a manual position) or an area in its grid
  • Eye-slash icon (right) — the element has its display set to hidden and is not visible on the canvas
  • Lightening icon (right) — the element has an interaction trigger applied to it
Identify unique elements in the Navigator

Move elements using the Navigator

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 a 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.